Vue核心原理之?dāng)?shù)據(jù)的深度響應(yīng)

1.問題的引入

• 為什么點(diǎn)擊下面的button界面會(huì)出現(xiàn)自增？

  <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'})
• 為什么數(shù)據(jù)發(fā)生變化之后，視圖就發(fā)生變化？
• 本文從三個(gè)方面來理解Vue處理深度響應(yīng)的原理：
• 數(shù)據(jù)定義；
• 數(shù)據(jù)綁定；
• 數(shù)據(jù)響應(yīng)；

2.數(shù)據(jù)的定義

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

3.數(shù)據(jù)綁定

• 在頁(yè)面元素button中綁定{{count}};
• 在編譯過程中，針對(duì)這個(gè)button會(huì)產(chǎn)生一個(gè)Watcher(vm, exp, cb(newValue,oldValue)),vm是Vue對(duì)象，exp是數(shù)據(jù)綁定的數(shù)據(jù);cb（）的邏輯是用來更新頁(yè)面。現(xiàn)在的問題是如何將數(shù)據(jù)的變化和Watcher關(guān)聯(lián)起來。

• 在這里用到了一個(gè)重要的思想就是發(fā)布訂閱模式；Watcher初始化的時(shí)候會(huì)將Dep.target設(shè)置為this,也就是Watcher自己，同時(shí)會(huì)觸發(fā)count的getter方法，getter里面會(huì)調(diào)用Dep的depend方法，depend方法會(huì)調(diào)用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.數(shù)據(jù)響應(yīng)

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。