接下來重點(diǎn)來看Vue的數(shù)據(jù)響應(yīng)系統(tǒng)。我看很多文章在講數(shù)據(jù)響應(yīng)的時(shí)候先用一個(gè)簡單的例子介紹了數(shù)據(jù)雙向綁定的思路，然后再看源碼。這里也借鑒了這種方式，感覺這樣的確更有利于理解。

數(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ò)展。可是如何擴(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)?code>beforeCreate生命周期是在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)。