watch 不會去監管 ref 裡面的 array、object。使用 deep: true 才會去監管 array、object 的變化。vue devtool 也無法接收到 ref 的即時物件值。
const num1 = ref({
num:1
})
const num2 = reactive({
num:1
})
setTimeout(()=>{
num1.value.num = 2
num2.num = 2
})
watch(num1, ()=>{
console.log('num1 change')
})
watch(num2, ()=>{
console.log('num2 change')
})
// num2 change
// -----
watch(num1, ()=>{
console.log('num1 change')
},{
deep: true
})
watch(num2, ()=>{
console.log('num2 change')
})
// num1 change
// num2 change
reactive 就像是包裝過的 ref。
我們也可以這樣用:
const num1 = ref(1)
const num2 = reactive({
num:1
})
reactive 解包特性,將 ref 放進 reactive 時,取出不需要 value。
參考官網
const count = ref(1)
const obj = reactive({})
obj.count = count
console.log(obj.count) // 1
console.log(obj.count === count.value) // true
總結
ref | reactive |
---|---|
都是響應性 | 都是響應性 |
需要用.value來獲取值 | 可直接取值 |
可接受所有型別 | 只接受Array&Object |
不可用watch監控Array&Object內的變化,但可加deep | 可用watch監控內部變化 |
只有一個指向其內部屬性的值 | reactive會深層影響ref屬性 |