免费图片制作网站模板,报价小程序制作,十大黑心装修公司排名,服装网站 欣赏往期内容#xff1a;
《Vue进阶教程》第二十课#xff1a;lazy懒执行
《Vue进阶教程》第二十一课#xff1a;支持缓存
《Vue进阶教程》第二十二课#xff1a;自定义更新(调度器)
《Vue进阶教程》第二十三课#xff1a;渲染计算属性的结果
《Vue进阶教程》第二十四课
《Vue进阶教程》第二十课lazy懒执行
《Vue进阶教程》第二十一课支持缓存
《Vue进阶教程》第二十二课自定义更新(调度器)
《Vue进阶教程》第二十三课渲染计算属性的结果
《Vue进阶教程》第二十四课优化
《Vue进阶教程》第二十五课watch基本概念
《Vue进阶教程》第二十六课实现侦听函数
《Vue进阶教程》第二十七课实现侦听对象
《Vue进阶教程》第二十八课实现新旧值
《Vue进阶教程》第二十九课立即执行的回调
《Vue进阶教程》第三十课watchEffect
1 为什么需要ref
由于proxy只能代理引用类型数据(如: 对象, 数组, Set, Map...), 需要一种方式代理普通类型数据(String, Number, Boolean...)
设计ref主要是为了处理普通类型数据, 使普通类型数据也具有响应式
除此之外, 通过reactive代理的对象可能会出现响应丢失的情况. 使用ref可以在一定程度上解决响应丢失问题
2 初步实现
1) 包裹对象
既然proxy不能代理普通类型数据, 我们可以在普通类型数据的外层包裹一个对象
用proxy代理包裹的对象(wrapper). 为了统一, 给包裹对象定义value属性, 最后返回wrapper的代理对象
function ref(value) {const wrapper {value: value,}return reactive(wrapper)
}
测试用例
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlescript src./reactive.js/script/headbodyscriptfunction ref(value) {const wrapper {value: value,}return reactive(wrapper)}// count是一个proxy对象const count ref(1)effect(() {// 访问proxy对象的属性 触发 getter 收集依赖console.log(count.value)})setTimeout(() {count.value 2}, 1000)/script/body
/html2) 添加标识
按照上面的实现, 我们就无法区分一个代理对象是由ref创建, 还是由reactive创建, 比如下面的代码
ref(1)
reactive({value: 1})
为了后续能够对ref创建的代理对象自动脱ref处理, 即不用.value访问.
考虑给ref创建的代理对象添加一个标识
示例
function ref(value) {const wrapper {value: value,}// 给wrapper添加一个不可枚举, 不可写的属性__v_isRefObject.defineProperty(wrapper, __v_isRef, {value: true,})return reactive(wrapper)
}
在Vue3源码中, 虽然不是按上述方式实现的, 但是可以这样去理解
