Vue源碼解析之數據響應系統的示例分析
這篇文章主要介紹Vue源碼解析之數據響應系統的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
創新互聯公司憑借在網站建設、網站推廣領域領先的技術能力和多年的行業經驗，為客戶提供超值的營銷型網站建設服務，我們始終認為：好的營銷型網站就是好的業務員。我們已成功為企業單位、個人等客戶提供了成都網站設計、成都網站制作服務，以良好的商業信譽，完善的服務及深厚的技術力量處于同行領先地位。
數據雙向綁定的思路
1. 對象
先來看元素是對象的情況。假設我們有一個對象和一個監測方法：
const data = {
a: 1
};
/**
* exp[String, Function]: 被觀測的字段
* fn[Function]: 被觀測對象改變后執行的方法
*/
function watch (exp, fn) {
}我們可以調用watch方法，當a的值改變后打印一句話：
watch('a', () => {
console.log('a 改變了')
})要實現這個功能，我們首先要能知道屬性a被修改了。這時候就需要使用Object.defineProperty函數把屬性a變成訪問器屬性：
Object.defineProperty(data, 'a', {
set () {
console.log('設置了 a')
},
get () {
console.log('讀取了 a')
}
})這樣當我們修改a的值：data.a = 2時，就會打印出設置了 a, 當我們獲取a的值時：data.a, 就會打印出讀取了 a.
在屬性的讀取和設置中我們已經能夠進行攔截并做一些操作了。可是在屬性修改時我們并不想總打印設置了 a這句話，而是有一個監聽方法watch，不同的屬性有不同的操作，對同一個屬性也可能監聽多次。
這就需要一個容器，把對同一個屬性的監聽依賴收集起來，在屬性改變時再取出依次觸發。既然是在屬性改變時觸發依賴，我們就可以放在setter里面，在getter中收集依賴。這里我們先不考慮依賴被重復收集等一些情況
const dep = [];
Object.defineProperty(data, 'a', {
set () {
dep.forEach(fn => fn());
},
get () {
dep.push(fn);
}
})我們定義了容器dep, 在讀取a屬性時觸發get函數把依賴存入dep中；在設置a屬性時觸發set函數把容器內的依賴挨個執行。
那fn從何而來呢？再看一些我們的監測函數watch
watch('a', () => {
console.log('a 改變了')
})該函數有兩個參數，第一個是被觀測的字段，第二個是被觀測字段的值改變后需要觸發的操作。其實第二個參數就是我們要收集的依賴fn。
const data = {
a: 1
};
const dep = [];
Object.defineProperty(data, 'a', {
set () {
dep.forEach(fn => fn());
},
get () {
// Target就是該變量的依賴函數
dep.push(Target);
}
})
let Target = null;
function watch (exp, fn) {
// 將fn賦值給Target
Target = fn;
// 讀取屬性，觸發get函數，收集依賴
data[exp];
}現在僅能夠觀測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就是該變量的依賴函數
dep.push(Target);
return val;
}
})
}
}用for循環遍歷data上的所有屬性，對每一個屬性都用Object.defineProperty改為訪問器屬性。
現在監測data里面基本類型值的屬性沒問題了，如果data的屬性值又是一個對象呢：
data: {
a: {
aa: 1
}
}我們再來改一下我們的walk函數，當val還是一個對象時，遞歸調用walk:
function walk (data) {
for (let key in data) {
const dep = [];
const val = data[key];
// 如果val是對象，遞歸調用walk，將其屬性轉為訪問器屬性
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就是該變量的依賴函數
dep.push(Target);
return val;
}
})
}
}添加了一段判斷邏輯，如果某個屬性的屬性值仍然是對象，就遞歸調用walk函數。
雖然經過上面的改造，data.a.aa是訪問器屬性了，但下面但代碼仍然不能運行：
watch('a.aa', () => {
console.log('修改了 a.b')
})這是為什么呢？再看我們的watch函數：
function watch (exp, fn) {
// 將fn賦值給Target
Target = fn;
// 讀取屬性，觸發get函數，收集依賴
data[exp];
}在讀取屬性的時候是data[exp]，放到這里就是data[a.aa]，這自然是不對的。正確的讀取方式應該是data[a][aa]. 我們需要對watch函數做改造：
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];
}這里增加了一個判斷邏輯，當監測的字段中包含.時，就執行if語句塊的內容。首先使用split函數將字符串轉換為數組：a.aa => [a, aa]. 然后使用循環讀取到嵌套的屬性值，并且return結束。
Vue中提供了$watch實例方法來觀測表達式，對復雜的表達式用函數取代：
// 函數
vm.$watch(
function () {
// 表達式 `this.a + this.b` 每次得出一個不同的結果時
// 處理函數都會被調用。
// 這就像監聽一個未被定義的計算屬性
return this.a + this.b
},
function (newVal, oldVal) {
// 做點什么
}
)當第一個函數執行時，就會觸發this.a、this.b的get攔截器，從而收集依賴。
我們的watch函數第一個參數是函數時watch函數要做些什么改變呢？要想能夠收集依賴，就得讀取屬性觸發get函數。當第一個參數是函數時怎么讀取屬性呢？函數內是有讀取屬性的，所以只要執行一下函數就行了。
function watch (exp, fn) {
// 將fn賦值給Target
Target = fn;
// 如果 exp 是函數，直接執行該函數
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. 數組
數組有幾個變異方法會改變數組本身：push pop shift unshift splice sort reverse, 那怎么才能知道何時調用了這些變異方法呢？我們可以在保證原來方法功能不變的前提下對方法進行擴展。可是如何擴展呢？
數組實例的方法都來自于數組構造函數的原型, 數組實例的__proto__屬性指向數組構造函數的原型，即：arr.__proto__ === Array.prototype, 我們可以定義一個對象，它的原型指向Array.prototype，然后在這個對象中重新定義與變異方法重名的函數，然后讓實例的__proto__指向該對象，這樣調用變異方法的時候，就會先調用重定義的方法。
const mutationMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'];
// 創建以Array.prototype為原型的對象
const arrayMethods = Object.create(Array.prototype);
// 緩存Array.prototype
const originMethods = Array.prototype;
mutationMethods.forEach(method => {
arrayMethods[method] = function (...args) {
// 調用原來的方法獲取結果
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存在，就執行initData方法，否則執行observe方法，并給vm._data賦值空對象。我們就從initData方法開始，開啟探索數據響應系統之路。
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 */)
}內容有點多我們從上往下依次來看，首先是這樣一段代碼：
let data = vm.$options.data
data = vm._data = typeof data === 'function'
? getData(data, vm)
: data || {}我們知道在經過選項合并后，data已經變成一個函數了。那為何這里還有data是否是一個函數的判斷呢？這是因為beforeCreate生命周期是在mergeOptions函數之后initState函數之前調用的，mergeOptions函數就是處理選項合并的。如果用戶在beforeCreate中修改了vm.$options.data的值呢？那它就可能不是一個函數了，畢竟用戶的操作是不可控的，所以這里還是有必要判斷一下的。
正常情況下也就是data是一個函數，就會調用getData函數，并將data和Vue實例vm作為參數傳過去。該函數也定義在當前頁面中：
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()
}
}其實該函數就是通過調用data獲取到數據對象并返回：data.call(vm, vm). 用try...catch包裹是為了捕獲可能出現的錯誤，如果出錯的話調用handleError函數并返回一個空對象。
函數的開頭和結尾分別調用了pushTarget和popTarget, 這是為了防止使用 props 數據初始化 data 數據時收集冗余的依賴。
再回到initData函數中，所以現在data和vm._data就是最終的數據對象了。
接下來是一個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不是一個對象，在非生產環境下給出警告信息。
繼續往下看：
// 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
// 循環遍歷data的鍵
while (i--) {
const key = keys[i]
// 如果methods存在，并且methods中存在與data對象相同的鍵，發出警告。data優先
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對象相同的鍵，發出警告。 props優先
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 函數用來檢測一個字符串是否以 $ 或者 _ 開頭，主要用來判斷一個字段的鍵名是否是保留的
proxy(vm, `_data`, key)
}
}
// observe data
observe(data, true /* asRootData */)while中的兩個if條件判斷了props和methods中是否有和data對象相同的鍵，因為這三者中的屬性都可以通過實例對象代理訪問，如果相同就會出現沖突了。
const vm = new Vue({
props: { a: { default: 2 } }
data: { a: 1 },
methods: {
a () {
console.log(3)
}
}
})當調用vm.a的時候，就會產生覆蓋現象。為了防止這種情況出現，就在這里做了判斷。
再看else if中的內容，當!isReserved(key)成立時，執行proxy(vm,_data, key)。 isReserved函數的作用是判斷一個字符串是否以 $ 或者 _ 開頭, 因為Vue內部的變量是以$或_開頭，防止沖突。如果 key 不是以 $或 _ 開頭，那么將執行 proxy 函數
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函數通過Object.defineProperty在實例對象vm上定義了與data數據字段相同的訪問器屬性，代理的值是vm._data上對應的屬性值。當訪問this.a時，實際訪問的是this._data.a的值。
最后一句代碼是
// observe data observe(data, true /* asRootData */)
調用observe將data數據對象轉換成響應式的。
observe工廠函數
observe函數定義在core/observer/index.js文件中, 我們找到該函數的定義，一點點來看
if (!isObject(value) || value instanceof VNode) {
return
}首先判斷如果數據不是一個對象或者是一個VNode實例，直接返回。
let ob: Observer | void
接著定義了ob變量，它是一個Observer實例，可以看到observe函數的最后返回了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判斷了數據對象是否包含__ob__屬性，并且判斷屬性值是否是Observer的實例。如果條件為真的話，就把value.__ob__的值賦給ob。
為什么會有這個判斷呢？每個數據對象被觀測后都會在該對象上定義一個__ob__屬性, 所以這個判斷是為了防止重復觀測一個對象。
接著是else if分支，這個條件判斷有點多，我們一個個來看。
shouldObserve必須為true
該變量也定義在 core/observer/index.js 文件內,
/**
* 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函數，該函數接收一個參數，這個參數用來更新shouldObserve的值。shouldObserve為true時可以進行觀測，為false時將不會進行觀測。
!isServerRendering()必須為true
isServerRendering函數用來判斷是否是服務端渲染，只有當不是服務端渲染的時候才會進行觀測
(Array.isArray(value) || isPlainObject(value)) 必須為真
只有當數據對象是數組或者純對象時才進行觀測
Object.isExtensible(value)必須為true
被觀測的數據對象必須是可擴展的, 普通對象默認就是可擴展當。以下三個方法可以將對象變得不可擴展：
Object.preventExtensions()、 Object.freeze()、Object.seal()
!value._isVue必須為真
Vue實例含有_isVue屬性，這個判斷是為了防止Vue實例被觀測
以上條件滿足之后，就會執行代碼ob = new Observer(value)，創建一個Observer實例
Observer 構造函數
Observer也定義在core/observer/index.js文件中，它是一個構造函數，用來將數據對象轉換成響應式的。
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的全部代碼，現在我們從constructor開始，來看一下實例化Observer都做了什么。
__ob__ 屬性
constructor開始先初始化了幾個實例屬性
this.value = value this.dep = new Dep() this.vmCount = 0 def(value, '__ob__', this)
value就是實例化Observer時傳遞的參數，現在將它賦給了實例對象的value屬性。dep屬性指向實例化的Dep實例對象，它就是用來收集依賴的容器。vmCount屬性被初始化為0.
接著使用def函數為數據對象添加了__ob__屬性，它的值就是當前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__屬性是要把它定義成不可枚舉的，這樣遍歷對象就不會遍歷到它了。
假設我們的數據對象是
data = {
a: 1
}添加__ob__屬性后變成
data = {
a: 1,
__ob__: {
value: data, // data 數據對象本身
dep: new Dep(), // Dep實例
vmCount: 0
}
}處理純對象
接下來是一個if...else判斷, 來區分數組和對象，因為對數組和對象的處理不同。
if (Array.isArray(value)) {
if (hasProto) {
protoAugment(value, arrayMethods)
} else {
copyAugment(value, arrayMethods, arrayKeys)
}
this.observeArray(value)
} else {
this.walk(value)
}我們先來看是對象的情況，也就是執行this.walk(value)
walk函數就定義在constructor的下面
walk (obj: Object) {
const keys = Object.keys(obj)
for (let i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i])
}
}該方法就是用for循環遍歷了對象的屬性，并對每個屬性都調用了defineReactive方法。
defineReactive 函數
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) {
...
}
})
}因代碼太長，省略了部分內容，之后我們再具體看。該函數的主要作用就是將數據對象的數據屬性轉換為訪問器屬性
函數體內首先定義了dep常量，它的值是Dep實例，用來收集對應字段的依賴。
接下來是這樣一段代碼：
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方法。如果這個屬性已經是訪問器屬性了，那它就存在get或set方法了，下面的操作會使用Object.defineProperty重寫get和set方法，為了不影響原來的讀寫操作，就先緩存setter/getter。
接下來是一個if判斷，如果滿足條件的話，就讀取該屬性的值。
再下面是這樣一句代碼：
let childOb = !shallow && observe(val)
因為屬性值val也可能是一個對象，所以調用observe繼續觀測。但前面有一個條件，只有當shallow為假時才會進行深度觀測。shallow是defineReactive的第五個參數，我們在walk中調用該函數時并沒有傳遞該參數，所以這里它的值是undefined。!shallow的是true，所以這里會進行深度觀測。
不進行深度觀測的我們在initRender函數中見過：
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設置訪問器屬性，先看一下get函數：
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函數首先是要返回屬性值，還有就是在這里收集依賴。
第一行代碼就是獲取屬性值。先判斷了getter是否存在，getter就是屬性原有的get函數，如果存在的話調用該函數獲取屬性值，否則的話就用val作為屬性值。
接下來是收集依賴的代碼：
if (Dep.target) {
dep.depend()
if (childOb) {
childOb.dep.depend()
if (Array.isArray(value)) {
dependArray(value)
}
}
}首先判斷Dep.target是否存在，Dep.target就是要收集的依賴，如果存在的話，執行if語句塊內的代碼。
dep.depend()dep對象的depend方法執行就是收集依賴。
然后判斷了childOb是否存在，存在的話執行childOb.dep.depend(). 那么childOb的值是誰呢？
如果我們有個數據對象：
data = {
a: {
b: 1
}
}經過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)
}如果屬性值是數組，調用dependArray函數逐個觸發數組元素的依賴收集
在set函數中觸發依賴
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函數主要是設置屬性值和觸發依賴。
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()
}在非生產環境下，如果customSetter函數存在，將執行該函數。customSetter是defineReactive的第四個參數，上面我們看initRender的時候有傳過這個參數：
defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, () => {
!isUpdatingChildComponent && warn(`$attrs is readonly.`, vm)
}, true)第四個參數是一個箭頭函數，當修改vm.$attrs時，會打印警告信息$attrs是只讀的。所以customSetter的作用就是打印輔助信息。
if (getter && !setter) return
if (setter) {
setter.call(obj, newVal)
} else {
val = newVal
}如果存在getter不存在setter的話，直接返回。getter和setter就是屬性自身的get和set函數。
下面就是設置屬性值。如果setter存在的話，調用setter函數，保證原來的屬性設置操作不變。否則用新值替換舊值。
最后是這兩句代碼：
childOb = !shallow && observe(newVal) dep.notify()
如果新值也是一個數組或純對象的話，這個新值是未觀測的。所以在需要深度觀測的情況下，要調用observe對新值進行觀測。最后調用dep.notify()觸發依賴。
處理數組
看完了純對象的處理，再來看一下數組是怎么轉換為響應式的。數組有些方法會改變數組本身，我們稱之為變異方法，這些方法有：push pop shift unshift reverse sort splice，如何在調用這些方法的時候觸發依賴呢？看一下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 {}判斷當前環境是否可以使用對象的 __proto__ 屬性, 該屬性在IE11及更高版本中才能使用。
如果條件為true的話，調用protoAugment方法, 傳遞了兩個參數，一個是數組實例本身，一個是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 */
}該方法的作用就是將數組實例的原型指向代理原型。這樣當數組實例調用變異方法的時候就能先走代理原型重定義的方法。我們看一下arrayMethods的實現，它定義在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
})
})這是這個文件的全部內容，該文件只做了一件事，就是導出arrayMethods對象。
const arrayProto = Array.prototype export const arrayMethods = Object.create(arrayProto)
arrayMethods是以數組的原型為原型創建的對象。
const methodsToPatch = [ 'push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse' ]
這是定義了數組的變異方法。
接著for循環遍歷變異方法，用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
})
})首先緩存了數組原本的變異方法
const original = arrayProto[method]
然后用def在arrayMethods對象上定義了與變異方法同名的函數。函數內首先調用了original原來的函數獲取結果
const result = original.apply(this, args)
并在函數末尾返回result。保證了攔截函數的功能與原來方法的功能是一致的。
const ob = this.__ob__ ... ob.dep.notify()
這兩句代碼就是觸發依賴。當變異方法被調用時，數組本身就被改變了，所以要觸發依賴。
再看其余的代碼：
let inserted
switch (method) {
case 'push':
case 'unshift':
inserted = args
break
case 'splice':
inserted = args.slice(2)
break
}
if (inserted) ob.observeArray(inserted)這段代碼的作用就是收集新添加的元素，將其變成響應式數據。
push和unshift方法的參數就是要添加的元素，所以inserted = args。splice方法從第三個參數到最后一個參數都是要添加的新元素，所以inserted = args.slice(2)。最后，如果存在新添加的元素，調用observeArray函數對其進行觀測。
以上是支持__proto__屬性的時候，那不支持的時候呢？調用copyAugment方法，并傳遞了三個參數。前兩個跟protoAugment方法的參數一樣，一個是數組實例本身，一個是arrayMethods代理原型，還有一個是arrayKeys，
const arrayKeys = Object.getOwnPropertyNames(arrayMethods)
它的值就是定義在arrayMethods對象上的所有的鍵，也就是所要攔截的變異方法的名稱。函數定義如下：
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])
}
}這個方法的作用就是在數組實例上定義與變異方法同名的函數，從而實現攔截。
if else代碼之后，調用了observeArray方法this.observeArray(value), 并將數組實例作為參數。
observeArray方法的定義如下：
/**
* Observe a list of Array items.
*/
observeArray (items: Array<any>) {
for (let i = 0, l = items.length; i < l; i++) {
observe(items[i])
}
}循環遍歷數組實例，并對數組的每一項再進行觀測。這是因為如果數組元素是數組或純對象的話不進行這一步數組元素就不是響應式的，這是為了實現深度觀測。比如：
const vm = new Vue({
data: {
a: [[1,2]]
}
})
vm.a.push(1); // 能夠觸發響應
vm.a[1].push(1); // 不能觸發響應所以需要遞歸觀測數組元素。
Vue.set($set) 和 Vue.delete($delete) 的實現
我們知道，為對象或數組直接添加或刪除元素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函數中：
export function initGlobalAPI (Vue: GlobalAPI) {
...
Vue.set = set
Vue.delete = del
...
}可以看到它們的函數值是相同的。 set和del定義在core/observer/index.js文件中。我們先來看一下set的定義
set
從上到下來看set的函數體，顯示這個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或者它的類型是原始類型，在非生產環境下打印警告信息。
再看下一個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)
}判斷變量是否是有效的數組索引。
如果target是一個數組，并且key是一個有效的數組索引，就執行if語句塊內的代碼
我們知道splice變異方法是可以觸發響應的，target.splice(key, 1, val) 就利用了替換元素的能力，將指定位置元素的值替換為新值。所以數組就是利用splice添加元素的。另外，當要設置的元素的索引大于數組長度時 splice 無效，所以target的length取兩者中的最大值。
if (key in target && !(key in Object.prototype)) {
target[key] = val
return val
}這個if條件的意思是該屬性已經在target對象上有定義了，那么只要重新設置它的值就行了。因為在純對象中，已經存在的屬性就是響應式的了。
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表示是否是根數據對象。什么是根數據對象呢？看一下哪里調用observe函數的時候傳遞了第二個參數：
function initData (vm: Component) {
...
// observe data
observe(data, true /* asRootData */)
}在initData中調用observe的時候傳遞了第二個參數為true，那根數據對象也就是data。也就是說當使用 Vue.set/$set 函數為根數據對象添加屬性時，是不被允許的。
所以當target是Vue實例或者是根數據對象時，在非生產環境會打印警告信息。
if (!ob) {
target[key] = val
return val
}當!ob為true時，說明不存在__ob__屬性，那target也就不是響應式的，直接變更屬性值就行。
defineReactive(ob.value, key, val) ob.dep.notify()
這里就是給對象添加新的屬性，并保證新添加的屬性是響應式的。
ob.dep.notify()觸發響應。
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函數的一樣。如果target是undefined、null或者原始類型值，在非生產環境下打印警告信息。
if (Array.isArray(target) && isValidArrayIndex(key)) {
target.splice(key, 1)
return
}當target是數組類型并且key是有效的數組索引值時，也是使用splice來進行刪除操作，因為該變異方法可以觸發攔截操作。
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實例或者是根數據對象，在非生產環境下打印警告信息。也就是不能刪除Vue實例對象的屬性，也不能刪除根數據對象的屬性，因為data本身不是響應式的。
if (!hasOwn(target, key)) {
return
}如果target對象上沒有key屬性，直接返回。
delete target[key]
進行到這里就說明target是一個純對象，并且有key屬性，直接刪除該屬性。
if (!ob) {
return
}如果ob對象不存在，說明target不是響應式的，直接返回。
ob.dep.notify()
如果ob對象存在，說明target是響應式的，觸發響應。
以上是“Vue源碼解析之數據響應系統的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創新互聯行業資訊頻道！
文章名稱：Vue源碼解析之數據響應系統的示例分析
瀏覽路徑：http://m.newbst.com/article28/gscpjp.html
成都網站建設公司_創新互聯，為您提供網站建設、定制開發、網頁設計公司、企業網站制作、Google、面包屑導航
聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯
- 企業網站如何做搜索引擎優化 2021-01-09
- 企業搜索引擎優化應注意哪些問題？ 2022-09-25
- 泰安百度快照推廣網站權重的衡量標準是什么？以搜索引擎優化為標準計算網站權重值 2023-01-08
- 站長如何利用微博進行搜索引擎優化 2015-05-09
- 百度搜索引擎優化和谷歌優化有什么區別？ 2015-11-13
- 企業網站做SEO搜索引擎優化 2023-01-03
- 英文上海網站建設之搜索引擎優化 2022-09-13
- 泰安競價托管【搜索引擎優化】著重相識網站熱圖有利于欣賞訪客與用戶樂趣的把握 2023-01-24
- 搜索引擎優化方法 2021-08-07
- 南山網站建設怎樣優化？兩招處理搜索引擎優化小白優化難題！ 2022-10-22
- 做搜索引擎優化是否有捷徑可言? 2023-04-05
- 成都網站建設淺談搜索引擎優化及對其不有好的特征有哪些? 2022-05-16