Vue使用reactive動态改變屬性

1.目的

我們的目的是根據某些事件來改變某些屬性，進而動态的展示在頁面上。

這裡如果把屬性直接定義為ref是不行的，需要定義為reactive才行。

2.使用

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

// ref 會被解包
console.log(obj.count === count.value) // true

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

注意當通路到某個響應式數組或 ​

​Map​

​ 這樣的原生集合類型中的 ref 元素時，不會執行 ref 的解包：

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

obj.count = count

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