computed watch 实现上的区别？

在说明不同之前首先需要区分一下 computed 的两个 getter 函数。第一个 getter 就是通过 Object.defineProperty 设置的 getter 函数，我们暂且称呼为 自身 getter 函数吧，这是 computed watcher 独有的 getter 函数。第二个是 Watcher 类中保存的 getter 函数我们称只为 watcher getter 函数 ，这个函数就是在 option 中定义 computed 时写的那个函数，或者对于 watch 来说只是一个访问了一下监听属性的函数。

现在我们现在有如下两个概念：

自身 getter 函数：computed 独有
watcher getter 函数：computed watch 都有

所以 computed watch 的不同有如下三点：

computed 与 watch 第一个不同是 computed 本身会经过 Object.defineProperty 设置 get / set 函数（在 defineComputed 函数中），这个自身 getter 函数做两件事
- watcher.depend() ：computed watcher 收集依赖
- watcher.evaluate()：返回 computed 的值
第二个不同就是 computed watcher 有自身的 dep，而 user watcher 没有。这个很好理解，computed 经过了 Object.defineProperty 设置 get ，当然应该有 dep 收集依赖了。
第三个不同是 computed watch 默认是 lazy 模式，new Watcher 时不会立即取值，而是在自身 getter 函数触发是才取，后续只有在 computed watcher 的依赖变化时，才会重新取值。而 user watcher 在初始化时就会执行一次 watcher getter 函数 ，访问监听的属性，触发监听属性的收集依赖过程。

简化的 computed 主要代码实现

const options = {
  data() {
    return {
      a: 1,
      b: 2,
    };
  },
  computed: {
    foo() {
      return this.a + this.b;
    }
  }
}

function initComputed(vm) {
  const computed = vm.computed;
  const keys = Object.keys(computed);
  const computedWatcherOpts = { computed: true };
  options._computedWatchers = [];

  for(let key in keys) {
    vm._computedWatchers[key] = new Watcher(vm, computed[key], computedWatcherOpts)
    defineComputed(vm, key);
  }
}

function defineComputed(vm, key) {
  Object.defineProperty(vm, key, {
    get: () => {
      const watcher = vm._computedWatchers[key];
      if (watcher) {
        watcher.dep.depend();
        return watcher.evaluate();
      }
    },
    set(){},
  })
}

class Watcher{
  constructor(vm, get, options) {
    this.getter = get;
    this.computed = this.dirty = !!options.computed;
    if (this.computed) {
      this.value = undefined;
      this.dep = new Deps();
    }
  }

  get() {
    pushTarget(this);
    try{
      this.value = this.getter();
    } catch (e) {
      console.log(e);
    } finally {
      popTarget();
    }
    return this.value;
  }

  update() {
    const value = this.get();
    const oldValue = this.value;
    if (value !== oldValue) {
      this.value = value;
      this.dep.notify();
    }
  }

  evaluate() {
     if (this.dirty) {
       this.value = this.get();
       this.dirty = false;
     }
     return this.value;
  }
}

initComputed(options);

简化的 watch 主要代码实现

const options = {
  data() {
    return {
      a: 1,
      b: 2,
    };
  },
  watch: {
    a(val, oldVal) {
      console.log('a has change', val, oldVal);
    }
  }
}

function initWatch(vm) {
  const watch = vm.watch;
  const keys = Object.keys(watch);

  for(let key in keys){
    createdWatch(vm, watch, key);
  }
}

function createWatcher(vm, watch, key) {
  const userWatcherOpts = { user: true, cb: watch[key] };
  const watcher = new Watcher(vm, key, userWatcherOpts);
}

function parsePath(path, vm) {
  const segments = path.split('.');
  const result = segments.reduce((acc, val) => {
    try {
      acc[val] && (acc = acc[val]);
    } finally {
      return acc;
    }
  }, vm);
  return result;
}

class Watcher{
  constructor(vm, get, options) {
    if (typeof get === 'Function') {
      this.getter = get;
    } else {
      this.getter = parsePath(get, vm);
    }
    this.user = !!options.user;
    this.cb = options.cb;
    this.computed = this.dirty = !!options.computed;
    if (this.computed) {
      this.value = undefined;
      this.dep = new Deps();
    } else {
      this.value = this.get();
    }
  }

  get() {
    pushTarget(this);
    try{
      this.value = this.getter();
    } catch (e) {
      console.log(e);
    } finally {
      popTarget();
    }
    return this.value;
  }

  update() {
    const value = this.get();
    const oldValue = this.value;
    if (value !== oldValue) {
      this.value = value;
      if (this.user) {
        this.cb(value, oldValue);
      } else if (this.compued) {
        this.dep.notify();
      }

    }
  }

  evaluate() {
     if (this.dirty) {
       this.value = this.get();
       this.dirty = false;
     }
     return this.value;
  }
}

initWatch(options)

theydy / notebook

computed watch 实现上的区别？ #24