Vue如何關(guān)掉響應(yīng)式

大家都知道Vue有雙向數(shù)據(jù)綁定 ，但是很少人知道怎樣把它這個(gè)功能關(guān)掉

比如想要讓某個(gè)值的改變不改變?cè)兄?/p>

使用 Object.freeze()，這會(huì)阻止修改現(xiàn)有的 property，也意味著響應(yīng)系統(tǒng)無法再追蹤變化。

例子

var obj = {
? foo: 'bar'
}

Object.freeze(obj)

new Vue({
? el: '#app',
? data: obj
})

<div id="app">
? <p>{{ foo }}</p>
? <!-- 這里的 `foo` 不會(huì)更新！ -->
? <button v-on:click="foo = 'baz'">Change it</button>
</div>

額外 Vue 也為大家提供了一個(gè) 只能修改數(shù)據(jù)一次的方法

v-once

通過使用 v-once 指令，你也能執(zhí)行一次性地插值，當(dāng)數(shù)據(jù)改變時(shí)，插值處的內(nèi)容不會(huì)更新。但請(qǐng)留心這會(huì)影響到該節(jié)點(diǎn)上的其它數(shù)據(jù)綁定：

<span v-once>這個(gè)將不會(huì)改變: {{ msg }}</span>

Vue響應(yīng)式的處理過程

響應(yīng)式是從vue實(shí)例的init方法開始的。

在Init方法中先調(diào)用initState()初始化vue實(shí)例的狀態(tài)，在這個(gè)方法中調(diào)用了initData(),initData()是把我們的data屬性注入到vue實(shí)例上，并且調(diào)用observe()把data對(duì)象轉(zhuǎn)換成響應(yīng)式對(duì)象。于是observe()就是我們響應(yīng)式的入口。

observe()做了什么事情：observe接收一個(gè)參數(shù)value,這個(gè)參數(shù)value就是我們響應(yīng)式要處理的對(duì)象。

那么在創(chuàng)建observe對(duì)象時(shí)做了什么事：來看他的構(gòu)造函數(shù)

數(shù)組的響應(yīng)式處理：其實(shí)就是設(shè)置數(shù)組的那幾個(gè)特殊方法，比如push,pop,sort等等，這些方法會(huì)改變?cè)瓟?shù)組，所以當(dāng)這些方法被調(diào)用的時(shí)候，我們要去發(fā)送通知。發(fā)送通知的時(shí)候是找到數(shù)組對(duì)象對(duì)應(yīng)的ob,也就是observe對(duì)象,在找到這個(gè)observe中的dep，調(diào)用dep的notify方法。更改完數(shù)組的特殊方法之后，遍歷數(shù)組的每一個(gè)成員，對(duì)每一個(gè)成員再去調(diào)用observe，如果這個(gè)成員是對(duì)象的話，也會(huì)把這個(gè)對(duì)象轉(zhuǎn)換成響應(yīng)式對(duì)象。

對(duì)象的響應(yīng)式處理：如果當(dāng)前的value是對(duì)象的話，此時(shí)會(huì)調(diào)用walk()方法。Walk方法里面會(huì)遍歷這個(gè)對(duì)象的所有屬性，對(duì)每一個(gè)屬性調(diào)用defineReactive()。

在defineReactive中，會(huì)為每一個(gè)屬性創(chuàng)建dep對(duì)象，讓dep去收集依賴。如果當(dāng)前屬性的值是對(duì)象，則會(huì)調(diào)用observe，把這個(gè)對(duì)象也轉(zhuǎn)換成響應(yīng)式對(duì)象。

在defineReactive里最核心的事情就是定義getter和setter。

在getter中去收集依賴，收集依賴時(shí)要為每一個(gè)屬性收集依賴，如果這個(gè)屬性的值是對(duì)象，他也要為這個(gè)子對(duì)象收集依賴，在getter中最終返回這個(gè)屬性的值。

在setter中首先要把新的值保存下來，如果新的值是對(duì)象，就調(diào)用observe，把我們新設(shè)置的值也轉(zhuǎn)換成響應(yīng)式對(duì)象。在setter中，數(shù)據(jù)發(fā)生了變化，所以要發(fā)送通知，其實(shí)就是調(diào)用dep.notify()。

收集依賴的過程：

在收集依賴時(shí)，首先要調(diào)用watcher對(duì)象的get方法，在get方法中調(diào)用pushTarget，在pushTarget中會(huì)把當(dāng)前的watcher對(duì)象記錄到Dep.target屬性中。

在訪問data中成員的時(shí)候去收集依賴，當(dāng)我們?cè)L問這個(gè)屬性的值的時(shí)候，就會(huì)去觸發(fā)defineReactive中的getter，在getter中去收集依賴。他會(huì)把我們屬性對(duì)應(yīng)的watcher對(duì)象添加到dep的subs數(shù)組中，也就是為屬性收集依賴。如果這個(gè)屬性的值也是對(duì)象，此時(shí)要?jiǎng)?chuàng)建一個(gè)childOb對(duì)象，要為我們這個(gè)子對(duì)象收集依賴。目的是將來子對(duì)象發(fā)生變化時(shí)可以發(fā)送通知。（其實(shí)數(shù)組中內(nèi)容發(fā)生變化時(shí)，就用到了這個(gè)childOb）。

Wacher：當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，會(huì)調(diào)用dep.notify()發(fā)送通知，他會(huì)調(diào)用wacher的update方法，在wacher的update方法中，會(huì)去調(diào)用queueWatcher函數(shù)去判斷wacher是否被處理了，如果這個(gè)wacher對(duì)象沒有被處理，則會(huì)被添加到queue隊(duì)列中，并且調(diào)用flushSchedulerQueue去刷新任務(wù)隊(duì)列。

在flushSchedulerQueue函數(shù)中會(huì)觸發(fā)beforeUpdate鉤子函數(shù)，然后調(diào)用wacher.run()方法，在wacher.run方法中去調(diào)用wacher的get方法去調(diào)用getter方法，而getter中存儲(chǔ)的其實(shí)就是updateComponent（此處針對(duì)渲染wacher來說的）。在wacher.run運(yùn)行完成后就已經(jīng)將數(shù)據(jù)更新到了視圖上，我們就可以再頁面上看見變化了，剩下一些清理工作。

他會(huì)去清空我們上一次的依賴，重置wacher中的狀態(tài)，接下來去觸發(fā)actived鉤子函數(shù)，最后觸發(fā)updated鉤子函數(shù)。

這就是整個(gè)響應(yīng)式的處理過程。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論