Vue源碼解析之?dāng)?shù)據(jù)響應(yīng)系統(tǒng)的示例分析

這篇文章主要介紹Vue源碼解析之?dāng)?shù)據(jù)響應(yīng)系統(tǒng)的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

數(shù)據(jù)雙向綁定的思路

1. 對象

先來看元素是對象的情況。假設(shè)我們有一個(gè)對象和一個(gè)監(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 改變了')
})

要實(shí)現(xiàn)這個(gè)功能，我們首先要能知道屬性a被修改了。這時(shí)候就需要使用Object.defineProperty函數(shù)把屬性a變成訪問器屬性：

Object.defineProperty(data, 'a', {
 set () {
  console.log('設(shè)置了 a')
 },
 get () {
  console.log('讀取了 a')
 }
})

這樣當(dāng)我們修改a的值：data.a = 2時(shí)，就會(huì)打印出設(shè)置了 a, 當(dāng)我們獲取a的值時(shí)：data.a, 就會(huì)打印出讀取了 a.

在屬性的讀取和設(shè)置中我們已經(jīng)能夠進(jìn)行攔截并做一些操作了?？墒窃趯傩孕薷臅r(shí)我們并不想總打印設(shè)置了 a這句話，而是有一個(gè)監(jiān)聽方法watch，不同的屬性有不同的操作，對同一個(gè)屬性也可能監(jiān)聽多次。

這就需要一個(gè)容器，把對同一個(gè)屬性的監(jiān)聽依賴收集起來，在屬性改變時(shí)再取出依次觸發(fā)。既然是在屬性改變時(shí)觸發(fā)依賴，我們就可以放在setter里面，在getter中收集依賴。這里我們先不考慮依賴被重復(fù)收集等一些情況

const dep = [];
Object.defineProperty(data, 'a', {
 set () {
  dep.forEach(fn => fn());
 },
 get () {
  dep.push(fn);
 }
})

我們定義了容器dep, 在讀取a屬性時(shí)觸發(fā)get函數(shù)把依賴存入dep中；在設(shè)置a屬性時(shí)觸發(fā)set函數(shù)把容器內(nèi)的依賴挨個(gè)執(zhí)行。

那fn從何而來呢？再看一些我們的監(jiān)測函數(shù)watch

watch('a', () => {
 console.log('a 改變了')
})

該函數(shù)有兩個(gè)參數(shù)，第一個(gè)是被觀測的字段，第二個(gè)是被觀測字段的值改變后需要觸發(fā)的操作。其實(shí)第二個(gè)參數(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一個(gè)屬性，為了能夠觀測對象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上的所有屬性，對每一個(gè)屬性都用Object.defineProperty改為訪問器屬性。

現(xiàn)在監(jiān)測data里面基本類型值的屬性沒問題了，如果data的屬性值又是一個(gè)對象呢：

data: {
 a: {
  aa: 1
 }
}

我們再來改一下我們的walk函數(shù)，當(dāng)val還是一個(gè)對象時(shí)，遞歸調(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;
   }
  })
 }
}

添加了一段判斷邏輯，如果某個(gè)屬性的屬性值仍然是對象，就遞歸調(diào)用walk函數(shù)。

雖然經(jīng)過上面的改造，data.a.aa是訪問器屬性了，但下面但代碼仍然不能運(yùn)行：

watch('a.aa', () => {
 console.log('修改了 a.b')
})

這是為什么呢？再看我們的watch函數(shù)：

function watch (exp, fn) {
 // 將fn賦值給Target
 Target = fn;
 // 讀取屬性，觸發(fā)get函數(shù)，收集依賴
 data[exp];
}

在讀取屬性的時(shí)候是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];
}

這里增加了一個(gè)判斷邏輯，當(dāng)監(jiān)測的字段中包含.時(shí)，就執(zhí)行if語句塊的內(nèi)容。首先使用split函數(shù)將字符串轉(zhuǎn)換為數(shù)組：a.aa => [a, aa]. 然后使用循環(huán)讀取到嵌套的屬性值，并且return結(jié)束。

Vue中提供了$watch實(shí)例方法來觀測表達(dá)式，對復(fù)雜的表達(dá)式用函數(shù)取代：

// 函數(shù)
vm.$watch(
 function () {
 // 表達(dá)式 `this.a + this.b` 每次得出一個(gè)不同的結(jié)果時(shí)
 // 處理函數(shù)都會(huì)被調(diào)用。
 // 這就像監(jiān)聽一個(gè)未被定義的計(jì)算屬性
 return this.a + this.b
 },
 function (newVal, oldVal) {
 // 做點(diǎn)什么
 }
)

當(dāng)?shù)谝粋€(gè)函數(shù)執(zhí)行時(shí)，就會(huì)觸發(fā)this.a、this.b的get攔截器，從而收集依賴。

我們的watch函數(shù)第一個(gè)參數(shù)是函數(shù)時(shí)watch函數(shù)要做些什么改變呢？要想能夠收集依賴，就得讀取屬性觸發(fā)get函數(shù)。當(dāng)?shù)谝粋€(gè)參數(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ù)組有幾個(gè)變異方法會(huì)改變數(shù)組本身：push pop shift unshift splice sort reverse, 那怎么才能知道何時(shí)調(diào)用了這些變異方法呢？我們可以在保證原來方法功能不變的前提下對方法進(jìn)行擴(kuò)展?？墒侨绾螖U(kuò)展呢？

數(shù)組實(shí)例的方法都來自于數(shù)組構(gòu)造函數(shù)的原型, 數(shù)組實(shí)例的__proto__屬性指向數(shù)組構(gòu)造函數(shù)的原型，即：arr.__proto__ === Array.prototype, 我們可以定義一個(gè)對象，它的原型指向Array.prototype，然后在這個(gè)對象中重新定義與變異方法重名的函數(shù)，然后讓實(shí)例的__proto__指向該對象，這樣調(diào)用變異方法的時(shí)候，就會(huì)先調(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);

可以看到在控制臺(tái)打印出了重定義了push方法這句話。

先大概有個(gè)印象，接下來我們來看源碼吧。

實(shí)例對象代理訪問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)容有點(diǎn)多我們從上往下依次來看，首先是這樣一段代碼：

let data = vm.$options.data
 data = vm._data = typeof data === 'function'
 ? getData(data, vm)
 : data || {}

我們知道在經(jīng)過選項(xiàng)合并后，data已經(jīng)變成一個(gè)函數(shù)了。那為何這里還有data是否是一個(gè)函數(shù)的判斷呢？這是因?yàn)閎eforeCreate生命周期是在mergeOptions函數(shù)之后initState函數(shù)之前調(diào)用的，mergeOptions函數(shù)就是處理選項(xiàng)合并的。如果用戶在beforeCreate中修改了vm.$options.data的值呢？那它就可能不是一個(gè)函數(shù)了，畢竟用戶的操作是不可控的，所以這里還是有必要判斷一下的。

正常情況下也就是data是一個(gè)函數(shù)，就會(huì)調(diào)用getData函數(shù)，并將data和Vue實(shí)例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í)該函數(shù)就是通過調(diào)用data獲取到數(shù)據(jù)對象并返回：data.call(vm, vm). 用try...catch包裹是為了捕獲可能出現(xiàn)的錯(cuò)誤，如果出錯(cuò)的話調(diào)用handleError函數(shù)并返回一個(gè)空對象。

函數(shù)的開頭和結(jié)尾分別調(diào)用了pushTarget和popTarget, 這是為了防止使用 props 數(shù)據(jù)初始化 data 數(shù)據(jù)時(shí)收集冗余的依賴。

再回到initData函數(shù)中，所以現(xiàn)在data和vm._data就是最終的數(shù)據(jù)對象了。

接下來是一個(gè)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是判斷是否是一個(gè)純對象的，如果data不是一個(gè)對象，在非生產(chǎn)環(huán)境下給出警告信息。

繼續(xù)往下看：

// proxy data on instance
// 獲取data對象的鍵
const keys = Object.keys(data)
// 獲取props，是個(gè)對象
const props = vm.$options.props
// 獲取methods，是個(gè)對象
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ù)用來檢測一個(gè)字符串是否以 $ 或者 _ 開頭，主要用來判斷一個(gè)字段的鍵名是否是保留的
  proxy(vm, `_data`, key)
 }
}
// observe data
observe(data, true /* asRootData */)

while中的兩個(gè)if條件判斷了props和methods中是否有和data對象相同的鍵，因?yàn)檫@三者中的屬性都可以通過實(shí)例對象代理訪問，如果相同就會(huì)出現(xiàn)沖突了。

const vm = new Vue({
 props: { a: { default: 2 } }
 data: { a: 1 },
 methods: {
  a () {
   console.log(3)
  }
 }
})

當(dāng)調(diào)用vm.a的時(shí)候，就會(huì)產(chǎn)生覆蓋現(xiàn)象。為了防止這種情況出現(xiàn)，就在這里做了判斷。

再看else if中的內(nèi)容，當(dāng)!isReserved(key)成立時(shí)，執(zhí)行proxy(vm,_data, key)。 isReserved函數(shù)的作用是判斷一個(gè)字符串是否以 $ 或者 _ 開頭, 因?yàn)閂ue內(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在實(shí)例對象vm上定義了與data數(shù)據(jù)字段相同的訪問器屬性，代理的值是vm._data上對應(yīng)的屬性值。當(dāng)訪問this.a時(shí)，實(shí)際訪問的是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ù)的定義，一點(diǎn)點(diǎn)來看

if (!isObject(value) || value instanceof VNode) {
 return
}

首先判斷如果數(shù)據(jù)不是一個(gè)對象或者是一個(gè)VNode實(shí)例，直接返回。

let ob: Observer | void

接著定義了ob變量，它是一個(gè)Observer實(shí)例，可以看到observe函數(shù)的最后返回了ob.

下面是一個(gè)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的實(shí)例。如果條件為真的話，就把value.__ob__的值賦給ob。

為什么會(huì)有這個(gè)判斷呢？每個(gè)數(shù)據(jù)對象被觀測后都會(huì)在該對象上定義一個(gè)__ob__屬性, 所以這個(gè)判斷是為了防止重復(fù)觀測一個(gè)對象。

接著是else if分支，這個(gè)條件判斷有點(diǎn)多，我們一個(gè)個(gè)來看。

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ù)接收一個(gè)參數(shù)，這個(gè)參數(shù)用來更新shouldObserve的值。shouldObserve為true時(shí)可以進(jìn)行觀測，為false時(shí)將不會(huì)進(jìn)行觀測。

!isServerRendering()必須為true

isServerRendering函數(shù)用來判斷是否是服務(wù)端渲染，只有當(dāng)不是服務(wù)端渲染的時(shí)候才會(huì)進(jìn)行觀測
(Array.isArray(value) || isPlainObject(value)) 必須為真

只有當(dāng)數(shù)據(jù)對象是數(shù)組或者純對象時(shí)才進(jìn)行觀測

Object.isExtensible(value)必須為true

被觀測的數(shù)據(jù)對象必須是可擴(kuò)展的, 普通對象默認(rèn)就是可擴(kuò)展當(dāng)。以下三個(gè)方法可以將對象變得不可擴(kuò)展：

Object.preventExtensions()、 Object.freeze()、Object.seal()

!value._isVue必須為真

Vue實(shí)例含有_isVue屬性，這個(gè)判斷是為了防止Vue實(shí)例被觀測

以上條件滿足之后，就會(huì)執(zhí)行代碼ob = new Observer(value)，創(chuàng)建一個(gè)Observer實(shí)例

Observer 構(gòu)造函數(shù)

Observer也定義在core/observer/index.js文件中，它是一個(gè)構(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開始，來看一下實(shí)例化Observer都做了什么。

__ob__ 屬性

constructor開始先初始化了幾個(gè)實(shí)例屬性

this.value = value
this.dep = new Dep()
this.vmCount = 0
def(value, '__ob__', this)

value就是實(shí)例化Observer時(shí)傳遞的參數(shù)，現(xiàn)在將它賦給了實(shí)例對象的value屬性。dep屬性指向?qū)嵗腄ep實(shí)例對象，它就是用來收集依賴的容器。vmCount屬性被初始化為0.

接著使用def函數(shù)為數(shù)據(jù)對象添加了__ob__屬性，它的值就是當(dāng)前Observer實(shí)例對象。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__屬性是要把它定義成不可枚舉的，這樣遍歷對象就不會(huì)遍歷到它了。

假設(shè)我們的數(shù)據(jù)對象是

data = {
 a: 1
}

添加__ob__屬性后變成

data = {
 a: 1,
 __ob__: {
  value: data, // data 數(shù)據(jù)對象本身
  dep: new Dep(), // Dep實(shí)例
  vmCount: 0
 }
}

處理純對象

接下來是一個(gè)if...else判斷, 來區(qū)分?jǐn)?shù)組和對象，因?yàn)閷?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)遍歷了對象的屬性，并對每個(gè)屬性都調(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實(shí)例，用來收集對應(yīng)字段的依賴。

接下來是這樣一段代碼：

const property = Object.getOwnPropertyDescriptor(obj, key)
if (property && property.configurable === false) {
 return
}

先通過Object.getOwnPropertyDescriptor獲取字段的屬性描述對象，再判斷該字段是否是可配置的，如果不可配置，直接返回。因?yàn)椴豢膳渲玫膶傩允遣荒芡ㄟ^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方法。如果這個(gè)屬性已經(jīng)是訪問器屬性了，那它就存在get或set方法了，下面的操作會(huì)使用Object.defineProperty重寫get和set方法，為了不影響原來的讀寫操作，就先緩存setter/getter。

接下來是一個(gè)if判斷，如果滿足條件的話，就讀取該屬性的值。

再下面是這樣一句代碼：

let childOb = !shallow && observe(val)

因?yàn)閷傩灾祐al也可能是一個(gè)對象，所以調(diào)用observe繼續(xù)觀測。但前面有一個(gè)條件，只有當(dāng)shallow為假時(shí)才會(huì)進(jìn)行深度觀測。shallow是defineReactive的第五個(gè)參數(shù)，我們在walk中調(diào)用該函數(shù)時(shí)并沒有傳遞該參數(shù)，所以這里它的值是undefined。!shallow的是true，所以這里會(huì)進(jìn)行深度觀測。

不進(jìn)行深度觀測的我們在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實(shí)例上定義屬性$attrs和$listeners時(shí)就是非深度觀測。

在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的值是誰呢？

如果我們有個(gè)數(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語句里面又一個(gè)if判斷：

if (Array.isArray(value)) {
 dependArray(value)
}

如果屬性值是數(shù)組，調(diào)用dependArray函數(shù)逐個(gè)觸發(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
}

首先也是獲取原來的屬性值。為什么有這一步呢？因?yàn)橐轮底霰容^，如果新舊值相等，就可以直接返回不用接下來的操作了。在if條件中，newVal === value這個(gè)我們都明白，那后面這個(gè)(newVal !== newVal && value !== value)條件是什么意思呢？

這是因?yàn)橐粋€(gè)特殊的值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的第四個(gè)參數(shù)，上面我們看initRender的時(shí)候有傳過這個(gè)參數(shù)：

defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, () => {
  !isUpdatingChildComponent && warn(`$attrs is readonly.`, vm)
}, true)

第四個(gè)參數(shù)是一個(gè)箭頭函數(shù)，當(dāng)修改vm.$attrs時(shí)，會(huì)打印警告信息$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()

如果新值也是一個(gè)數(shù)組或純對象的話，這個(gè)新值是未觀測的。所以在需要深度觀測的情況下，要調(diào)用observe對新值進(jìn)行觀測。最后調(diào)用dep.notify()觸發(fā)依賴。

處理數(shù)組

看完了純對象的處理，再來看一下數(shù)組是怎么轉(zhuǎn)換為響應(yīng)式的。數(shù)組有些方法會(huì)改變數(shù)組本身，我們稱之為變異方法，這些方法有：push pop shift unshift reverse sort splice，如何在調(diào)用這些方法的時(shí)候觸發(fā)依賴呢？看一下Vue的處理。

if (hasProto) {
 protoAugment(value, arrayMethods)
} else {
 copyAugment(value, arrayMethods, arrayKeys)
}
this.observeArray(value)

首先是一個(gè)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方法, 傳遞了兩個(gè)參數(shù)，一個(gè)是數(shù)組實(shí)例本身，一個(gè)是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ù)組實(shí)例的原型指向代理原型。這樣當(dāng)數(shù)組實(shí)例調(diào)用變異方法的時(shí)候就能先走代理原型重定義的方法。我們看一下arrayMethods的實(shí)現(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
 })
})

這是這個(gè)文件的全部內(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í)，數(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方法從第三個(gè)參數(shù)到最后一個(gè)參數(shù)都是要添加的新元素，所以inserted = args.slice(2)。最后，如果存在新添加的元素，調(diào)用observeArray函數(shù)對其進(jìn)行觀測。

以上是支持__proto__屬性的時(shí)候，那不支持的時(shí)候呢？調(diào)用copyAugment方法，并傳遞了三個(gè)參數(shù)。前兩個(gè)跟protoAugment方法的參數(shù)一樣，一個(gè)是數(shù)組實(shí)例本身，一個(gè)是arrayMethods代理原型，還有一個(gè)是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]) 
 }
}

這個(gè)方法的作用就是在數(shù)組實(shí)例上定義與變異方法同名的函數(shù)，從而實(shí)現(xiàn)攔截。

if else代碼之后，調(diào)用了observeArray方法this.observeArray(value), 并將數(shù)組實(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ù)組的每一項(xiàng)再進(jìn)行觀測。這是因?yàn)槿绻麛?shù)組元素是數(shù)組或純對象的話不進(jìn)行這一步數(shù)組元素就不是響應(yīng)式的，這是為了實(shí)現(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) 的實(shí)現(xiàn)

我們知道，為對象或數(shù)組直接添加或刪除元素Vue是攔截不到的。我們需要使用Vue.set、Vue.delete去解決，Vue還在實(shí)例對象上定義了$set $delete方便我們使用。其實(shí)不管是實(shí)例方法還是全局方法它們的指向都是一樣的。我們來看以下它們的定義。

$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ù)體，顯示這個(gè)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'
 )
}

判斷變量是否是原始類型。

所以這個(gè)if語句的作用就是，如果target是undefined或者null或者它的類型是原始類型，在非生產(chǎn)環(huán)境下打印警告信息。
再看下一個(gè)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是一個(gè)數(shù)組，并且key是一個(gè)有效的數(shù)組索引，就執(zhí)行if語句塊內(nèi)的代碼

我們知道splice變異方法是可以觸發(fā)響應(yīng)的，target.splice(key, 1, val) 就利用了替換元素的能力，將指定位置元素的值替換為新值。所以數(shù)組就是利用splice添加元素的。另外，當(dāng)要設(shè)置的元素的索引大于數(shù)組長度時(shí) splice 無效，所以target的length取兩者中的最大值。

if (key in target && !(key in Object.prototype)) {
 target[key] = val
 return val
}

這個(gè)if條件的意思是該屬性已經(jīng)在target對象上有定義了，那么只要重新設(shè)置它的值就行了。因?yàn)樵诩儗ο笾?，已?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屬性說明這是一個(gè)Vue實(shí)例‘

(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í)候傳遞了第二個(gè)參數(shù)：

function initData (vm: Component) {
 ...

 // observe data
 observe(data, true /* asRootData */)
}

在initData中調(diào)用observe的時(shí)候傳遞了第二個(gè)參數(shù)為true，那根數(shù)據(jù)對象也就是data。也就是說當(dāng)使用 Vue.set/$set 函數(shù)為根數(shù)據(jù)對象添加屬性時(shí)，是不被允許的。

所以當(dāng)target是Vue實(shí)例或者是根數(shù)據(jù)對象時(shí)，在非生產(chǎn)環(huán)境會(huì)打印警告信息。

if (!ob) {
  target[key] = val
  return val
}

當(dāng)!ob為true時(shí)，說明不存在__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)}`)
}

這個(gè)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ù)組索引值時(shí)，也是使用splice來進(jìn)行刪除操作，因?yàn)樵撟儺惙椒梢杂|發(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í)例或者是根數(shù)據(jù)對象，在非生產(chǎn)環(huán)境下打印警告信息。也就是不能刪除Vue實(shí)例對象的屬性，也不能刪除根數(shù)據(jù)對象的屬性，因?yàn)閐ata本身不是響應(yīng)式的。

if (!hasOwn(target, key)) {
  return
}

如果target對象上沒有key屬性，直接返回。

delete target[key]

進(jìn)行到這里就說明target是一個(gè)純對象，并且有key屬性，直接刪除該屬性。

if (!ob) {
  return
}

如果ob對象不存在，說明target不是響應(yīng)式的，直接返回。

ob.dep.notify()

如果ob對象存在，說明target是響應(yīng)式的，觸發(fā)響應(yīng)。

以上是“Vue源碼解析之?dāng)?shù)據(jù)響應(yīng)系統(tǒng)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！