vue一共提供了两种数据响应式监听:ref , reactive
1.ref 函数传入一个值作为参数,返回一个基于该值的响应式Ref对象,该对象中的值一旦被改变和访问,都会被跟踪到,通过修改 count.value 的值,可以触发模板的重新渲染,显示最新的值。
2.其实,除了 ref 函数,Vue3.0中还提供了另外一个可以创建响应式对象的函数,那就是 reactive 函数。
下面就来说说为什么要提供两种API?
解答:
一:使用场景的不同
有的人可能喜欢这种写法
const a = 1
const b = 2
也有的人可能喜欢这种写法
const field = {
a : 1,
b : 1
}
我觉得ref更偏向于定义单个变量,而reactive更偏向定义对象。
第二:使用方式不一样
1、ref修改数据需要使用这样count.value=xxx的形式,而reactive只需要state.reactiveField=值这样来使用
2、第二点体现在template中引用时候为reactiveField,不需要state,也就是说我reactive对象里面字段是应该直接使用的(??)
3、体现在reactive在return时候需要toRefs来转换成响应式对象
注意:在下篇我们上代码来着重介绍reactive的使用注意事项