vue3中的ref()详解

const count = ref(1);
count.value = 2;

<!-- count值为2 -->
<div>{{count}}</div>
<!-- 正确 -->
<div>{{count + 1}}</div>

const obj = {
    age: ref(1)
}

<!-- 可以正常显示-->
<div>{{obj.age}}</div>
<!-- 会报错  渲染的结果会是一个 [object Object]，因为 obj.age 是一个 ref 对象。需要obj.age.value 才能正常显示-->
<div>{{obj.age + 1}}</div>

const {age} = obj;

const a = ref(1)
const state = reactive({
    age: a
})
console.log(state.age); // 1 直接解包，不用state.age.value

const b = ref(3);
// 假如将b直接赋值给state.age,因为b是一个ref对象，则会替代之前的ref对象，则现在state.age不管如何变化都变量a没有了关系
state.age = b;
console.log(stata.age); // 3
console.log(a); // 1
// 假如将b.value赋值给state.age,其实b.value就相等于一个值，并不是ref对象，则不会替代之前的ref对象，则state.age变化，之前的变量a也会随之变化
state.age = b.value;
console.log(state.age); // 3
console.log(a); // 3

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)