怎樣理解Vue的數(shù)據(jù)驅(qū)動

這期內(nèi)容當中小編將會給大家?guī)碛嘘P(guān)怎樣理解Vue的數(shù)據(jù)驅(qū)動，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

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

使用vue

　　newVue進行創(chuàng)建vue對象，el屬性是掛載的dom選擇器，這里選擇id為app的dom，data對象保存這所有數(shù)據(jù)響應(yīng)的屬性，當其中的某一屬性值改變，就觸發(fā)view渲染，從而實現(xiàn)了“數(shù)據(jù)->視圖”的動態(tài)響應(yīng)；

　　示例中msg初始值為hello，因此頁面渲染時為hello，一秒之后，msg變?yōu)榱薶i，觸發(fā)了view渲染，我們看到hello變?yōu)榱薼i。

分析Object.defineProperty

　　我們說vue是怎么實現(xiàn)雙向數(shù)據(jù)綁定的？是Object.defineProperty實現(xiàn)了，那么我們就直接聚焦Object.defineProperty

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

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

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

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

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

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

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

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

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

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

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