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

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

成都創(chuàng)新互聯(lián)公司憑借專業(yè)的設(shè)計(jì)團(tuán)隊(duì)扎實(shí)的技術(shù)支持、優(yōu)質(zhì)高效的服務(wù)意識(shí)和豐厚的資源優(yōu)勢，提供專業(yè)的網(wǎng)站策劃、成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、網(wǎng)站優(yōu)化、軟件開發(fā)、網(wǎng)站改版等服務(wù)，在成都10年的網(wǎng)站建設(shè)設(shè)計(jì)經(jīng)驗(yàn)，為成都近1000家中小型企業(yè)策劃設(shè)計(jì)了網(wǎng)站。

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

使用vue

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

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

分析Object.defineProperty

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

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

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

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

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

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

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

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

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

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

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

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

名稱欄目：怎樣理解Vue的數(shù)據(jù)驅(qū)動(dòng)
轉(zhuǎn)載源于：http://muchs.cn/article34/picipe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、服務(wù)器托管、建站公司、用戶體驗(yàn)、網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)