vue中的ref 和 reactive--今天学了啥 23/3/12

 

这两者都是vue3 composition API 中默认deep reactive，不同的是reactive使用es6的proxy包裹，只能使对象reactive。ref不仅支持对象还支持基本数组，遇到复杂的类型优先使用ref()会更好。不能说ref是reactive的超集，因为这两者返回的类型就不一样。

 

Ref type:

function ref<T>(value: T): Ref<UnwrapRef<T>>

interface Ref<T> {
  value: T
}

如果将一个对象赋值给 ref，那么这个对象将通过 reactive() 转为具有深层次响应式的对象。这也意味着如果对象中包含了嵌套的 ref，它们将被深层地解包。

什么意思呢？我们看看如下代码：

示例代码：

const obj = ref({act:1,m1:2})
const msg= ref('ddd')
obj.value.m2 ={a:1,b:2，mst:msg}
console.log(obj.value.m2.mst) // 'ddd'

对象{a:1,b:2，mst:msg} 赋值给obj.value.m2，此时 整个对象{a:1,b:2，mst:msg}被reactive化，其中mst会被解包，解包是什么意思？按照常理，mst的值是ref对象，要访问mst的值应该是

 obj.value.m2.mst.value,但因为有解包这个功能obj.value.m2.mst就能直接访问msg.value，并且当对mst数据更改时，msg.value也是同步的。

Reactive type:

function reactive<T extends object>(target: T): UnwrapNestedRefs<T>

上面说了ref对象在reactive会被解包，但是，当访问到某个响应式数组或 Map 这样的原生集合类型中的 ref 元素时，不会执行 ref 的解包。

const books = reactive([ref('Vue 3 Guide')])
// 这里需要 .value
console.log(books[0].value)

const map = reactive(new Map([['count', ref(0)]]))
// 这里需要 .value
console.log(map.get('count').value)

另外Reactive 对象如果使用解构的话会丧失reactive性。

未完待续