Vue 3.0 reactive, effect 到底做了什麼事 相信 vue-next (vue 3.0) 出來之後大家對 source code 都非常好奇，且 vue 3.0 也改為 Composition API，當然大家最好奇的應該還是 Vue 3.0 到底對於 Proxy API 用到了怎樣的境界，所以本篇主軸會在於 vue 3.0 reative 到底做了什麼事情 凡事先看 test case 由於 vue 3.0 更換成了 Composition API ，強烈建議先看完 Composition API 再來往下探討 以下圖 unit testing 的程式碼來說，可以看到 他將 { num: 0 } 設為 reactive，並且只要設定 num 的值，第四行的 () => (dummy = counter.num) 就會被 call。 it ( 'should observe basic properties' , ( ) => { let dummy const counter = reactive ( { num : 0 } ) effect ( ( ) => ( dummy = counter . num ) ) expect ( dummy ) . toBe ( 0 ) counter . num = 7 expect ( dummy ) . toBe ( 7 ) } ) reactive 實作 可以得知 reactive 這個 function 會回傳一個 reactive object， export function reactive ( target : object ) { // if trying to observe a readonly proxy, return the readonly version. if ( readonlyToRaw . has ( target ) ) { return targ...