3/3 Ref, Reactive

[janlin002]

slides 連結: https://docs.google.com/presentation/d/1scqeibi9ycTRpecdeNw336Sf_0YmdEs76cQ2N_j58bc/edit#slide=id.p

讀書會內容:

官網連結

[janlin002]

1. defieneProperty vs proxy

Object.defineProperty 是用來定義對象的屬性，而 Proxy 則是用來代理對象並對其進行操作攔截和修改。兩者的應用場景不同，但都可以用來對對象的行為進行定制化。

Object.defineProperty 的缺點:

無法監聽對象屬性的新增和刪除

let num = 3
const cat = {
    name: '大橘',
    sex: 'boy',
    age: 5
}
Object.defineProperty(cat,'age',{
    get() {
        console.log('get value')
        return num
    },
    set(val) {
        console.log('set value', val)
        num = val
    }
})
cat.age = 6 // 可以被监听到
cat.breed = '狸花猫' // 无法被监听到

由於 breed 不在原始的 cat 中，所以無法觸發 set function

可以看到數據無法被讀取到，從而無法實現數據的響應式，所以在 Vue2 中增加了 set、delete 等API，並且對數組的 api 也進行了重寫。並且這種響應式對深層的嵌套對象，需要進行深層的監聽，會消耗極大的性能。

hackmd

2. 在做computed或者watch時，會把物件定義成ref還是reactive

[yhosutun2490]

針對今天投影片第19張:

1. reactive 如果帶入原始型別資料(Primitive type)，是會返回原始值，但Vue不會創建reactiveObject，無法建立響應式同步到畫面上。
2. 一般JS Proxy代理物件則是只能接受Object型態資料，如果硬是這麼做會出現Type Error程式執行中斷，在Vue Reactive源碼中有利用isObject()，判斷傳入值是否為物件，再轉為真正的Vue reactive響應式物件，避免出錯。

Vue Core 源碼(baseHandler 155行):
https://github.com/vuejs/core/blob/main/packages/reactivity/src/baseHandlers.ts

stackover-flow討論 (第一題):
https://stackoverflow.com/questions/71537151/reactivity-of-primitives-using-reactive-in-vue-3
提問的第二題則是針對響應式資料重新賦值後，脫離reactive or ref，自然就沒有響應到畫面上

[janlin002]

https://www.youtube.com/watch?v=NZfNS4sJ8CI