會返回一個 Boolean 值，用于判斷屬性是否設置成功。

完事后將 handler 導出，然后在 reactive 中引入即可。

測試幾組對象貌似沒啥問題，其實是有一個坑，這個坑也跟數組有關。

如上例子，如果我們選擇代理數組，在 setHandler 中打印其 key 和 value 的話會得到 3 4 ， length 4 這兩組值：

如果不作處理，那么會導致如果更新視圖的話，則會觸發兩次，這肯定是不允許的，因此，我們需要將區分新增和修改這兩種操作。

Vue3 中是通過判斷 target 是否存在該屬性來區分是新增還是修改操作，需要借助一個工具方法 —— hasOwnProperty 。

這里我們將上述的 createSetter 方法修改如下：

如此一來，我們調 push 方法的時候，就只會觸發一次更新了，非常巧妙的避免了無意義的更新操作。

effect.js

光上述構造響應式對象并不能完成響應式的操作，我們還需要一個非常重要的方法 effect ，它會在初始化執行的時候存儲跟其有關的數據依賴，當依賴數據發生變化的時候，則會再次觸發 effect 傳遞的函數。

其基本雛形如下，入參是一個函數，還有個可選參數 options 方便后面計算屬性等使用，暫時不考慮：

createReactiveEffect 就是為了將 fn 變成響應式函數，監控數據變化，執行 fn 函數，因此該函數是一個高階函數。

createReactiveEffect 將原來的 fn 轉變成一個 reactvieEffect ， 并將當前的 effect 掛到全局的 activeEffect 上，目的是為了一會與當前所依賴的屬性做好對應關系。

我們必須要將依賴屬性構造成 { prop : [effect,effect] } 這種結構，才能保證依賴屬性變化的時候，依次去觸發與之相關的 effect ，因此，需要在 get 屬性的時候，做屬性的依賴收集，將屬性與 effect 關聯起來。

依賴收集 —— track

在獲取對象的屬性時，會觸發 getHandler ，再次做屬性的依賴收集，即 Vue2 中的發布訂閱。

在 setHandler 中獲取屬性的時候，做一次 track(target, key) 操作。

整個 track 的數據結構大概是這樣

目的就是將 target ， key ， effect 之間做好對應的關系映射。

打印 targetMap 的結構如下：

**觸發更新 —— trigger

**

上述已經完成了依賴收集，剩下就是監控數據變化，觸發更新操作，即在 setHandler 中添加 trigger 觸發操作。

這樣一來，獲取數據的時候通過 track 進行依賴收集，更新數據的時候再通過 trigger 進行更新，就完成了整個數據的響應式操作。

再回頭看看我們先前提到的例子：

控制臺會依次打印 Hello ***** effect ***** 以及 World ***** effect ***** ， 分別是首次渲染觸發跟更新數據重渲染觸發，至此功能實現！

整體來說， Vue3 相比于 Vue2 在很多方面都做了調整，數據的響應式只是冰山一角，但是可以看出尤大團隊非常巧妙的利用了 Proxy 的特點以及 es6 的數據結構和方法。另外， Composition API 的模式跟 React 在某些程度上有異曲同工之妙，這種設計模式讓我們在實際開發使用中更加的方法快捷，值得我們去學習，加油！

最后附上倉庫地址 github ，歡迎各位大佬批評斧正~