ref
vue3 中一般用 ref
将一个值为基本数据类型的变量变成响应式的,它是一个函数,组合式 API 之一,参数为变量的初始值。举个栗子,比如我们需要一个响应式的变量 num
,初始值为 1
。在 vue2 中我们会这么做:
data() {
return {
num: 1
}
}
把 num
写在 data
里。而在 vue3 中,我们通过在 setup
函数里使用 ref
定义 num
,此时 num
成了一个类型为 Ref
(reference) 的,包含响应式数据的引用对象 :
setup() {
const num = ref(1)
}
现在,如果我们想在 js 中改变 num
的值,需要通过 num.value
。在 ref
内部,是通过给 value
属性添加 getter
/setter
来实现对数据的劫持的,这点在我们手写 shallowRef
时需要用上。
注意,在 <template>
内则不需要通过 .value
而是可以直接使用 num
。
shallowRef
只处理了 value
的响应式, 不进行对象的 reactive
处理,也就是说如果传给 shallowRef
一个对象,这个对象的任何一层属性都不是响应式的。
手写实现(拦截对数据的操作)
将 target
赋值给 _value
属性,通过对象本身的 set
和 get
方法来实现对 target
的操作的拦截:
function shallowRef(target) {
return {
_value: target,
get value() {
console.log('拦截到查询')
return this._value
},
set value(val) {
console.log('拦截到修改')
this._value = val
}
}
}
可以测试一下效果:
const testShallowRef = shallowRef('美好的')
打印查看 testShallowRef
对象本身 console.log(testShallowRef)
:
可以看到有个 value
属性,值为传递给 shallowRef
的参数。
对 testShallowRef
进行查改操作:
testShallowRef.value += '周五'
浏览器打印:
说明确实拦截到了对 testShallowRef
的查询和修改操作,那么就可以继续做一些更新渲染页面的功能。
本篇到此结束,vue3 的更多知识我也正在学习中,不足之处还望各位大佬不吝斧正~