Vue數(shù)據(jù)驅(qū)動里的Watcher是什么意思，相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

專注于為中小企業(yè)提供網(wǎng)站建設(shè)、成都網(wǎng)站制作服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)雙陽免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了近千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

如果說Object.defineProperty是vue數(shù)據(jù)驅(qū)動的靈魂，那么Watcher則是他的骨骼。

簡述Watcher

簡化后Watcher在new時，最終會調(diào)用自己的get方法，get方法中第一個語句pushTarget(this)是開啟數(shù)據(jù)驅(qū)動的第一把鑰匙。

pushTarget將傳入的Watcher對象賦值給了Dep.target，還記得在講Object.defineProperty時提到了，Dep.target.update是更新view的觸發(fā)點，在這里終于找到了！

我們看到update方法最后執(zhí)行了queueWatcher，繼續(xù)看下去發(fā)現(xiàn)，這其實是一個更新隊列，vue對同一個微任務(wù)的所有update進行了收集更新，最終執(zhí)行了watcher.run，run方法又執(zhí)行了getAndInvoke方法，getAndInvoke又執(zhí)行了this.get方法。

到來一大圈，終于找到：在改變屬性值時，觸發(fā)了Dep.target所對應(yīng)的Watcher的this.get方法，this.get方法其實就是傳入進來的回調(diào)函數(shù)。回想前面介紹的，vue在掛載到真實dom時，newWatcher傳入的回調(diào)是updateComponent。串聯(lián)起來得到了結(jié)論：

我們在get屬性時，Dep派發(fā)器收集到了Watcher當(dāng)作依賴

當(dāng)我們set屬性時，Dep派發(fā)器事件分發(fā)，使所有收集到的依賴執(zhí)行this.get，這時候view會更新。

從宏觀角度看問題

當(dāng)我們newVue時，首先會將傳入的data將被vue包裝為觀察者，所有g(shù)et和set行為都會捕捉到并執(zhí)行響應(yīng)的操作

接下來vue會將vue對象掛載到真實dom（其實指的虛擬的渲染），這個時候new一個Watcher，在newWatcher時，會執(zhí)行一次this.get初始化一次值，對標(biāo)updateComponent函數(shù)，這個時候會觸發(fā)vue渲染過程

在vue渲染過程中，所有的數(shù)據(jù)都需要進行g(shù)et行為才能得到值并給真實dom賦值，因此這時觸發(fā)了所有data屬性的get，并且此時Dep.target是updateComponent的Watcher，因此所有的data屬性派發(fā)器都收集到了此Watcher，在set時，派發(fā)器notify進行事件分發(fā)，收集到的依賴Watcher都得到了通知進行update，所有又會執(zhí)行updateCompoent進行更新view。

看完上述內(nèi)容，你們掌握Vue數(shù)據(jù)驅(qū)動里的Watcher是什么意思的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

當(dāng)前名稱：Vue數(shù)據(jù)驅(qū)動里的Watcher是什么意思-創(chuàng)新互聯(lián)
文章來源：http://weahome.cn/article/dihghd.html