Vue數據驅動里的Watcher是什么意思

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

　　如果說Object.defineProperty是vue數據驅動的靈魂，那么Watcher則是他的骨骼。

簡述Watcher

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

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

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

　　到來一大圈，終于找到：在改變屬性值時，觸發了Dep.target所對應的Watcher的this.get方法，this.get方法其實就是傳入進來的回調函數。回想前面介紹的，vue在掛載到真實dom時，newWatcher傳入的回調是updateComponent。串聯起來得到了結論：

　　我們在get屬性時，Dep派發器收集到了Watcher當作依賴

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

　　從宏觀角度看問題

　　當我們newVue時，首先會將傳入的data將被vue包裝為觀察者，所有get和set行為都會捕捉到并執行響應的操作

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

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

看完上述內容，你們掌握Vue數據驅動里的Watcher是什么意思的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！