0. 解決方案
1.當你利用索引直接設(shè)置一個項時，例如：vm.items[indexOfItem] = newValue
2.當你修改數(shù)組的長度時奋岁，例如：vm.items.length = newLength
對于第一種情況阿宅，可以使用：Vue.set(example1.items, indexOfItem, newValue)缀辩；而對于第二種情況势告，可以使用 vm.items.splice(newLength)没佑。
-----------------------原理淺析----------------------------分割線--
1.demo
我們實際中會用到的場景
初始化的時候arr定義的是:[]
源碼中簡化的原理鸵赖，初始化的時候執(zhí)行如下邏輯:
data = {arr: []}
val = []
Object.defineProperty(data, 'arr', {
enumerable: true,
configurable: true,
get: function () {
console.log('你獲取數(shù)組')
return val
},
set: function(value) {
console.log('你更新數(shù)組畏吓，我檢測到了')
val = value
}
})
data.arr.forEach((v,i, array) => {
var value = v
Object.defineProperty(array, i, {
enumerable: true,
configurable: true,
get: function () {
console.log(`你在訪問arr${i}`)
return v
},
set: function(newVal) {
console.log(`你在更新arr${i}，我檢測到了`)
v = newVal
}
})
})
chrome中測試如下:
data.arr
VM485:7 你獲取數(shù)組
[]
VM485:7 你獲取數(shù)組
data.arr[1]
VM485:7 你獲取數(shù)組
undefined
VM485:7 你獲取數(shù)組
data.arr = [1,2,3]
VM485:11 你更新數(shù)組卫漫，我檢測到了
(3) [1, 2, 3]
VM485:7 你獲取數(shù)組
data.arr[1]
VM485:7 你獲取數(shù)組
2
data.arr[1] = 'new'
VM485:7 你獲取數(shù)組
"new"
VM485:7 你獲取數(shù)組
data.arr[2] = 'new2'
VM485:7 你獲取數(shù)組
"new2"
2VM485:7 你獲取數(shù)組
data.arr[1]
VM485:7 你獲取數(shù)組
"new"
VM485:7 你獲取數(shù)組
data.arr[3]
VM485:7 你獲取數(shù)組
undefined
data.arr[3]
VM485:7 你獲取數(shù)組
undefined
VM485:7 你獲取數(shù)組
data.arr.length = 100
VM485:7 你獲取數(shù)組
可以發(fā)現(xiàn)當data.arr初始值為[],你直接改變data.arr的值是可以觸發(fā)更新的,但是通過data.arr[index] = newVal的方式無法檢測到變化,并且你直接通過
splice等方法改變數(shù)組長度的方法都沒有辦法檢測到更新
data.arr.splice(0,1,'fake')
VM485:7 你獲取數(shù)組
[1]
data.arr
VM485:7 你獲取數(shù)組
(100) ["fake", "new", "new2", empty × 97],
2.vue中的處理
1.當你利用索引直接設(shè)置一個項時菲饼，例如：vm.items[indexOfItem] = newValue
2.當你修改數(shù)組的長度時，例如：vm.items.length = newLength
對于第一種情況列赎，可以使用：Vue.set(example1.items, indexOfItem, newValue)宏悦；而對于第二種情況，可以使用 vm.items.splice(newLength)包吝。
其實通過splice的方式饼煞，在vue中是可以檢測到更新的
為什么呢?
看一下源碼:
// vue-dev\src\core\util\lang.js
def (obj, key,val,enumerable) {
Object.defineProperty(obj, key, {
value: val,
enumerable: !!enumerable,
writable: true,
configurable: true
})
}
// src/core/observer/array.js
const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)
const methodsToPatch = [
'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse'
]
// 改造了列舉的數(shù)組方法
methodsToPatch.forEach(function (method) {
// cache original method
// 以push為例
const original = arrayProto[method] // Array.prototype.push
// def(arrayMethods,'push', function() {}) -> arrayMethods.push = function () {} 改造了push方法
def(arrayMethods, method, function mutator (...args) {
const result = original.apply(this, args) // this為data.arr
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()// 派發(fā)更新了
return result
})
})
把data.arr.__proto __ = arrayMethods
當我執(zhí)行data.arr.push(xxx)的時候就會派發(fā)更新了，自然更新了視圖
