VUE对数组的劫持操作

<div id="app"></div>
  <script type="text/javascript">
    let state = [1, 2, 3]; // 初始化数据
    let originalArray = Array.prototype; 
    let arrayMethods = Object.create(originalArray); // 创建一个数组的原型对象
    
    function defineReactive(obj) {   // 函数劫持
      arrayMethods.unshift= function(...args) {
      alert('劫持到了有人调用新修改的数组unshift方法，所以现在用户在修改array数据')
        originalArray.unshift.call(this, ...args);
        render(); // 重新渲染view
      }
      obj.__proto__ = arrayMethods;
    }
    defineReactive(state); // 调用函数劫持
  
	render(); //初始化页面时先渲染一下view，以便做对比
    function render() { // 渲染vaule
      app.innerHTML = state;
    }

    // 执行shift操作  异步修改数据 看是否监听到
    setTimeout(function(){
      state.unshift(1);
    },2000)
setTimeout(function(){
      state.unshift(2);
    },2000)
  </script>