vue3.0之ref函数
web前端开发
共 2083字,需浏览 5分钟
· 2021-09-14
<template>
<div>{{count}}</div>
</template>
<script>
import {ref} from 'vue'
export default {
setup(){
const count = ref(10)
console.log(count.value) // 10
}
}
</script>
4、若使用ref定义复杂类型数据,则监听不到数据的变动,实际是走了reactive (const convert = (val) => isObject(val) ? reactive(val) : val)
<script>
import {ref, watch} from 'vue'
export default {
setup(){
const arr = [1,2,3]
setTimeout(() => {
arr.value[0] = 0
}, 1500)
watch(arr, (nelVal) => { // 监听不到arr的变化
})
}
}
</script>
5、ref函数的实现
(1)craeteRef 创建ref对象(将基本数据类型转为复杂数据类型)
function createRef(rawValue, shallow = false) {
if (isRef(rawValue)) {
return rawValue;
}
return new RefImpl(rawValue, shallow);
}
(2)RefImpl 类(如果传递 shallow = true 则只是代理最外层)
class RefImpl {
constructor(value, _shallow = false) {
this._shallow = _shallow;
this.__v_isRef = true;
this._rawValue = _shallow ? value : toRaw(value);
this._value = _shallow ? value : convert(value); // const convert = (val) => isObject(val) ? reactive(val) : val;
}
get value() { // value 属性访问器
track(toRaw(this), "get" /* GET */, 'value');
return this._value;
}
set value(newVal) { // value 属性设置器
newVal = this._shallow ? newVal : toRaw(newVal);
if (hasChanged(newVal, this._rawValue)) { // 判断新老值是否有变化,改变就更新值,trigger 触发依赖执行
this._rawValue = newVal;
this._value = this._shallow ? newVal : convert(newVal);
trigger(toRaw(this), "set" /* SET */, 'value', newVal);
}
}
}
本文完~
学习更多技能
请点击下方公众号
评论
排名问题新解法:探索可视化计算中的 RANK 函数
上次我们介绍了可视化计算替代 DAX 计算的一些场景。参考:PowerBI 进阶:可视化计算替代 DAX 场景探索今天我们介绍一个新的场景,这是一个困扰许多人的问题,排名问题。在 DAX 中,很多新手小白对于上下文概念还不太理解,但在处理排名问题时又要求你必须理解一些上下文,比如常见的绝对排名和相对
PowerBI战友联盟
8
回调函数(callback)是什么?一文理解回调函数(callback)
一、什么是回调函数1.1、回调函数的定义和基本概念回调函数是一种特殊的函数,它作为参数传递给另一个函数,并在被调用函数执行完毕后被调用。回调函数通常用于事件处理、异步编程和处理各种操作系统和框架的API。基本概念:回调:指被传入到另一个函数的函数。异步编程:指在代码执行时不会阻塞程序运行的方式。事件
良许Linux
0
带你玩转Linux系统之lscpu命令
链接:https://bbs.huaweicloud.com/blogs/422603一、lscpu命令介绍lscpu 是一个 Linux 命令,用于显示CPU架构的详细信息。它可以用来查看 CPU 的型号、主频、架构、虚拟化支持等。二、lscpu命令的使用帮助2.1 命令格式lscpu [选项]2
良许Linux
0
C语言基础之动态内存操作汇总
来源:机器之心1、堆区空间申请#include <stdlib.h> //头文件void *malloc(size_t size);//函数size表示申请的空间字节数函数的返回值:成功:返回值空间起始地址失败:NULL特点:分配指定大小的内存空间;分配的内存空间是连续的;需要手动释放
良许Linux
0
大模型并行训练指南:通俗理解Megatron-DeepSpeed之模型并行与数据并行(下)
文末《大模型项目开发线上营》秒杀倒计时↓↓↓接前文:(上)篇>>>大模型并行训练指南:通俗理解Megatron-DeepSpeed之模型并行与数据并行(上)(中)篇>>>大模型并行训练指南:通俗理解Megatron-DeepSpeed之模型并行与数据并行(中)06
七月在线实验室
10
以环境之“优”谋发展之“势”
好的营商环境是生产力、竞争力,更是吸引力。近年来,我县始终坚持“项目为王、环境是金”工作导向,践行101%服务理念,大力优化营商环境,厚植高质量发展沃土,为县域经济发展提供强大支撑。 紧盯重大项目,推动企业投产增效 江苏伟复能源有限公司主要生产铅酸动力蓄电池,产品直供
盱眙老妹
0
贾佳亚团队新模型对标ChatGPT+DALL-E 3王炸组合!读懂梗图刷爆榜单,代码复现数学函数
来源:新智元【导读】贾佳亚团队提出VLM模型Mini-Gemini,堪比GPT-4+DALL-E 3王炸组合,一上线就刷爆了多模态任务榜单!读得懂梗图,做得了学术,用代码就能复现数学函数图。刷爆多模态任务榜单,超强视觉语言模型Mini-Gemini来了!效果堪称是开源社区版的GPT-4+DALL-E
AI算法与图像处理
10
100种分析思维模型之:本质思维
你好,我是林骥。北京有个出租车司机,原来住在四合院,房改之后,他就把四合院卖了,买了一辆桑塔纳,当时感觉风光无限,现如今则是后悔不已。假如这个出租车司机当时具有本质思维,也许就不会做出卖房买车的决定。下面介绍 100 种分析思维模型的第 97 种:本质思维,它能帮助我们更好地看清事物的本质,进而做出
林骥
18