vue 中 数组劫持

vue中对象劫持：

Object.defineProperty(obj, prop, descriptor)

1 obj：必需。目标对象
2 prop：必需。需定义或修改的属性的名字
3 descriptor：必需。目标属性所拥有的特性

这个介绍的比较多，就不展开了。

vue中数组劫持：劫持push方法

let state = [1, 2, 3]; // 变成响应式数据
let originalArray = Array.prototype; // 数组原来的方法
let arrayMethods = Object.create(originalArray); // 复制一个跟原来一样的对象

function defineReactive(obj) {
    // 函数劫持
    arrayMethods.push = function (...args) {
        originalArray.push.call(this, ...args);
        render(); // 重新渲染
    }
    obj.__proto__ = arrayMethods;
}

defineReactive(state);  // 调用函数劫持

// 插入到页面的功能 需要保存起来
function render() {
    app.innerHTML = state;
}

render();
// 执行push操作
state.push(5);

主要劫持以下7种：

let methodsToPatch = [
  'push',
  'pop',
  'unshift',
  'shift',
  'sort',
  'splice',
  'reverse'
]