怎樣理解Vue的數據驅動

這期內容當中小編將會給大家帶來有關怎樣理解Vue的數據驅動，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

　　vue是雙向數據綁定的框架，數據驅動是他的靈魂，他的實現原理眾所周知是Object.defineProperty方法實現的get、set重寫，但是這樣說太牽強外門了。

使用vue

　　newVue進行創建vue對象，el屬性是掛載的dom選擇器，這里選擇id為app的dom，data對象保存這所有數據響應的屬性，當其中的某一屬性值改變，就觸發view渲染，從而實現了“數據->視圖”的動態響應；

　　示例中msg初始值為hello，因此頁面渲染時為hello，一秒之后，msg變為了hi，觸發了view渲染，我們看到hello變為了li。

分析Object.defineProperty

　　我們說vue是怎么實現雙向數據綁定的？是Object.defineProperty實現了，那么我們就直接聚焦Object.defineProperty

　　vue在給每一個data的屬性執行defineReactive函數，來達到數據綁定的目的。從代碼中可以看到幾點：

　　每一個數據綁定，都會new一個Dep（暫且叫他派發器），派發器的功能是什么？依賴收集以事件分發；

　　在屬性get中，除了獲取當前屬性的值，還做了dep.depend()操作；

　　dep.depend的目的是什么？看Dep部分代碼，很簡單，其實就是依賴收集，將Dep.target需要收集的依賴進行添加到自己的派發器里

　　在屬性set時，就是給屬性改變值時，除了改變值意外，還執行了dep.notify()操作；

　　dep.notify的目的又是什么？看代碼，依舊很簡單，將自己派發器的所有依賴觸發update函數；

　　這一部分很容易了解，在data的屬性get時，觸發了派發器的依賴收集(dep.depend)，在data的屬性set時，觸發了派發器的事件通知(dep.notify)；

　　結合已知知識，Vue的數據綁定是上面這個函數帶來的副作用，因此可以得出結論：

　　當我們改變某個屬性值時，派發器Dep通知了view層去更新

　　Dep.target是派發器Dep收集的依賴，并在屬性值改變時觸發了update函數，view層的更新與Dep.target有必然的聯系。換句話說：數據->視圖的數據驅動就等于Dep.target.update()。

上述就是小編為大家分享的怎樣理解Vue的數據驅動了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。