reactive ref 简单介绍
Vue3.0中提供了两个可以创建响应式对象的函数,那就是 reactive 函数和 ref函数。
ref 函数传入一个值作为参数,返回一个基于该值的响应式Ref对象,该对象中的值一旦被改变和访问,都会被跟踪到,就像我们改写后的示例代码一样,通过修改 count.value 的值,可以触发模板的重新渲染,显示最新的值。
reactive 则是 修改state.reactiveField的值
简单说说它们的区别。
1.写法不一样 ref偏向单独变量实现 reactive 偏向用对象里添加属性实现
2.ref只可以监听简单数据,reactive可以监听所有数据。
3.修改值时不一样 ref在setup函数中修改需要通过修改 count.value 的值,HTML标签直接使用count
reactive 则是 修改state.reactiveField的值,HTML标签也是使用state.reactiveField,如果想要直接使用.reactiveField不加state,需要借助toRefs进行转换为普通对象
将state返回 例如 return{…toRefs(state)}
reactive
让我们来看看是怎么实现的
大致实现思路:先判断是不是传递过来的参数是不是对象类型,然后进一步判断是数组还是对象,再分别队它们的子元素或子属性遍历看看有没有是对象类型的值,有则再执行ractive一次,没有的话就是其他类型就直接返回一个Proxy对该值进行监听,如果传递的不是对象类型则报错。
下面我们来模拟一些数据,看看能不能实现修改值发生监听
对象类型
后台:
前面四个输出 对象 {} 来源于判断该值为对象进行的操作
中间四个输出 更新UI界面则是 Proxy里面的 因为我们修改了它的值
最后我打印了一下reactive处理后的该对象发现其对该对象中含有的对象类型都被Proxy进行控制且对应值也发生了改变,说明实现成功了。
数组类型
后台输出:
这个传递的数组里既有对象又有数组
前四次中的 1 3 是对数组进行修改触发的
2 4是对对象修改触发的,也就是上面对象类型修改的
中间四次同样是Proxy中修改值时触发的
最后我打印了一下reactive处理后的该数组发现其对该数组中含有的对象类型和数组都被Proxy进行控制且对应值也发生了改变,说明实现成功了。
ref
实现了reactive那么ref久好办了,毕竟ref底层就是基于reactive实现的,我们只需要返回一个我们定义的myReactive然后传递参数时传递一个对象,对象中默认有一个value属性其值也就是传进来的值