模拟vue实现将数组中的数据变成响应式的

477

当在控制台动态改变 app.data 里面的数据,此时 app.data 中被改变的数据不是响应式的 为了实现vue源码中的效果,做了下面的操作

思路: 原型式继承 =》修改原型链结构
继承关系: arr -> Array.property -> Object.property
arr -> 改写的方法 -> Array.property -> Object.property

/**
   给一个已经定义的函数增加新的功能?
       1、使用一个临时的函数名,存储函数
       2、重新定义原来的函数
       3、定义扩展的功能
       4、调用临时的哪个函数
*/
   
let ARRAY_METHODS = ['push','pop','shift','unshift','reverse','sort','splice'];
let arr = [];
// 1
let array_methods = Object.create(Array.prototype); // 方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__
ARRAY_METHODS.forEach(methods => {
   // 2
   array_methods[methods] = function() {
   	return Array.prototype[methods].apply(this,arguments); // this指当前对象,也就是正在调用函数的对象
   }
})
// console.log(array_methods,arr.__proto__);
   arr.__proto__ = array_methods;