3/31 Watch

[janlin002]

3/31 vue watch

[WeiLocus]

這週的簡報我放在這裡
https://hackmd.io/@weii/Sk7bpd2TT#/

[janlin002]

討論問題:

1. side effect 是什麼意思?
2. 是因為ref裡面是陣列所以不會被觸發嗎？如果是數字 就會被觸發嗎?
3. 「最頂層rective才有深層監聽 」這句是什麼意思 ？意思用 『 ref 』就沒有深層監聽嗎？
4. 想問剛剛最前面講的side effect 所以是watch變動 導致他接下來要做其他事 就是side effect嗎?

[yhosutun2490]

討論問題補充:

1. side Effect 副作用:
   https://hackmd.io/@ChrisW/rJT588049
   簡單來說一段函式有以下特徵~

• 修改外部的 state
• 發送 HTTP Request
• Rendering screen (資料變動更新)
• 使用會改變原陣列/物件的 JS method (eg. arr.splice)
• 修改任何外部變數
• DOM 操作
• Changing DB value
• logging & console

2. 是因為ref裡面是陣列所以不會被觸發嗎？如果是數字 就會被觸發嗎?
   Ans: 應該跟是不是數字(primitive type/object type)較無關係，watch sourece監聽來源主要有3種類型

• ref物件
• reactive 物件
• ()=> getter函式回傳值

因為原本ref陣列還是同樣來源，watch就監聽不到變化
`const number = ref([1,2,3,4])
function onClick() {
number.value.push = 5
}

watch(number,()=>{
console.log('watch 有變動')
})`

3. 「最頂層rective才有深層監聽 」這句是什麼意思 ？意思用 『 ref 』就沒有深層監聽嗎？
   Ans: Yes,因為Vue Watch 設計預設對reactive deep是true 所以會深層監聽，ref就沒有囉，需要多設定deep = true
   源碼段落:
   

4. 想問剛剛最前面講的side effect 所以是watch變動 導致他接下來要做其他事 就是side effect嗎?
   Ans: 不一定，但通常我們使用情境通常是，像是打api等非同步操作，或是更改其他響應式資料。

最後大家可以看看在Vue core 源碼watch api 中172行開始，watch怎麼設計的:
https://github.com/vuejs/core/blob/main/packages/runtime-core/src/apiWatch.ts#L221

• 會判斷watch 來源有3種，透過isRef()、isReactive()、isArray()、getter設定來追蹤。
• 這也解釋為何想監聽ref或reactive物件內部屬性時，需要用()=> getter來return，不然會失效。

歡迎大家實作玩玩看喔