1.4 对数组进行数据劫持

对数组数据进行数据劫持 Observer，arrayMethods

如果value是数组，不需要用walk的方式对数组的索引进行劫持，只需要对数组里的{}元素做劫持，因此用observerArray单独处理

当数组里面的值发生改变的时候，要对新增或替换的数据进行劫持，这就需要我们在arrayMethods里重写以下7个方法：push，shift，unshift，pop，reverse，splice，sort

这七个方法会改变数组本身，其他方法不会改变自身就不需要重写；

Object.create()，修改原型链???先用我们重写的方法：

let oldArrayMethods = Array.prototype;
// value.__proto__ = arrayMethods 原型链查找的问题， 会向上查找，先查找我重写的，重写的没有会继续向上查找
// arrayMethods.__proto__ = oldArrayMethods
export const arrayMethods = Object.create(oldArrayMethods);

push、shift、splice这三个方法会引入新的值，还需要再单独处理。

switch (method) {
  case 'push':
  case 'unshift':
      inserted = args;
      break;
  case 'splice': // 3个  新增的属性 splice 有删除 新增的的功能 arr.splice(0,1,{name:1})
      inserted = args.slice(2)
  default:
      break;
}

utils里的工具方法：

定义一个不可枚举的属性，这样就不会被遍历到：

// value.__ob__ = this; // 我给每一个监控过的对象都增加一个__ob__属性
def(value,'__ob__',this); 

export function def(data,key,value){
  Object.defineProperty(data,key,{
    enumerable:false,
    configurable:false,
    value
  })
}

完整代码如下所示：

observer/array.js

// 我要重写数组的那些方法 7个 push shift unshift pop reverse sort splice 会导致数组本身发生变化

let oldArrayMethods = Array.prototype;
// value.__proto__ = arrayMethods 原型链查找的问题， 会向上查找，先查找我重写的，重写的没有会继续向上查找
// arrayMethods.__proto__ = oldArrayMethods
export const arrayMethods = Object.create(oldArrayMethods);

const methods = [
  'push',
  'shift',
  'unshift',
  'pop',
  'sort',
  'splice',
  'reverse'
];
methods.forEach((method) => {
  arrayMethods[method] = function (...args) {
    const result = oldArrayMethods[method].apply(this, args); // 调用原生的数组方法
    // push unshift 添加的元素可能还是一个对象
    let inserted; // 当前用户插入的元素
    let ob = this.__ob__;
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args;
        break;
      case 'splice': // 3个  新增的属性 splice 有删除 新增的的功能 arr.splice(0,1,{name:1})
        inserted = args.slice(2);
      default:
        break;
    }
    if (inserted) ob.observerArray(inserted); // 将新增属性继续观测

    return result;
  };
});

observer/index.js

// 把data中的数据 都使用Object.defineProperty重新定义 es5
// Object.defineProperty 不能兼容ie8 及以下 vue2 无法兼容ie8版本
import { arrayMethods } from './array.js';
import { isObject, def } from '../util/index';
// 后续我可以知道它是不是一个已经观察了的数据 __ob__
class Observer {
  constructor(value) {
    // 仅仅是初始化的操作
    // vue如果数据的层次过多 需要递归的去解析对象中的属性，依次增加set和get方法
    // value.__ob__ = this; // 我给每一个监控过的对象都增加一个__ob__属性
    def(value, '__ob__', this); // 代替上面,避免遍历到__ob__属性,造成死循环

    // 对数组监控
    if (Array.isArray(value)) {
      // 如果是数组的话并不会对索引进行观测 因为会导致性能问题
      // 前端开发中很少很少 去操作索引 push shift unshift
      value.__proto__ = arrayMethods;
      // 如果数组里放的是对象我再监控
      this.observerArray(value);
    } else {
      this.walk(value); // 对对象进行观测
    }
  }

  // 对数组进行观测 [{}] 处理数组中的子元素  
  observerArray(value) {
    for (let i = 0; i < value.length; i++) {
      observe(value[i]);
    }
  }

  // 对对象进行观测
  walk(data) {
    let keys = Object.keys(data); // [name,age,address]
    // 如果这个data 不可配置 直接reurn
    keys.forEach((key) => {
      defineReactive(data, key, data[key]);
    });
  }
}
function defineReactive(data, key, value) {
  observe(value); // 递归实现深度检测
  Object.defineProperty(data, key, {
    configurable: true,
    enumerable: false,
    get() {   //  获取值的时候做一些操作
      return value;
    },
    set(newValue) { // 也可以做一些操作
      if (newValue === value) return;
      observe(newValue); // 继续劫持用户设置的值，因为有可能用户设置的值是一个对象
      value = newValue;
    }
  });
}

export function observe(data) {
  let isObj = isObject(data);
  if (!isObj) {
    return;
  }
  return new Observer(data); // 用来观测数据
}