一、vue實現數據雙向綁定的主要是：

采用數據劫持結合發布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter、getter，在數據變動時發布消息給訂閱者，觸發相應監聽回調。

當創建Vue實例時，vue會遍歷data選項的屬性，利用Objet.defineProperty為屬性添加getter和setter對數據的讀取進行劫持（getter用來依賴收集，setter用來派發更新），并且在內部追蹤依賴，在屬性被訪問和修改時通知變化。

每個組件實例會有對應的watcher實例，在組件渲染的過程中記錄依賴的所有數據屬性（進行依賴收集，還有computed watcher，user watcher實例），之后依賴項被該改動時，setter方法會通知依賴與此data的watcher實例重新計算（派發更新），從而使它關聯的組件重新渲染。

二、單向數據綁定流和雙向數據綁定

1. 單向數據綁定：數據流是單向的。

優點：數據流動方向可以追蹤，流動單一，追查問題的時候可以更快捷。

缺點：寫起來不太方便。要使UI發生變更就必須創建各種action來維護對應的state

2.雙向數據綁定：數據之間是相通的，將數據變更的操作隱藏在框架內部。

優點：在表單交互較多的場景下，會簡化大量與業務無關的代碼。

缺點：無法追蹤局部狀態的變化，增加了出錯時debug的難度。

三、為什么在Vue3.0采用了Proxy,拋棄了Object.defineProperty

Object.defineProperty本身有一定的監控到數組下標變化的能力，但是在Vue中，從性能/體驗的性價比考慮，棄用了這個特性（Vue為什么不能檢測數組的變動）。為了解決這個問題，經過Vue內部處理后可以使用以下幾種方法來監聽數組

push()、pop()、shift()、unshift()、splice()、sort()、reverse()

由于只針對了以上7種方法進行了hack處理，所以其他數組的屬性也是檢測不到的，還是具有一定的局限性。

Object.defineProperty只能劫持對象的屬性，因此需要對每個對象的每個屬性進行遍歷。Vue 2.x是通過遞歸+遍歷data對象來實現對數據的監聽的，如果屬性值也是對象那么需要深度遍歷，顯然如果能劫持一個完整的對象才是更好的選擇。Proxy可以劫持整個對象，并返回一個新的對象。Proxy不僅可以代理對象，代理數組。還可以代理動態增加的屬性。

四、Proxy相較于Object.defineProperty的優勢

1.直接監聽對象而非屬性

2.直接監聽數組的變化

3.攔截方式較多

4.Proxy返回一個新對象，可以只操作新對象達到目的，而Object.defineProperty只能遍歷對象屬性直接修改（需要用深拷貝進行修改）

5.Proxy作為新標準將受到瀏覽器廠商重點持續的性能優化

6.Proxy不能用polyfill來兼容，polyfill主要撫平不同瀏覽器之間對js實現的差異。

五、

1.核心實現類：

1）Observer：它的作用是給對象的屬性添加getter和setter,用于以來收集和派發更新

2）Dep：用于收集當前響應式對象的依賴關系，每個響應式對象包括子對象都擁有一個Dep實例（里面subs是Watcher實例數組），當數據有變更時，會通過dep.notify()通知各個watcher。

3）Watcher：觀察者對象，實例分為渲染watcher（render watcher），計算屬性watcher（computed watcher），偵聽器watcher（user watcher）三種

2.Watcher和Dep的關系

watcher中實例化了dep并向dep.subs中添加了訂閱者，dep通過notify遍歷了dep.subs通知每個watcher更新。

3.依賴收集

1）initState時，對computed屬性初始化時，觸發computed watcher依賴收集

2）initState時，對偵聽屬性初始化時，觸發user watcher依賴收集

3）render()的過程，觸發render watcher依賴收集

4）re-render時，vm.render()再次執行，會移除所有subs中的watcher的訂閱，重新賦值。

4.派發更新

1）組建中對響應的數據進行了修改，觸發setter的邏輯

2）調用dep.notify()

3）遍歷所有的subs（Watcher實例），調用每一個watcher的update方法。

總結

以上是生活随笔為你收集整理的vue 实例化几种方式_Vue双向数据绑定的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。