实现mini-vue之 computed，watch ，数组响应式的实现

computed

续上文—：有关vue源码的简单实现 实现一个属于自己的min-vue

本文实现：

1. computed
2. watch
3. array的深度响应式劫持
4. 重写了数组的7个变异方法
5. 对于数组元素还是数组的也能劫持
   计算属性：

计算属性：依赖的值发生改变 才会重新执行用户的方法 计算属性需要维护一个dirty属性。而且在默认情况下，计算属性不会立刻执行，而是在用户取值的时候才会执行。

计算属性使用的两种方式：

computed: {
   
    /**
      * 计算属性：依赖的值发生改变 才会重新执行用户的方法 计算属性需要维护一个dirty属性
      */
    // 只有get的计算属性
    fullName1() {
   
        return this.firstName + " " + this.lastName
    },
        // getter and setter
        fullName2: {
   
            get() {
   
                return this.firstName + " " + this.lastName
            },
                set(newVal) {
   
                    [this.firstName, this.lastName] = newVal.split(" ")
                }
        }
}

特点：

1. 计算属性本身就是一个defineProperty，响应式数据
2. 计算属性也是一个Watcher，默认渲染会创造一个渲染watcher
3. 如果watcher中有lazy属性，表明这是一个计算属性watcher
4. 计算属性维护了一个dirty，当我们直接修改计算属性的值，或者修改了计算属性依赖的值，那么计算属性自己的值并不会直接发生改变，而是使dirty的值发生改变。
5. 当dirty为false的时候，表示依赖的值没有发生改变，不需要再次计算，直接使用上次缓存的值即可。
6. 计算属性自身不会收集依赖，而是让计算属性依赖的属性去收集依赖（watcher）

/**
 * 初始化 computed
 * @param {Vue} vm 实例
 */
function initComputed(vm) {
   
  const computed = vm.$options.computed;
  const watchers = (vm._computedWatchers = {
   });
  for (const key in computed) {
   
    const userDef = computed[key];
    // function -> get
    // object -> {get(){}, set(newVal){}}
    let setter;
    const getter = isFunction(userDef)
      ? userDef
      : ((setter = userDef.set), getter);
    // 监控计算属性中 get的变化
    // 每次data的属性发生改变 重新执行的就是这个get
    // 传入额外的配置项 标明当前的函数 不需要立刻执行 只有在使用到计算属性了 才计算值
    // 把属性和watcher对应起来
    watchers[key] = new Watcher(vm, getter, {
    lazy: true });
    // 劫持每一个计算属性
    de