[ Vue3 ] 筆記 ref、reactive


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屬性
#vue3 #reactive #ref






你可能感興趣的文章

[ JavaScript  12 ]  ES6 新增特性

[ JavaScript 12 ] ES6 新增特性

Template Literals 與 Destructuring

Template Literals 與 Destructuring

MTR04_0810

MTR04_0810






留言討論