Options

Watch

• 渲染 watcher
• 计算属性 watcher

<p>{{ fullName }}</p>

new Vue({
  computed: {
    fullName: {
      get() {
        return this.firstName + " " + this.lastName;
      },
      set(newValue) {
        this.firstName = newValue;
      },
    },
  },
});

• 当在页面直接写 fullName 时，fullName 不会去收集渲染 watcher。因为 fullName 没有 dep，没有收集的功能
• firstName 是在计算属性中用的，所以它会收集计算属性 watcher，没有收集渲染 watcher
• 计算属性的值应该同时记录 计算属性 watcher 和渲染 watcher
• 通过 Dep.target 上赋值一个渲染 watcher，又将 Dep.target 设置为计算属性 watcher

Computed

计算属性的本质就是 watcher

• 计算属性默认不执行 => Object.defineProperty ==> getter
• 多次取值如果依赖的值不变化，就不会重新执行
• 依赖的值变化，需要重新执行
• dirty 默认是 true，表示需要调用 getter

this.dirty = this.lazy;