Vue源碼解析之?dāng)?shù)據(jù)響應(yīng)系統(tǒng)的使用
接下來重點來看Vue的數(shù)據(jù)響應(yīng)系統(tǒng)。我看很多文章在講數(shù)據(jù)響應(yīng)的時候先用一個簡單的例子介紹了數(shù)據(jù)雙向綁定的思路，然后再看源碼。這里也借鑒了這種方式，感覺這樣的確更有利于理解。
數(shù)據(jù)雙向綁定的思路
1. 對象
先來看元素是對象的情況。假設(shè)我們有一個對象和一個監(jiān)測方法：
const data = {
a: 1
};
/**
* exp[String, Function]: 被觀測的字段
* fn[Function]: 被觀測對象改變后執(zhí)行的方法
*/
function watch (exp, fn) {
}
我們可以調(diào)用watch方法，當(dāng)a的值改變后打印一句話：
watch('a', () => {
console.log('a 改變了')
})
要實現(xiàn)這個功能，我們首先要能知道屬性a被修改了。這時候就需要使用Object.defineProperty函數(shù)把屬性a變成訪問器屬性：
Object.defineProperty(data, 'a', {
set () {
console.log('設(shè)置了 a')
},
get () {
console.log('讀取了 a')
}
})
這樣當(dāng)我們修改a的值：data.a = 2時，就會打印出設(shè)置了 a, 當(dāng)我們獲取a的值時：data.a, 就會打印出讀取了 a.
在屬性的讀取和設(shè)置中我們已經(jīng)能夠進行攔截并做一些操作了。可是在屬性修改時我們并不想總打印設(shè)置了 a這句話，而是有一個監(jiān)聽方法watch，不同的屬性有不同的操作，對同一個屬性也可能監(jiān)聽多次。
這就需要一個容器，把對同一個屬性的監(jiān)聽依賴收集起來，在屬性改變時再取出依次觸發(fā)。既然是在屬性改變時觸發(fā)依賴，我們就可以放在setter里面，在getter中收集依賴。這里我們先不考慮依賴被重復(fù)收集等一些情況
const dep = [];
Object.defineProperty(data, 'a', {
set () {
dep.forEach(fn => fn());
},
get () {
dep.push(fn);
}
})
我們定義了容器dep, 在讀取a屬性時觸發(fā)get函數(shù)把依賴存入dep中；在設(shè)置a屬性時觸發(fā)set函數(shù)把容器內(nèi)的依賴挨個執(zhí)行。
那fn從何而來呢？再看一些我們的監(jiān)測函數(shù)watch
watch('a', () => {
console.log('a 改變了')
})
該函數(shù)有兩個參數(shù)，第一個是被觀測的字段，第二個是被觀測字段的值改變后需要觸發(fā)的操作。其實第二個參數(shù)就是我們要收集的依賴fn。
const data = {
a: 1
};
const dep = [];
Object.defineProperty(data, 'a', {
set () {
dep.forEach(fn => fn());
},
get () {
// Target就是該變量的依賴函數(shù)
dep.push(Target);
}
})
let Target = null;
function watch (exp, fn) {
// 將fn賦值給Target
Target = fn;
// 讀取屬性，觸發(fā)get函數(shù)，收集依賴
data[exp];
}
現(xiàn)在僅能夠觀測a一個屬性，為了能夠觀測對象data上面的所有屬性，我們將定義訪問器屬性的那段代碼封裝一下：
function walk () {
for (let key in data) {
const dep = [];
const val = data[key];
Object.defineProperty(data, key, {
set (newVal) {
if (newVal === val) return;
val = newVal;
dep.forEach(fn => fn());
},
get () {
// Target就是該變量的依賴函數(shù)
dep.push(Target);
return val;
}
})
}
}
用for循環(huán)遍歷data上的所有屬性，對每一個屬性都用Object.defineProperty改為訪問器屬性。
現(xiàn)在監(jiān)測data里面基本類型值的屬性沒問題了，如果data的屬性值又是一個對象呢：
data: {
a: {
aa: 1
}
}
我們再來改一下我們的walk函數(shù)，當(dāng)val還是一個對象時，遞歸調(diào)用walk:
function walk (data) {
for (let key in data) {
const dep = [];
const val = data[key];
// 如果val是對象，遞歸調(diào)用walk，將其屬性轉(zhuǎn)為訪問器屬性
if (Object.prototype.toString.call(val) === '[object Object]') {
walk(val);
}
Object.defineProperty(data, key, {
set (newVal) {
if (newVal === val) return;
val = newVal;
dep.forEach(fn => fn());
},
get () {
// Target就是該變量的依賴函數(shù)
dep.push(Target);
return val;
}
})
}
}
添加了一段判斷邏輯，如果某個屬性的屬性值仍然是對象，就遞歸調(diào)用walk函數(shù)。
雖然經(jīng)過上面的改造，data.a.aa是訪問器屬性了，但下面但代碼仍然不能運行：
watch('a.aa', () => {
console.log('修改了 a.b')
})
這是為什么呢？再看我們的watch函數(shù)：
function watch (exp, fn) {
// 將fn賦值給Target
Target = fn;
// 讀取屬性，觸發(fā)get函數(shù)，收集依賴
data[exp];
}
在讀取屬性的時候是data[exp]，放到這里就是data[a.aa]，這自然是不對的。正確的讀取方式應(yīng)該是data[a][aa]. 我們需要對watch函數(shù)做改造：
function watch (exp, fn) {
// 將fn賦值給Target
Target = fn;
let obj = data;
if (/\./.test(exp)) {
const path = exp.split('.');
path.forEach(p => obj = obj[p])
return;
}
data[exp];
}
這里增加了一個判斷邏輯，當(dāng)監(jiān)測的字段中包含.時，就執(zhí)行if語句塊的內(nèi)容。首先使用split函數(shù)將字符串轉(zhuǎn)換為數(shù)組：a.aa => [a, aa]. 然后使用循環(huán)讀取到嵌套的屬性值，并且return結(jié)束。
Vue中提供了$watch實例方法來觀測表達式，對復(fù)雜的表達式用函數(shù)取代：
// 函數(shù)
vm.$watch(
function () {
// 表達式 `this.a + this.b` 每次得出一個不同的結(jié)果時
// 處理函數(shù)都會被調(diào)用。
// 這就像監(jiān)聽一個未被定義的計算屬性
return this.a + this.b
},
function (newVal, oldVal) {
// 做點什么
}
)
當(dāng)?shù)谝粋€函數(shù)執(zhí)行時，就會觸發(fā)this.a、this.b的get攔截器，從而收集依賴。
我們的watch函數(shù)第一個參數(shù)是函數(shù)時watch函數(shù)要做些什么改變呢？要想能夠收集依賴，就得讀取屬性觸發(fā)get函數(shù)。當(dāng)?shù)谝粋€參數(shù)是函數(shù)時怎么讀取屬性呢？函數(shù)內(nèi)是有讀取屬性的，所以只要執(zhí)行一下函數(shù)就行了。
function watch (exp, fn) {
// 將fn賦值給Target
Target = fn;
// 如果 exp 是函數(shù)，直接執(zhí)行該函數(shù)
if (typeof exp === 'function') {
exp()
return
}
let obj = data;
if (/\./.test(exp)) {
const path = exp.split('.');
path.forEach(p => obj = obj[p])
return;
}
data[exp];
}
對象的處理暫且就到這里，具體的我們在源碼中去看。
2. 數(shù)組
數(shù)組有幾個變異方法會改變數(shù)組本身：push pop shift unshift splice sort reverse, 那怎么才能知道何時調(diào)用了這些變異方法呢？我們可以在保證原來方法功能不變的前提下對方法進行擴展。可是如何擴展呢？
數(shù)組實例的方法都來自于數(shù)組構(gòu)造函數(shù)的原型, 數(shù)組實例的__proto__屬性指向數(shù)組構(gòu)造函數(shù)的原型，即：arr.__proto__ === Array.prototype, 我們可以定義一個對象，它的原型指向Array.prototype，然后在這個對象中重新定義與變異方法重名的函數(shù)，然后讓實例的__proto__指向該對象，這樣調(diào)用變異方法的時候，就會先調(diào)用重定義的方法。
const mutationMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'];
// 創(chuàng)建以Array.prototype為原型的對象
const arrayMethods = Object.create(Array.prototype);
// 緩存Array.prototype
const originMethods = Array.prototype;
mutationMethods.forEach(method => {
arrayMethods[method] = function (...args) {
// 調(diào)用原來的方法獲取結(jié)果
const result = originMethods[method].apply(this, args);
console.log(`重定義了${method}方法`)
return result;
}
})
我們來測試一下：
const arr = []; arr.__proto__ = arrayMethods; arr.push(1);
可以看到在控制臺打印出了重定義了push方法這句話。
先大概有個印象，接下來我們來看源碼吧。
實例對象代理訪問data
在initState方法中，有這樣一段代碼：
const opts = vm.$options
...
if (opts.data) {
initData(vm)
} else {
observe(vm._data = {}, true /* asRootData */)
}
opts就是vm.$options，如果opts.data存在，就執(zhí)行initData方法，否則執(zhí)行observe方法，并給vm._data賦值空對象。我們就從initData方法開始，開啟探索數(shù)據(jù)響應(yīng)系統(tǒng)之路。
initData方法定義在core/instance/state.js文件中：
function initData (vm: Component) {
let data = vm.$options.data
data = vm._data = typeof data === 'function'
? getData(data, vm)
: data || {}
if (!isPlainObject(data)) {
data = {}
process.env.NODE_ENV !== 'production' && warn(
'data functions should return an object:\n' +
'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
vm
)
}
// proxy data on instance
const keys = Object.keys(data)
const props = vm.$options.props
const methods = vm.$options.methods
let i = keys.length
while (i--) {
const key = keys[i]
if (process.env.NODE_ENV !== 'production') {
if (methods && hasOwn(methods, key)) {
warn(
`Method "${key}" has already been defined as a data property.`,
vm
)
}
}
if (props && hasOwn(props, key)) {
process.env.NODE_ENV !== 'production' && warn(
`The data property "${key}" is already declared as a prop. ` +
`Use prop default value instead.`,
vm
)
} else if (!isReserved(key)) {
proxy(vm, `_data`, key)
}
}
// observe data
observe(data, true /* asRootData */)
}
內(nèi)容有點多我們從上往下依次來看，首先是這樣一段代碼：
let data = vm.$options.data
data = vm._data = typeof data === 'function'
? getData(data, vm)
: data || {}
我們知道在經(jīng)過選項合并后，data已經(jīng)變成一個函數(shù)了。那為何這里還有data是否是一個函數(shù)的判斷呢？這是因為beforeCreate生命周期是在mergeOptions函數(shù)之后initState函數(shù)之前調(diào)用的，mergeOptions函數(shù)就是處理選項合并的。如果用戶在beforeCreate中修改了vm.$options.data的值呢？那它就可能不是一個函數(shù)了，畢竟用戶的操作是不可控的，所以這里還是有必要判斷一下的。
正常情況下也就是data是一個函數(shù)，就會調(diào)用getData函數(shù)，并將data和Vue實例vm作為參數(shù)傳過去。該函數(shù)也定義在當(dāng)前頁面中：
export function getData (data: Function, vm: Component): any {
// #7573 disable dep collection when invoking data getters
pushTarget()
try {
return data.call(vm, vm)
} catch (e) {
handleError(e, vm, `data()`)
return {}
} finally {
popTarget()
}
}
其實該函數(shù)就是通過調(diào)用data獲取到數(shù)據(jù)對象并返回：data.call(vm, vm). 用try...catch包裹是為了捕獲可能出現(xiàn)的錯誤，如果出錯的話調(diào)用handleError函數(shù)并返回一個空對象。
函數(shù)的開頭和結(jié)尾分別調(diào)用了pushTarget和popTarget, 這是為了防止使用 props 數(shù)據(jù)初始化 data 數(shù)據(jù)時收集冗余的依賴。
再回到initData函數(shù)中，所以現(xiàn)在data和vm._data就是最終的數(shù)據(jù)對象了。
接下來是一個if判斷：
if (!isPlainObject(data)) {
data = {}
process.env.NODE_ENV !== 'production' && warn(
'data functions should return an object:\n' +
'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
vm
)
}
isPlainObject是判斷是否是一個純對象的，如果data不是一個對象，在非生產(chǎn)環(huán)境下給出警告信息。
繼續(xù)往下看：
// proxy data on instance
// 獲取data對象的鍵
const keys = Object.keys(data)
// 獲取props，是個對象
const props = vm.$options.props
// 獲取methods，是個對象
const methods = vm.$options.methods
let i = keys.length
// 循環(huán)遍歷data的鍵
while (i--) {
const key = keys[i]
// 如果methods存在，并且methods中存在與data對象相同的鍵，發(fā)出警告。data優(yōu)先
if (process.env.NODE_ENV !== 'production') {
if (methods && hasOwn(methods, key)) {
warn(
`Method "${key}" has already been defined as a data property.`,
vm
)
}
}
// 如果props存在，并且props中存在與data對象相同的鍵，發(fā)出警告。 props優(yōu)先
if (props && hasOwn(props, key)) {
process.env.NODE_ENV !== 'production' && warn(
`The data property "${key}" is already declared as a prop. ` +
`Use prop default value instead.`,
vm
)
} else if (!isReserved(key)) { // isReserved 函數(shù)用來檢測一個字符串是否以 $ 或者 _ 開頭，主要用來判斷一個字段的鍵名是否是保留的
proxy(vm, `_data`, key)
}
}
// observe data
observe(data, true /* asRootData */)
while中的兩個if條件判斷了props和methods中是否有和data對象相同的鍵，因為這三者中的屬性都可以通過實例對象代理訪問，如果相同就會出現(xiàn)沖突了。
const vm = new Vue({
props: { a: { default: 2 } }
data: { a: 1 },
methods: {
a () {
console.log(3)
}
}
})
當(dāng)調(diào)用vm.a的時候，就會產(chǎn)生覆蓋現(xiàn)象。為了防止這種情況出現(xiàn)，就在這里做了判斷。
再看else if中的內(nèi)容，當(dāng)!isReserved(key)成立時，執(zhí)行proxy(vm,_data, key)。 isReserved函數(shù)的作用是判斷一個字符串是否以 $ 或者 _ 開頭, 因為Vue內(nèi)部的變量是以$或_開頭，防止沖突。如果 key 不是以 $或 _ 開頭，那么將執(zhí)行 proxy 函數(shù)
const sharedPropertyDefinition = {
enumerable: true,
configurable: true,
get: noop,
set: noop
}
export function proxy (target: Object, sourceKey: string, key: string) {
sharedPropertyDefinition.get = function proxyGetter () {
return this[sourceKey][key]
}
sharedPropertyDefinition.set = function proxySetter (val) {
this[sourceKey][key] = val
}
Object.defineProperty(target, key, sharedPropertyDefinition)
}
proxy函數(shù)通過Object.defineProperty在實例對象vm上定義了與data數(shù)據(jù)字段相同的訪問器屬性，代理的值是vm._data上對應(yīng)的屬性值。當(dāng)訪問this.a時，實際訪問的是this._data.a的值。
最后一句代碼是
// observe data observe(data, true /* asRootData */)
調(diào)用observe將data數(shù)據(jù)對象轉(zhuǎn)換成響應(yīng)式的。
observe工廠函數(shù)
observe函數(shù)定義在core/observer/index.js文件中, 我們找到該函數(shù)的定義，一點點來看
if (!isObject(value) || value instanceof VNode) {
return
}
首先判斷如果數(shù)據(jù)不是一個對象或者是一個VNode實例，直接返回。
let ob: Observer | void
接著定義了ob變量，它是一個Observer實例，可以看到observe函數(shù)的最后返回了ob.
下面是一個if...else分支：
if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
ob = value.__ob__
} else if (
shouldObserve &&
!isServerRendering() &&
(Array.isArray(value) || isPlainObject(value)) &&
Object.isExtensible(value) &&
!value._isVue
) {
ob = new Observer(value)
}
首先是if分支，用hasOwn判斷了數(shù)據(jù)對象是否包含__ob__屬性，并且判斷屬性值是否是Observer的實例。如果條件為真的話，就把value.__ob__的值賦給ob。
為什么會有這個判斷呢？每個數(shù)據(jù)對象被觀測后都會在該對象上定義一個__ob__屬性, 所以這個判斷是為了防止重復(fù)觀測一個對象。
接著是else if分支，這個條件判斷有點多，我們一個個來看。
shouldObserve必須為true
該變量也定義在 core/observer/index.js 文件內(nèi),
/**
* In some cases we may want to disable observation inside a component's
* update computation.
*/
export let shouldObserve: boolean = true
export function toggleObserving (value: boolean) {
shouldObserve = value
}
這段代碼定義了shouldObserve變量，初始化為true。接著定義了toggleObserving函數(shù)，該函數(shù)接收一個參數(shù)，這個參數(shù)用來更新shouldObserve的值。shouldObserve為true時可以進行觀測，為false時將不會進行觀測。
!isServerRendering()必須為true
isServerRendering函數(shù)用來判斷是否是服務(wù)端渲染，只有當(dāng)不是服務(wù)端渲染的時候才會進行觀測
(Array.isArray(value) || isPlainObject(value)) 必須為真
只有當(dāng)數(shù)據(jù)對象是數(shù)組或者純對象時才進行觀測
Object.isExtensible(value)必須為true
被觀測的數(shù)據(jù)對象必須是可擴展的, 普通對象默認(rèn)就是可擴展當(dāng)。以下三個方法可以將對象變得不可擴展：
Object.preventExtensions()、 Object.freeze()、Object.seal()
!value._isVue必須為真
Vue實例含有_isVue屬性，這個判斷是為了防止Vue實例被觀測
以上條件滿足之后，就會執(zhí)行代碼ob = new Observer(value)，創(chuàng)建一個Observer實例
Observer 構(gòu)造函數(shù)
Observer也定義在core/observer/index.js文件中，它是一個構(gòu)造函數(shù)，用來將數(shù)據(jù)對象轉(zhuǎn)換成響應(yīng)式的。
export class Observer {
value: any;
dep: Dep;
vmCount: number; // number of vms that have this object as root $data
constructor (value: any) {
this.value = value
this.dep = new Dep()
this.vmCount = 0
def(value, '__ob__', this)
if (Array.isArray(value)) {
if (hasProto) {
protoAugment(value, arrayMethods)
} else {
copyAugment(value, arrayMethods, arrayKeys)
}
this.observeArray(value)
} else {
this.walk(value)
}
}
/**
* Walk through all properties and convert them into
* getter/setters. This method should only be called when
* value type is Object.
*/
walk (obj: Object) {
const keys = Object.keys(obj)
for (let i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i])
}
}
/**
* Observe a list of Array items.
*/
observeArray (items: Array<any>) {
for (let i = 0, l = items.length; i < l; i++) {
observe(items[i])
}
}
}
以上是Observer的全部代碼，現(xiàn)在我們從constructor開始，來看一下實例化Observer都做了什么。
__ob__ 屬性
constructor開始先初始化了幾個實例屬性
this.value = value this.dep = new Dep() this.vmCount = 0 def(value, '__ob__', this)
value就是實例化Observer時傳遞的參數(shù)，現(xiàn)在將它賦給了實例對象的value屬性。dep屬性指向?qū)嵗腄ep實例對象，它就是用來收集依賴的容器。vmCount屬性被初始化為0.
接著使用def函數(shù)為數(shù)據(jù)對象添加了__ob__屬性，它的值就是當(dāng)前Observer實例對象。def定義在core/util/lang.js文件中，是對Object.defineProperty的封裝。
export function def (obj: Object, key: string, val: any, enumerable?: boolean) {
Object.defineProperty(obj, key, {
value: val,
enumerable: !!enumerable,
writable: true,
configurable: true
})
}
用def來定義__ob__屬性是要把它定義成不可枚舉的，這樣遍歷對象就不會遍歷到它了。
假設(shè)我們的數(shù)據(jù)對象是
data = {
a: 1
}
添加__ob__屬性后變成
data = {
a: 1,
__ob__: {
value: data, // data 數(shù)據(jù)對象本身
dep: new Dep(), // Dep實例
vmCount: 0
}
}
處理純對象
接下來是一個if...else判斷, 來區(qū)分?jǐn)?shù)組和對象，因為對數(shù)組和對象的處理不同。
if (Array.isArray(value)) {
if (hasProto) {
protoAugment(value, arrayMethods)
} else {
copyAugment(value, arrayMethods, arrayKeys)
}
this.observeArray(value)
} else {
this.walk(value)
}
我們先來看是對象的情況，也就是執(zhí)行this.walk(value)
walk函數(shù)就定義在constructor的下面
walk (obj: Object) {
const keys = Object.keys(obj)
for (let i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i])
}
}
該方法就是用for循環(huán)遍歷了對象的屬性，并對每個屬性都調(diào)用了defineReactive方法。
defineReactive 函數(shù)
defineReactive也定義在core/observer/index.js文件中，找到它的定義：
/**
* Define a reactive property on an Object.
*/
export function defineReactive (
obj: Object,
key: string,
val: any,
customSetter?: ?Function,
shallow?: boolean
) {
const dep = new Dep()
const property = Object.getOwnPropertyDescriptor(obj, key)
if (property && property.configurable === false) {
return
}
// cater for pre-defined getter/setters
const getter = property && property.get
const setter = property && property.set
if ((!getter || setter) && arguments.length === 2) {
val = obj[key]
}
let childOb = !shallow && observe(val)
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
...
},
set: function reactiveSetter (newVal) {
...
}
})
}
因代碼太長，省略了部分內(nèi)容，之后我們再具體看。該函數(shù)的主要作用就是將數(shù)據(jù)對象的數(shù)據(jù)屬性轉(zhuǎn)換為訪問器屬性
函數(shù)體內(nèi)首先定義了dep常量，它的值是Dep實例，用來收集對應(yīng)字段的依賴。
接下來是這樣一段代碼：
const property = Object.getOwnPropertyDescriptor(obj, key)
if (property && property.configurable === false) {
return
}
先通過Object.getOwnPropertyDescriptor獲取字段的屬性描述對象，再判斷該字段是否是可配置的，如果不可配置，直接返回。因為不可配置的屬性是不能通過Object.defineProperty改變其屬性定義的。
再往下接著看：
// cater for pre-defined getter/setters
const getter = property && property.get
const setter = property && property.set
if ((!getter || setter) && arguments.length === 2) {
val = obj[key]
}
先保存屬性描述對象里面的get和set方法。如果這個屬性已經(jīng)是訪問器屬性了，那它就存在get或set方法了，下面的操作會使用Object.defineProperty重寫get和set方法，為了不影響原來的讀寫操作，就先緩存setter/getter。
接下來是一個if判斷，如果滿足條件的話，就讀取該屬性的值。
再下面是這樣一句代碼：
let childOb = !shallow && observe(val)
因為屬性值val也可能是一個對象，所以調(diào)用observe繼續(xù)觀測。但前面有一個條件，只有當(dāng)shallow為假時才會進行深度觀測。shallow是defineReactive的第五個參數(shù)，我們在walk中調(diào)用該函數(shù)時并沒有傳遞該參數(shù)，所以這里它的值是undefined。!shallow的是true，所以這里會進行深度觀測。
不進行深度觀測的我們在initRender函數(shù)中見過：
defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, () => {
!isUpdatingChildComponent && warn(`$attrs is readonly.`, vm)
}, true)
defineReactive(vm, '$listeners', options._parentListeners || emptyObject, () => {
!isUpdatingChildComponent && warn(`$listeners is readonly.`, vm)
}, true)
在Vue實例上定義屬性$attrs和$listeners時就是非深度觀測。
在get中收集依賴
接下來就是使用Object.defineProperty設(shè)置訪問器屬性，先看一下get函數(shù)：
get: function reactiveGetter () {
const value = getter ? getter.call(obj) : val
if (Dep.target) {
dep.depend()
if (childOb) {
childOb.dep.depend()
if (Array.isArray(value)) {
dependArray(value)
}
}
}
return value
},
get函數(shù)首先是要返回屬性值，還有就是在這里收集依賴。
第一行代碼就是獲取屬性值。先判斷了getter是否存在，getter就是屬性原有的get函數(shù)，如果存在的話調(diào)用該函數(shù)獲取屬性值，否則的話就用val作為屬性值。
接下來是收集依賴的代碼：
if (Dep.target) {
dep.depend()
if (childOb) {
childOb.dep.depend()
if (Array.isArray(value)) {
dependArray(value)
}
}
}
首先判斷Dep.target是否存在，Dep.target就是要收集的依賴，如果存在的話，執(zhí)行if語句塊內(nèi)的代碼。
dep.depend()dep對象的depend方法執(zhí)行就是收集依賴。
然后判斷了childOb是否存在，存在的話執(zhí)行childOb.dep.depend(). 那么childOb的值是誰呢？
如果我們有個數(shù)據(jù)對象：
data = {
a: {
b: 1
}
}
經(jīng)過observe觀測之后，添加__ob__屬性，變成如下模樣：
data = {
a: {
b: 1,
__ob__: { value, dep, vmCount }
},
__ob__: { value, dep, vmCount }
}
對于屬性a來說，childOb === data.a.__ob__, 所以childOb.dep.depend()就是data.a.__ob__.dep.depend()
在if語句里面又一個if判斷：
if (Array.isArray(value)) {
dependArray(value)
}
如果屬性值是數(shù)組，調(diào)用dependArray函數(shù)逐個觸發(fā)數(shù)組元素的依賴收集
在set函數(shù)中觸發(fā)依賴
set: function reactiveSetter (newVal) {
const value = getter ? getter.call(obj) : val
/* eslint-disable no-self-compare */
if (newVal === value || (newVal !== newVal && value !== value)) {
return
}
/* eslint-enable no-self-compare */
if (process.env.NODE_ENV !== 'production' && customSetter) {
customSetter()
}
// #7981: for accessor properties without setter
if (getter && !setter) return
if (setter) {
setter.call(obj, newVal)
} else {
val = newVal
}
childOb = !shallow && observe(newVal)
dep.notify()
}
set函數(shù)主要是設(shè)置屬性值和觸發(fā)依賴。
const value = getter ? getter.call(obj) : val
/* eslint-disable no-self-compare */
if (newVal === value || (newVal !== newVal && value !== value)) {
return
}
首先也是獲取原來的屬性值。為什么有這一步呢？因為要跟新值做比較，如果新舊值相等，就可以直接返回不用接下來的操作了。在if條件中，newVal === value這個我們都明白，那后面這個(newVal !== newVal && value !== value)條件是什么意思呢？
這是因為一個特殊的值NaN
NaN === NaN // false
如果newVal !== newVal,說明新值是NaN；如果value !== value，那么舊值也是NaN。那么新舊值也是相等的，也不需要處理。
/* eslint-enable no-self-compare */
if (process.env.NODE_ENV !== 'production' && customSetter) {
customSetter()
}
在非生產(chǎn)環(huán)境下，如果customSetter函數(shù)存在，將執(zhí)行該函數(shù)。customSetter是defineReactive的第四個參數(shù)，上面我們看initRender的時候有傳過這個參數(shù)：
defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, () => {
!isUpdatingChildComponent && warn(`$attrs is readonly.`, vm)
}, true)
第四個參數(shù)是一個箭頭函數(shù)，當(dāng)修改vm.$attrs時，會打印警告信息$attrs是只讀的。所以customSetter的作用就是打印輔助信息。
if (getter && !setter) return
if (setter) {
setter.call(obj, newVal)
} else {
val = newVal
}
如果存在getter不存在setter的話，直接返回。getter和setter就是屬性自身的get和set函數(shù)。
下面就是設(shè)置屬性值。如果setter存在的話，調(diào)用setter函數(shù)，保證原來的屬性設(shè)置操作不變。否則用新值替換舊值。
最后是這兩句代碼：
childOb = !shallow && observe(newVal) dep.notify()
如果新值也是一個數(shù)組或純對象的話，這個新值是未觀測的。所以在需要深度觀測的情況下，要調(diào)用observe對新值進行觀測。最后調(diào)用dep.notify()觸發(fā)依賴。
處理數(shù)組
看完了純對象的處理，再來看一下數(shù)組是怎么轉(zhuǎn)換為響應(yīng)式的。數(shù)組有些方法會改變數(shù)組本身，我們稱之為變異方法，這些方法有：push pop shift unshift reverse sort splice，如何在調(diào)用這些方法的時候觸發(fā)依賴呢？看一下Vue的處理。
if (hasProto) {
protoAugment(value, arrayMethods)
} else {
copyAugment(value, arrayMethods, arrayKeys)
}
this.observeArray(value)
首先是一個if...else 判斷，hasProto定義在core/util/env.js文件中。
// can we use __proto__?
export const hasProto = '__proto__' in {}
判斷當(dāng)前環(huán)境是否可以使用對象的 __proto__ 屬性, 該屬性在IE11及更高版本中才能使用。
如果條件為true的話，調(diào)用protoAugment方法, 傳遞了兩個參數(shù)，一個是數(shù)組實例本身，一個是arrayMethods（代理原型）。
/**
* Augment a target Object or Array by intercepting
* the prototype chain using __proto__
*/
function protoAugment (target, src: Object) {
/* eslint-disable no-proto */
target.__proto__ = src
/* eslint-enable no-proto */
}
該方法的作用就是將數(shù)組實例的原型指向代理原型。這樣當(dāng)數(shù)組實例調(diào)用變異方法的時候就能先走代理原型重定義的方法。我們看一下arrayMethods的實現(xiàn)，它定義在core/observer/array.js文件中：
import { def } from '../util/index'
const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)
const methodsToPatch = [
'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse'
]
/**
* Intercept mutating methods and emit events
*/
methodsToPatch.forEach(function (method) {
// cache original method
const original = arrayProto[method]
def(arrayMethods, method, function mutator (...args) {
const result = original.apply(this, args)
const ob = this.__ob__
let inserted
switch (method) {
case 'push':
case 'unshift':
inserted = args
break
case 'splice':
inserted = args.slice(2)
break
}
if (inserted) ob.observeArray(inserted)
// notify change
ob.dep.notify()
return result
})
})
這是這個文件的全部內(nèi)容，該文件只做了一件事，就是導(dǎo)出arrayMethods對象。
const arrayProto = Array.prototype export const arrayMethods = Object.create(arrayProto)
arrayMethods是以數(shù)組的原型為原型創(chuàng)建的對象。
const methodsToPatch = [ 'push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse' ]
這是定義了數(shù)組的變異方法。
接著for循環(huán)遍歷變異方法，用def在代理原型上定義了與變異方法同名的方法。
methodsToPatch.forEach(function (method) {
// cache original method
const original = arrayProto[method]
def(arrayMethods, method, function mutator (...args) {
const result = original.apply(this, args)
const ob = this.__ob__
let inserted
switch (method) {
case 'push':
case 'unshift':
inserted = args
break
case 'splice':
inserted = args.slice(2)
break
}
if (inserted) ob.observeArray(inserted)
// notify change
ob.dep.notify()
return result
})
})
首先緩存了數(shù)組原本的變異方法
const original = arrayProto[method]
然后用def在arrayMethods對象上定義了與變異方法同名的函數(shù)。函數(shù)內(nèi)首先調(diào)用了original原來的函數(shù)獲取結(jié)果
const result = original.apply(this, args)
并在函數(shù)末尾返回result。保證了攔截函數(shù)的功能與原來方法的功能是一致的。
const ob = this.__ob__ ... ob.dep.notify()
這兩句代碼就是觸發(fā)依賴。當(dāng)變異方法被調(diào)用時，數(shù)組本身就被改變了，所以要觸發(fā)依賴。
再看其余的代碼：
let inserted
switch (method) {
case 'push':
case 'unshift':
inserted = args
break
case 'splice':
inserted = args.slice(2)
break
}
if (inserted) ob.observeArray(inserted)
這段代碼的作用就是收集新添加的元素，將其變成響應(yīng)式數(shù)據(jù)。
push和unshift方法的參數(shù)就是要添加的元素，所以inserted = args。splice方法從第三個參數(shù)到最后一個參數(shù)都是要添加的新元素，所以inserted = args.slice(2)。最后，如果存在新添加的元素，調(diào)用observeArray函數(shù)對其進行觀測。
以上是支持__proto__屬性的時候，那不支持的時候呢？調(diào)用copyAugment方法，并傳遞了三個參數(shù)。前兩個跟protoAugment方法的參數(shù)一樣，一個是數(shù)組實例本身，一個是arrayMethods代理原型，還有一個是arrayKeys，
const arrayKeys = Object.getOwnPropertyNames(arrayMethods)
它的值就是定義在arrayMethods對象上的所有的鍵，也就是所要攔截的變異方法的名稱。函數(shù)定義如下：
function copyAugment (target: Object, src: Object, keys: Array<string>) {
for (let i = 0, l = keys.length; i < l; i++) {
const key = keys[i]
def(target, key, src[key])
}
}
這個方法的作用就是在數(shù)組實例上定義與變異方法同名的函數(shù)，從而實現(xiàn)攔截。
if else代碼之后，調(diào)用了observeArray方法this.observeArray(value), 并將數(shù)組實例作為參數(shù)。
observeArray方法的定義如下：
/**
* Observe a list of Array items.
*/
observeArray (items: Array<any>) {
for (let i = 0, l = items.length; i < l; i++) {
observe(items[i])
}
}
循環(huán)遍歷數(shù)組實例，并對數(shù)組的每一項再進行觀測。這是因為如果數(shù)組元素是數(shù)組或純對象的話不進行這一步數(shù)組元素就不是響應(yīng)式的，這是為了實現(xiàn)深度觀測。比如：
const vm = new Vue({
data: {
a: [[1,2]]
}
})
vm.a.push(1); // 能夠觸發(fā)響應(yīng)
vm.a[1].push(1); // 不能觸發(fā)響應(yīng)
所以需要遞歸觀測數(shù)組元素。
Vue.set($set) 和 Vue.delete($delete) 的實現(xiàn)
我們知道，為對象或數(shù)組直接添加或刪除元素Vue是攔截不到的。我們需要使用Vue.set、Vue.delete去解決，Vue還在實例對象上定義了$set $delete方便我們使用。其實不管是實例方法還是全局方法它們的指向都是一樣的。我們來看以下它們的定義。
$set $delete定義在core/instance/state.js文件中的stateMixin方法中
export function stateMixin (Vue: Class<Component>) {
...
Vue.prototype.$set = set
Vue.prototype.$delete = del
...
}
Vue.set和Vue.delete定義在core/global-api/index.js文件中的initGlobalAPI函數(shù)中：
export function initGlobalAPI (Vue: GlobalAPI) {
...
Vue.set = set
Vue.delete = del
...
}
可以看到它們的函數(shù)值是相同的。 set和del定義在core/observer/index.js文件中。我們先來看一下set的定義
set
從上到下來看set的函數(shù)體，顯示這個if判斷：
if (process.env.NODE_ENV !== 'production' &&
(isUndef(target) || isPrimitive(target))
) {
warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
}
isUndef
export function isUndef (v: any): boolean %checks {
return v === undefined || v === null
}
判斷變量是否是未定義，或者值為null。
isPrimitive
export function isPrimitive (value: any): boolean %checks {
return (
typeof value === 'string' ||
typeof value === 'number' ||
// $flow-disable-line
typeof value === 'symbol' ||
typeof value === 'boolean'
)
}
判斷變量是否是原始類型。
所以這個if語句的作用就是，如果target是undefined或者null或者它的類型是原始類型，在非生產(chǎn)環(huán)境下打印警告信息。
再看下一個if語句：
if (Array.isArray(target) && isValidArrayIndex(key)) {
target.length = Math.max(target.length, key)
target.splice(key, 1, val)
return val
}
isValidArrayIndex
export function isValidArrayIndex (val: any): boolean {
const n = parseFloat(String(val))
return n >= 0 && Math.floor(n) === n && isFinite(val)
}
判斷變量是否是有效的數(shù)組索引。
如果target是一個數(shù)組，并且key是一個有效的數(shù)組索引，就執(zhí)行if語句塊內(nèi)的代碼
我們知道splice變異方法是可以觸發(fā)響應(yīng)的，target.splice(key, 1, val) 就利用了替換元素的能力，將指定位置元素的值替換為新值。所以數(shù)組就是利用splice添加元素的。另外，當(dāng)要設(shè)置的元素的索引大于數(shù)組長度時 splice 無效，所以target的length取兩者中的最大值。
if (key in target && !(key in Object.prototype)) {
target[key] = val
return val
}
這個if條件的意思是該屬性已經(jīng)在target對象上有定義了，那么只要重新設(shè)置它的值就行了。因為在純對象中，已經(jīng)存在的屬性就是響應(yīng)式的了。
const ob = (target: any).__ob__
if (target._isVue || (ob && ob.vmCount)) {
process.env.NODE_ENV !== 'production' && warn(
'Avoid adding reactive properties to a Vue instance or its root $data ' +
'at runtime - declare it upfront in the data option.'
)
return val
}
target._isVue
擁有_isVue屬性說明這是一個Vue實例‘
(ob && ob.vmCount)
ob就是target.__ob__，ob.vmCount也就是target.__ob__.vmCount。來看一下這段代碼：
export function observe (value: any, asRootData: ?boolean): Observer | void {
if (asRootData && ob) {
ob.vmCount++
}
}
asRootData表示是否是根數(shù)據(jù)對象。什么是根數(shù)據(jù)對象呢？看一下哪里調(diào)用observe函數(shù)的時候傳遞了第二個參數(shù)：
function initData (vm: Component) {
...
// observe data
observe(data, true /* asRootData */)
}
在initData中調(diào)用observe的時候傳遞了第二個參數(shù)為true，那根數(shù)據(jù)對象也就是data。也就是說當(dāng)使用 Vue.set/$set 函數(shù)為根數(shù)據(jù)對象添加屬性時，是不被允許的。
所以當(dāng)target是Vue實例或者是根數(shù)據(jù)對象時，在非生產(chǎn)環(huán)境會打印警告信息。
if (!ob) {
target[key] = val
return val
}
當(dāng)!ob為true時，說明不存在__ob__屬性，那target也就不是響應(yīng)式的，直接變更屬性值就行。
defineReactive(ob.value, key, val) ob.dep.notify()
這里就是給對象添加新的屬性，并保證新添加的屬性是響應(yīng)式的。
ob.dep.notify()觸發(fā)響應(yīng)。
del
看完了set，再來看delete操作。
if (process.env.NODE_ENV !== 'production' &&
(isUndef(target) || isPrimitive(target))
) {
warn(`Cannot delete reactive property on undefined, null, or primitive value: ${(target: any)}`)
}
這個if判斷跟set函數(shù)的一樣。如果target是undefined、null或者原始類型值，在非生產(chǎn)環(huán)境下打印警告信息。
if (Array.isArray(target) && isValidArrayIndex(key)) {
target.splice(key, 1)
return
}
當(dāng)target是數(shù)組類型并且key是有效的數(shù)組索引值時，也是使用splice來進行刪除操作，因為該變異方法可以觸發(fā)攔截操作。
const ob = (target: any).__ob__
if (target._isVue || (ob && ob.vmCount)) {
process.env.NODE_ENV !== 'production' && warn(
'Avoid deleting properties on a Vue instance or its root $data ' +
'- just set it to null.'
)
return
}
這一段if判斷也是一樣的，如果target是Vue實例或者是根數(shù)據(jù)對象，在非生產(chǎn)環(huán)境下打印警告信息。也就是不能刪除Vue實例對象的屬性，也不能刪除根數(shù)據(jù)對象的屬性，因為data本身不是響應(yīng)式的。
if (!hasOwn(target, key)) {
return
}
如果target對象上沒有key屬性，直接返回。
delete target[key]
進行到這里就說明target是一個純對象，并且有key屬性，直接刪除該屬性。
if (!ob) {
return
}
如果ob對象不存在，說明target不是響應(yīng)式的，直接返回。
ob.dep.notify()
如果ob對象存在，說明target是響應(yīng)式的，觸發(fā)響應(yīng)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇關(guān)于vue-router重定向和路由別名的使用講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要介紹了vue+iview+less 實現(xiàn)換膚功能,項目搭建用的vue—cli，css框架選擇的iview，具體操作流程大家跟隨腳本之家小編一起看看吧2018-08-08
解決antd日期選擇組件,添加value就無法點擊下一年和下一月問題
這篇文章主要介紹了解決antd日期選擇組件,添加value就無法點擊下一年和下一月問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
Vue Element前端應(yīng)用開發(fā)之菜單資源管理
在權(quán)限管理系統(tǒng)中，菜單也屬于權(quán)限控制的一個資源，屬于角色控制的一環(huán)。不同角色用戶，登錄系統(tǒng)后，出現(xiàn)的系統(tǒng)菜單是不同的。菜單結(jié)合路由集合，實現(xiàn)可訪問路由的過濾，也就實現(xiàn)了對應(yīng)角色菜單的展示和可訪問路由的控制。2021-05-05
本篇文章通過實例給大家分享了vue自動化表單的操作方法以及相關(guān)的代碼做了描述，有興趣的朋友可以跟著學(xué)習(xí)下。2018-05-05
vue.js通過路由實現(xiàn)經(jīng)典的三欄布局實例代碼
本文通過實例代碼給大家介紹了vue.js通過路由實現(xiàn)經(jīng)典的三欄布局，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-07-07
關(guān)于vue中@click.native.prevent的說明
這篇文章主要介紹了關(guān)于vue中@click.native.prevent的說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式，本文給大家分享Vue3.0中快速上手Vuex狀態(tài)管理的方式，本文通過實例代碼講解的很詳細(xì)，對大家學(xué)習(xí)Vuex狀態(tài)管理相關(guān)知識有很大的幫助，感興趣的朋友一起學(xué)習(xí)吧2021-05-05
這篇文章主要為大家詳細(xì)介紹了Vue全局事件總線，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
Vue3新特性Suspense和Teleport應(yīng)用場景分析
本文介紹了Vue2和Vue3中的Suspense用于處理異步請求的加載提示,以及如何在組件間實現(xiàn)動態(tài)加載,同時,Teleport技術(shù)展示了如何在DOM中靈活地控制組件的渲染位置,解決布局問題,感興趣的朋友跟隨小編一起看看吧2024-07-07