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

标签：vue const 23 -- value reactive 对象 解包 ref

  这两者都是默认deep reactive，不同的是reactive使用es6的proxy，只能使对象reactive。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} 赋值给obj，此时 整个对象被reactive转成reactive对象，其中mst也被解包为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性。 未完待续

标签：vue,const,23,--,value,reactive,对象,解包,ref
From： https://www.cnblogs.com/aliceKurapika/p/17338473.html