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

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

比如想要讓某個值的改變不改變原有值

使用 Object.freeze()，這會阻止修改現(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` 不會更新！ -->
? <button v-on:click="foo = 'baz'">Change it</button>
</div>

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

v-once

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

<span v-once>這個將不會改變: {{ msg }}</span>

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

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

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

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

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

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

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

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

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

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

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

收集依賴的過程：

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

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

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

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

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

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

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

最新評論