簡(jiǎn)單理解響應(yīng)式原理

Vue 最獨(dú)特的特性之一,是其非侵入性的響應(yīng)式系統(tǒng)。數(shù)據(jù)模型僅僅是普通的 JavaScript 對(duì)象禀横。而當(dāng)你修改它們時(shí),視圖會(huì)進(jìn)行更新粥血。這使得狀態(tài)管理非常簡(jiǎn)單直接柏锄,不過理解其工作原理同樣重要,這樣你可以避開一些常見的問題复亏。

如何追蹤變化

把一個(gè)普通的 JavaScript 對(duì)象傳入Vue實(shí)例作為 data 選項(xiàng)绢彤,Vue 將遍歷里面所有的屬性,并使用 Object.defineProperty 把這些屬性全部轉(zhuǎn)為 getter/setter蜓耻。Object.defineProperty 是 es5 中一個(gè)無(wú)法 shim(Object.defineProperty這個(gè)特性是無(wú)法使用低級(jí)瀏覽器中的方法來(lái)實(shí)現(xiàn)) 的特性,這也是 Vue 不支持 IE8 及更低版本瀏覽器的 原因械巡。

這些 getter/setter 對(duì)用戶來(lái)說(shuō)是不可見的刹淌,但是在內(nèi)部他們讓 Vue 能夠追蹤依賴饶氏, 在屬性被訪問和修改時(shí)通知變更。

每個(gè)組件實(shí)例都對(duì)應(yīng)一個(gè) watcher 實(shí)例有勾,它會(huì)在組件渲染的過程中把“接觸”過的數(shù)據(jù)屬性記錄為依賴疹启。之后當(dāng)依賴項(xiàng)的 setter 觸發(fā)時(shí),會(huì)通知 watcher蔼卡,從而使它關(guān)聯(lián)的組件重新渲染喊崖。

響應(yīng)示意圖

檢測(cè)變化的注意事項(xiàng)

受現(xiàn)代 JavaScript 的限制 (而且 Object.observe 也已經(jīng)被廢棄),Vue 無(wú)法檢測(cè)到對(duì)象屬性的添加或刪除雇逞。由于 Vue 會(huì)在初始化實(shí)例時(shí)對(duì)屬性執(zhí)行 getter/setter 轉(zhuǎn)化荤懂,所以屬性必須在 data 對(duì)象上存在才能讓 Vue 將它轉(zhuǎn)換為響應(yīng)式的。例如:

var vm = new Vue({
  data:{
    a:1
  }
})

// `vm.a` 是響應(yīng)式的

vm.b = 2
// `vm.b` 是非響應(yīng)式的

對(duì)于已經(jīng)創(chuàng)建的實(shí)例塘砸,Vue 不允許動(dòng)態(tài)添加根級(jí)別的響應(yīng)式屬性(實(shí)例的一級(jí)屬性节仿,data 中的屬性)。但是掉蔬,可以使用 Vue.set(object, propertyName, value) 方法向嵌套對(duì)象(對(duì)象里包含對(duì)象廊宪,如:數(shù)組中含有對(duì)象元素,對(duì)象中含有對(duì)象屬性)添加響應(yīng)式屬性女轿。例如箭启,對(duì)于:

Vue.set(vm.someObject, 'b', 2)

還可以使用 vm.$set 實(shí)例方法,這也是全局 Vue.set 方法的別名:

this.$set(this.someObject,'b',2)

補(bǔ)充:
Vue.set/this.$set 的應(yīng)用
當(dāng)vue的data里邊聲明或者已經(jīng)賦值過的對(duì)象或者數(shù)組(數(shù)組里邊的值是對(duì)象)時(shí)蛉迹,向?qū)ο笾刑砑有碌膶傩愿倒眩绻麓藢傩缘闹担遣粫?huì)更新視圖的婿禽。
對(duì)于已經(jīng)創(chuàng)建的實(shí)例赏僧,Vue 不允許動(dòng)態(tài)添加根級(jí)別的響應(yīng)式屬性,意味著如果在實(shí)例創(chuàng)建之后添加新的屬性到實(shí)例上扭倾,Vue 不能通過 getter/setter 進(jìn)行轉(zhuǎn)換淀零,它不會(huì)進(jìn)行響應(yīng)式處理觸發(fā)視圖更新。
如例:在實(shí)例中創(chuàng)建屬性 testObj

<template>
    <div>
        <p >{{testObj.a}}</p>
        <p @click="add(testObj)"> {{testObj.c}}</p>
    </div>
</template>

 <script>
export default {
    data() {
        return {
            testObj: {}
        }
    },
    mounted() {
        this.testObj = { a: 0, b: 1 };
        this.testObj.c = 2;
        console.log(this.testObj, this.testObj.a, this.testObj.b, this.testObj.c);
      },
      methods: {
        add(obj) {
          // obj.a = obj.a + 2;
          obj.c = obj.c + 4;
          console.log(this.testObj, this.testObj.a, this.testObj.b, this.testObj.c);
    },
}
 </script>

控制臺(tái)中打印結(jié)果:


可以看到屬性 a 和 b 具有 get膛壹、set 方法驾中,c 沒有。點(diǎn)擊c對(duì)應(yīng)的增值方法模聋,界面結(jié)果如下:


打印結(jié)果如下:


可以看到肩民,在方法中去直接修改 c 屬性,沒有更新視圖链方,但是值發(fā)生了變化持痰,當(dāng)把a(bǔ)dd方法里 obj.a = obj.a + 2;語(yǔ)句放開,視圖中 a祟蚀、c 都發(fā)生變化


打印出的 a工窍、c 值也發(fā)生變化:

這時(shí)候?qū)ounted方法里 this.testObj.c = 2; 改成 this.$set(this.testObj, "c", 2)割卖,打印出結(jié)果為:

這時(shí)候出現(xiàn)了 get/set,可以直接修改 c 屬性觸發(fā)視圖變化。
當(dāng)需要新增對(duì)象內(nèi)的響應(yīng)式屬性時(shí)患雏,可以不關(guān)心其他原有屬性鹏溯。

數(shù)組相關(guān)的參考文檔:(https://cn.vuejs.org/v2/guide/list.html#注意事項(xiàng))

有時(shí)你可能需要為已有對(duì)象賦值多個(gè)新屬性,比如使用 Object.assign()_.extend()淹仑。 但是丙挽,這樣添加到對(duì)象上的新屬性不會(huì)觸發(fā)更新。在這種情況下匀借,你應(yīng)該用原對(duì)象與要混合進(jìn)去的對(duì)象的屬性一起創(chuàng)建一個(gè)新的對(duì)象颜阐。

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

聲明響應(yīng)式屬性

由于 Vue 不允許動(dòng)態(tài)添加根級(jí)響應(yīng)式屬性,所以你必須在初始化實(shí)例前聲明所有根級(jí)響應(yīng)式屬性怀吻,哪怕只是一個(gè)空值:

var vm = new Vue({
  data: {
    // 聲明 message 為一個(gè)空值字符串
    message: ''
  },
  template: '<div>{{ message }}</div>'
})
// 之后設(shè)置 `message`
vm.message = 'Hello!'

如果未在 data 選項(xiàng)中聲明 message瞬浓,Vue 將警告你渲染函數(shù)正在試圖訪問不存在的屬性。

這樣的限制在背后是有其技術(shù)原因的蓬坡,它消除了在依賴項(xiàng)跟蹤系統(tǒng)中的一類邊界情況猿棉,也使 Vue 實(shí)例能更好地配合類型檢查系統(tǒng)工作。但與此同時(shí)在代碼可維護(hù)性方面也有一點(diǎn)重要的考慮:data 對(duì)象就像組件狀態(tài)的結(jié)構(gòu) (schema)屑咳。提前聲明所有的響應(yīng)式屬性萨赁,可以讓組件代碼在未來(lái)修改或給其他開發(fā)人員閱讀時(shí)更易于理解。

異步更新隊(duì)列

Vue 在更新 DOM 時(shí)是異步執(zhí)行的兆龙。只要偵聽到數(shù)據(jù)變化杖爽,Vue 將開啟一個(gè)隊(duì)列,并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)變更紫皇。如果同一個(gè) watcher 被多次觸發(fā)慰安,只會(huì)被推入到隊(duì)列中一次。這種在緩沖時(shí)去除重復(fù)數(shù)據(jù)對(duì)于避免不必要的計(jì)算和 DOM 操作是非常重要的聪铺。然后化焕,在下一個(gè)的事件循環(huán)“tick”中,Vue 刷新隊(duì)列并執(zhí)行實(shí)際 (已去重的) 工作铃剔。Vue 在內(nèi)部對(duì)異步隊(duì)列嘗試使用原生的 Promise.then撒桨、MutationObserversetImmediate,如果執(zhí)行環(huán)境不支持键兜,則會(huì)采用 setTimeout(fn, 0) 代替凤类。

例如,當(dāng)你設(shè)置 vm.someData = 'new value'普气,該組件不會(huì)立即重新渲染谜疤。當(dāng)刷新隊(duì)列時(shí),組件會(huì)在下一個(gè)事件循環(huán)“tick”中更新。多數(shù)情況我們不需要關(guān)心這個(gè)過程茎截,但是如果你想基于更新后的 DOM 狀態(tài)來(lái)做點(diǎn)什么苇侵,這就可能會(huì)有些棘手。雖然 Vue.js 通常鼓勵(lì)開發(fā)人員使用“數(shù)據(jù)驅(qū)動(dòng)”的方式思考企锌,避免直接接觸 DOM,但是有時(shí)我們必須要這么做于未。為了在數(shù)據(jù)變化之后等待 Vue 完成更新 DOM撕攒,可以在數(shù)據(jù)變化之后立即使用 Vue.nextTick(callback)。這樣回調(diào)函數(shù)將在 DOM 更新完成后被調(diào)用烘浦。例如:

<div id="example">{{message}}</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // 更改數(shù)據(jù)
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
  vm.$el.textContent === 'new message' // true
})

在組件內(nèi)使用 vm.$nextTick() 實(shí)例方法特別方便抖坪,因?yàn)樗恍枰?Vue,并且回調(diào)函數(shù)中的 this 將自動(dòng)綁定到當(dāng)前的 Vue 實(shí)例上:

Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function () {
    return {
      message: '未更新'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = '已更新'
      console.log(this.$el.textContent) // => '未更新'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => '已更新'
      })
    }
  }
})

因?yàn)?$nextTick() 返回一個(gè) Promise 對(duì)象闷叉,所以你可以使用新的 ES2016 async/await 語(yǔ)法完成相同的事情:

methods: {
  updateMessage: async function () {
    this.message = '已更新'
    console.log(this.$el.textContent) // => '未更新'
    await this.$nextTick()
    console.log(this.$el.textContent) // => '已更新'
  }
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末擦俐,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子握侧,更是在濱河造成了極大的恐慌蚯瞧,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,509評(píng)論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件品擎,死亡現(xiàn)場(chǎng)離奇詭異埋合,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)萄传,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門甚颂,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人秀菱,你說(shuō)我怎么就攤上這事振诬。” “怎么了衍菱?”我有些...
    開封第一講書人閱讀 163,875評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵赶么,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我梦碗,道長(zhǎng)禽绪,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,441評(píng)論 1 293
  • 正文 為了忘掉前任洪规,我火速辦了婚禮印屁,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘斩例。我一直安慰自己雄人,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,488評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著础钠,像睡著了一般恰力。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上旗吁,一...
    開封第一講書人閱讀 51,365評(píng)論 1 302
  • 那天踩萎,我揣著相機(jī)與錄音,去河邊找鬼很钓。 笑死香府,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的码倦。 我是一名探鬼主播企孩,決...
    沈念sama閱讀 40,190評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼袁稽!你這毒婦竟也來(lái)了勿璃?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,062評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤推汽,失蹤者是張志新(化名)和其女友劉穎补疑,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體民泵,經(jīng)...
    沈念sama閱讀 45,500評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡癣丧,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,706評(píng)論 3 335
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了栈妆。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片胁编。...
    茶點(diǎn)故事閱讀 39,834評(píng)論 1 347
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖鳞尔,靈堂內(nèi)的尸體忽然破棺而出嬉橙,到底是詐尸還是另有隱情,我是刑警寧澤寥假,帶...
    沈念sama閱讀 35,559評(píng)論 5 345
  • 正文 年R本政府宣布市框,位于F島的核電站,受9級(jí)特大地震影響糕韧,放射性物質(zhì)發(fā)生泄漏枫振。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,167評(píng)論 3 328
  • 文/蒙蒙 一萤彩、第九天 我趴在偏房一處隱蔽的房頂上張望粪滤。 院中可真熱鬧,春花似錦雀扶、人聲如沸杖小。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)予权。三九已至昂勉,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間扫腺,已是汗流浹背岗照。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留斧账,地道東北人谴返。 一個(gè)月前我還...
    沈念sama閱讀 47,958評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像咧织,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子籍救,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,779評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容