Vue核心原理之數據的深度響應

1.問題的引入

• 為什么點擊下面的button界面會出現自增？

  <div id="example-2"> <simple-counter></simple-counter></div>Vue.component('simple-counter', { template: '<button v-on:click="counter += 1">{{ counter }} </button>', data: function () {return { counter: 0 } }}) new Vue({el: '#example-2'})
• 為什么數據發生變化之后，視圖就發生變化？
• 本文從三個方面來理解Vue處理深度響應的原理：
• 數據定義；
• 數據綁定；
• 數據響應；

2.數據的定義

• 組件中定義數據{counter:0}；
• 初始化過程中，會執行observe(data, this)；
• 在observe（）過程中會將data這個對象劫持，通過Object.defineProperty將data上所有的屬性綁定上getter和setter函數；（這是針對對象，對于數組，Vue通過改寫數組的原生方法來劫持）；
• 通俗的說就是只要誰獲取了counter的值就會觸發getter()；要是誰改變了counter的值就會觸發setter();比如上述代碼中的button綁定{{count}}的時候一定會觸發getter();如果是count的值發生改變就一定會觸發setter()

3.數據綁定

• 在頁面元素button中綁定{{count}};
• 在編譯過程中，針對這個button會產生一個Watcher(vm, exp, cb(newValue,oldValue)),vm是Vue對象，exp是數據綁定的數據;cb（）的邏輯是用來更新頁面。現在的問題是如何將數據的變化和Watcher關聯起來。

• 在這里用到了一個重要的思想就是發布訂閱模式；Watcher初始化的時候會將Dep.target設置為this,也就是Watcher自己，同時會觸發count的getter方法，getter里面會調用Dep的depend方法，depend方法會調用Watcher的addDep方法，addDep方法就是將Watcher自己存放在Dep的事件池里面。

  class Dep {constructor() {this.id = uid++;this.subs = [];}addSub(sub) {this.subs.push(sub)}depend() {if (Dep.target) {Dep.target.addDep(this)}}removeSub(sub) {let ind = this.subs.findIndex(sub);this.subs.splice(ind, 1)}notify() {this.subs.forEach(sub => sub.update())} } Dep.target = null;

4.數據響應

• 當發生點擊事件的時候，count的值改變，會觸發setter里面的方法，這個方法會調用dep.notify()；它會告知Dep的事件池里的存放的Watcher去執行它的update（）方法；Watcher的update()方法；這個方法里面會獲取count的新的值，給它的回調cb()，去更新視圖。
• 這三個過程就是下面Vue官方給出的示意圖的含義。

總結

以上是生活随笔為你收集整理的理解Vue深度响应原理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。