ref与reactive 认识前言学习 vue，对 reactive 和 ref 对比记录一下 reactive 返

前言

学习 vue，对 reactive 和 ref 对比记录一下

reactive

const obj = reactive({ count: 0 })

返回对象的响应式副本，使用 proxy 实现，返回的对象是不等于原始对象的。建议只是用响应式对象

提示：

当将ref 对象赋值给reactive对象的属性时，ref 将被自动解包，同时维持 ref 的响应性。

const count = ref(1)
const obj = reactive({ count }) 
const obj1 = reactive({})

obj1.count = count
//个人理解两种方式在使用上可以看做是一样的，obj中可以理解为应用了属性的简洁表示法


// 它会更新 `obj.count`
count.value++
console.log(count.value) // 2
console.log(obj.count) // 2

// 它也会更新 `count` ref
obj.count++
console.log(obj.count) // 3
console.log(count.value) // 3
console.log(obj.count === count.value) // true
//此时可以理解为count和obj中的count属性关联起来了

ref

const count = ref(0)
console.log(count.value) // 0

接受一个内部值(原始类型)并返回一个响应式且可变的 ref 对象。 ref 对象仅有一个 .value property，指向该内部值。

提示：

如果将对象分配为 ref 值，则它将被 reactive 函数处理为深层的响应式对象。

这里实际返回ref对象的value是reactive响应对象类型：
const count = ref({ count: 0 })

console.log(isRef(count)) //true
console.log(isReactive(count.value))  //true
实际使用中推荐原始类型使用ref, 对象类型使用reactive

对比

作用

ref: 接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property，指向该内部值。(通常用于原始类型值转响应式)
reactive：返回对象的响应式副本

关联

ref 对象赋值给 reactive 对象的属性时会自动解包并且与该属性关联
toRef 可以用来为源响应式对象上的某个 property 新创建一个 ref
toRefs 将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的 ref

判断

isRef：检查值是否为一个 ref 对象
isReactive：检查对象是否是由 reactive 创建的响应式代理

转回原始值/对象

unref：如果参数是一个 ref，则返回内部值，否则返回参数本身
toRaw：返回 reactive 或 readonly代理的原始对象

总结

翻了一部分发现响应式部分内容挺多的

参考链接：