Vue中computed和watch的区别

 data() {
    return {
      num1: 1,
      num2: 2
    };
  },
  computed: {
    total() {
      return this.num1 * this.num2;
    }
  }

const computedWatcherOptions = { lazy: true }

// vm: 组件实例 computed 组件内的 计算属性对象
function initComputed (vm: Component, computed: Object) {
  // 遍历所有的计算属性
  for (const key in computed) {
    // 用户定义的 computed
    const userDef = computed[key]
    const getter = typeof userDef === 'function' ? userDef : userDef.get

    watchers[key] = new Watcher( 
      vm,
      getter || noop,
      noop,
      computedWatcherOptions
    )
 
  defineComputed(vm, key, userDef)
}

function computedGetter () {
    // 拿到 上述 创建的 watcher 实例
    const watcher = this._computedWatchers && this._computedWatchers[key]
    if (watcher) {
      // 首次执行的时候 dirty 基于 lazy 所以是true
      if (watcher.dirty) {
        // 这个方法会执行一次计算
        // dirty 设置为 false
        // 这个函数执行完毕后, 当前 计算watcher就会推出
        watcher.evaluate()
      }
      // 如果当前激活的渲染watcher存在
      if (Dep.target) {
        /**
         * evaluate后求值的同时, 如果当前 渲染watcher 存在,
         * 则通知当前的收集了 计算watcher 的 dep 收集当前的 渲染watcher
         *
         *    为什么要这么做?
         * 假设这个计算属性是在模板中被使用的, 并且渲染watcher没有被对应的dep收集
         * 那派发更新的时候, 计算属性依赖的值发生改变, 而当前渲染watcher不被更新
         * 就会出现, 页面中的计算属性值没有发生改变的情况.
         *
         * 本质上计算属性所依赖的dep, 也可以看做这个属性值本身的dep实例.
         */
        watcher.depend()
      }
      return watcher.value
    }
  }

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

set: function reactiveSetter (newVal) {
  const value = getter ? getter.call(obj) : val
  
  if (newVal === value || (newVal !== newVal && value !== value)) {
    return
  }

  // 通知它的订阅者更新
  dep.notify()
}

update () {
    /* istanbul ignore else */
    if (this.lazy) {
      // 假设当前 发布者 通知 值被重新 set
      // 则把 dirty 设置为 true 当computed 被使用的时候 就可以重新调用计算
      // 渲染wacher 执行完毕 堆出后, 会轮到当前的渲染watcher执行update
      // 此时就会去执行queueWatcher(this), 再重新执行 组件渲染时候
      // 会用到计算属性, 在这时因为 dirty 为 true 所以能重新求值
      // dirty就像一个阀门, 用于判断是否应该重新计算
      this.dirty = true
    }
  }

function computedGetter () {
    // 拿到 上述 创建的 watcher 实例
    const watcher = this._computedWatchers && this._computedWatchers[key]
    if (watcher) {
      // 首次执行的时候 dirty 基于 lazy 所以是true
      if (watcher.dirty) {
        // 这个方法会执行一次计算
        // dirty 设置为 false
        // 这个函数执行完毕后, 当前 计算watcher就会推出
        watcher.evaluate()
      }
      // 如果当前激活的渲染watcher存在
      if (Dep.target) {
        /**
         * evaluate后求值的同时, 如果当前 渲染watcher 存在,
         * 则通知当前的收集了 计算watcher 的 dep 收集当前的 渲染watcher
         *
         *    为什么要这么做?
         * 假设这个计算属性是在模板中被使用的, 并且渲染watcher没有被对应的dep收集
         * 那派发更新的时候, 计算属性依赖的值发生改变, 而当前渲染watcher不被更新
         * 就会出现, 页面中的计算属性值没有发生改变的情况.
         *
         * 本质上计算属性所依赖的dep, 也可以看做这个属性值本身的dep实例.
         */
        watcher.depend()
      }
      return watcher.value
    }
  }

data() {
    return {
        total:99
    }
},
watch: {
    count: {
        hanlder(){
            console.log('total改变了')
        }
    }
}

// src/core/instance/state.js
function initWatch (vm: Component, watch: Object) {
  // 遍历我们定义的wathcer
  for (const key in watch) {
    const handler = watch[key]
    if (Array.isArray(handler)) {
      for (let i = 0; i < handler.length; i++) {
        createWatcher(vm, key, handler[i])
      }
    } else {
      createWatcher(vm, key, handler)
    }
  }
}

function createWatcher (
  vm: Component,
  expOrFn: string | Function,
  handler: any,
  options?: Object
) {
  if (isPlainObject(handler)) {
    options = handler
    handler = handler.handler
  }
  if (typeof handler === 'string') {
    handler = vm[handler]
  }
  return vm.$watch(expOrFn, handler, options)
}

Vue.prototype.$watch = function (
    expOrFn: string | Function, // 这个可以是 key
    cb: any, // 待执行的函数
    options?: Object // 一些配置
  ): Function {
    const vm: Component = this
    // 创建一个 watcher 此时的 expOrFn 是监听对象
    const watcher = new Watcher(vm, expOrFn, cb, options)
    
    return function unwatchFn () {
      watcher.teardown()
    }
  }

Vue.prototype.$watch = function (
    expOrFn: string | Function, 
    cb: any,
    options?: Object
  )

if (typeof expOrFn === 'function') {
  this.getter = expOrFn
} else {
  // 如果是一个字符则转为一个 一个 getter 函数
  // 这里这么做是为了通过 this.[watcherKey] 的形式
  // 能够触发 被监听属性的 依赖收集
  this.getter = parsePath(expOrFn)
  if (!this.getter) {
    this.getter = noop
    process.env.NODE_ENV !== 'production' && warn(
      `Failed watching path: "${expOrFn}" ` +
      'Watcher only accepts simple dot-delimited paths. ' +
      'For full control, use a function instead.',
      vm
    )
  }
}
this.value = this.lazy
  ? undefined
  : this.get()