vue watch监听computed属性?

1.为什么初始化会执行computFn
2.为什么点击按钮会执行computFn和watch

找到答案了...
1.为watch中的computFn创建实例化用户watcher的时候,访问到了computed中的computFn执行了computedGetter,首次watcher.dirty为true执行了watcher.evaluate,所以初始化会执行computFn,并且给num添加了计算watcher和用户watcher。
42566a19fb071c4d60c608b2443ee9a.png
aaca3fbbf3371838e33c34526a0b164.png

2.点击按钮改变num的值,通知订阅者们进行更新,先将watcher的dirty置为true,然后因为执行this.get,所以执行了computed的computFn;执行this.cb.call其实就是在执行watch的computFn
image.png
image.png

阅读 2.6k
2 个回答

初始化时,因为你 watchcomputFn 所以会去计算 就会执行 computFn
当你点击按钮之后 num 改变,computFn 就会变 watch 当然会执行了。

首先、watchcomputed 属性有相同之处,都可以监听数据;

所以你点击 fn 的时候,改变了 num 变量;而 computFn 监听了 num 变量,故而会做出响应。

然后因为 watch 又监听了 computFn ,所以当其发生变化时,watch 也作出响应。

另外你说为啥初始化也会执行 computed,是在vue的state初始化内执行的,整个state的初始化是介于 beforeCreatecreated 之间的。

// init => Location: src/core/instance/init.ts
Vue.prototype._init = () => {
    // ...
    initLifecycle(vm)
    initEvents(vm)
    initRender(vm)
    callHook(vm, 'beforeCreate', undefined, false /* setContext */)
    initInjections(vm) // resolve injections before data/props
    initState(vm)    // 这里是初始化状态
    initProvide(vm) // resolve provide after data/props
    callHook(vm, 'created')
    // ...
}

// initState的函数实现 => Location:src/core/instance/state.ts
export function initState(vm: Component) {
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)

  // Composition API
  initSetup(vm)

  if (opts.methods) initMethods(vm, opts.methods)
  if (opts.data) {
    initData(vm)
  } else {
    const ob = observe((vm._data = {}))
    ob && ob.vmCount++
  }
  if (opts.computed) initComputed(vm, opts.computed)    // 这里会init计算属性
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题