【记录】VUE的ref和reactive理解

ref

"接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property，指向该内部值。"--vue官网

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

count.value++
console.log(count.value) // 1

个人目前的理解就是用ref创建了一个叫count的对象，这个对象有且仅有一个.value的property，这个count.value的值就是ref()的括号里面的值

reactive

const obj = reactive({ count: 0 })

返回对象的响应式副本（*理解上应该就是对于之前的count对象又创建了个叫obj的副本对象，obj与count是响应式的关系）

reactive解包ref

第一种

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

 第二种

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

 从这里是可以看到ref对reactive解包了

console.log(obj.count === count.value) // true

 同时reactive保持了ref的响应性

// 它会更新 `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

ref与reactive的不同之处就是ref会自带一个value来存值，而reactive的值存在obj.XXX（与要创建副本的对象同名）里

推荐一篇博客，讲的很详细Vue3.0系列(二)： VUE3.0组合API_前端卡卡西呀的博客-CSDN博客_vue3.0组合api