Vue watch props 坑

[xingbofeng]

watch父组件传给子组件的props，在子组件创建时并不会触发一次watch？

必须设定watch的immediate为true，见源码：

  Vue.prototype.$watch = function (
    expOrFn: string | Function,
    cb: any,
    options?: Object
  ): Function {
    const vm: Component = this
    if (isPlainObject(cb)) {
      return createWatcher(vm, expOrFn, cb, options)
    }
    options = options || {}
    options.user = true
    const watcher = new Watcher(vm, expOrFn, cb, options)
    if (options.immediate) {
      cb.call(vm, watcher.value)
    }
    return function unwatchFn () {
      watcher.teardown()
    }
  }
}

可以看到，如果设定watch的immediate为true，则会立即调用一次cb，在组件创建，即new Vue()调用的时候，就会执行一次watcher的callback。new Watcher的过程则是Vue进行收集依赖的过程，绑定组件与组件之间的状态，依赖状态一旦改变，触发setter，在watcher中去调用对应的callback。