数组的响应式原理

1.vue改写数组的七个方法：push、pop、shift、unshif、splice、sort、reverse
vue的数组响应式原理是以Array.prototype为原型,创建一个arrayMethods对象，使用es6的Object.setPrototypeOf强行将数组的__proto__指向arrayMethods

具体的代码

import { def } from "./utils";

// 获取Array.prototype里面的七个属性
const arrayProtoType = Array.prototype

console.log(arrayProtoType)
// 以Array.prototype为原型创建同一个arrayMethods对象
export const arrayMethods= Object.create(arrayProtoType)
const methodsNeedChange=[
    'push',
    'pop',
    'shift',
    'unshift',
    'splice',
    'sort',
    'reverse'
];
methodsNeedChange.forEach(methodsName=>{
    // 备份原来的方法
    const original =arrayProtoType[methodsName]
    // 定义新的方法，给arrayMethods这个对象添加七个方法属性
    def(arrayMethods,methodsName,function(){
        original.apply(this,arguments)
        console.log('调用数组的七个方法之一');
    },false)
})

判断是不是数组，数组就指向新创建的arrayMethods对象，是对象的话就直接递归侦测 有三个方法是需要重新改写的，push,unshift,splice
在observer里面需要对数组进行遍历，后续将新增的变为响应式
找到数组的__ob__.observeArray,判断是不是这三个方法，是的话就将其变为响应式

注意：若数组里面的数据不是增删改查，只想监听数组里面的数据变化，需要this.$set(改变的数组，数组的index项，改变的值)这样就可以变成响应式的数组，监听到变化。