## 前言 本文主要是摘錄《vuejs權威指南》部分的相關解讀，我們都知道vue對數據支持雙向綁定，對數組也是支持的，但是其在官網有明確說明，對于數組通過 對象`. `語法來修改其值得是無法監聽到的，可以通過this.$set方法來實現。另外其也推薦了一系列的數組可監聽到的方法能夠支持雙向綁定。 那么本文就從源碼角度去幫大家理解分析為什么是這樣的。 ## 定位源碼位置 - [數組中支持數據綁定源碼](https://github.com/vuejs/vue/blob/dev/src/core/observer/array.js) ## 分析源碼內容 我們將源碼復制粘貼下來進行逐行分析：好在這個文件并不是特別復雜。 ~~~ /* * not type checking this file because flow doesn't play well with * dynamically accessing methods on Array prototype */ 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 }) }) ~~~ ## 分析結果 首先我們可以看到官網提到的支持數組雙向綁定方法的全部都是因為在vuejs源碼中進行了方法的重定義，將Array原型鏈中的每個方法進行了監聽，當其方法執行時，會對其對象進行通知，并返回其正確的結果。并且針對一些特殊的unshift，splice改變了insert字段，增加監聽。 ## 關于$set ,$remove 其原理只是vue寫的語法糖，這里只拿set方法的源碼進行分析查看： 這里可以看到當對象是數組的時候，其set方法是利用數組的splice方法進行數據更改，同時也增加了對新增內容的監聽。 ~~~ /** * Set a property on an object. Adds the new property and * triggers change notification if the property doesn't * already exist. */ export function set (target: Array<any> | Object, key: any, val: any): any { if (process.env.NODE_ENV !== 'production' && (isUndef(target) || isPrimitive(target)) ) { warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`) } if (Array.isArray(target) && isValidArrayIndex(key)) { target.length = Math.max(target.length, key) target.splice(key, 1, val) return val } if (key in target && !(key in Object.prototype)) { target[key] = val return val } 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 } if (!ob) { target[key] = val return val } defineReactive(ob.value, key, val) ob.dep.notify() return val } ~~~ 那么我們也可以簡化的理解為源碼是這樣的： ~~~ def{arrayProto,'$set',function $set (index,val){ if(index>=this.length){this.length=Number(index)+1} return this.splice(index,1,val)[0] } } ~~~ ~~~ def{arrayProto,'$remove',function $remove (item){ if(!this.length) return var index = indexOf(this,item) if(index>-1){ return this.splice(index,1) } } ~~~ ## 總結 關于數組中對數據的雙向綁定監聽就分析到這里了，希望你能進一步vue是如何對數組進行相應的監聽和綁定，以及綁定了哪些方法，對于不支持的方法如何進行變通。 **拓展：** 也希望大家通過本文進一步了解原型鏈，監聽，this的相關概念和數組的基礎知識，比如數組中刪除某個元素使用splice.