vue watch监听computed属性？

  • Z时代
  • 2024-02-11
  • 分类：IT

1.为什么初始化会执行computFn
2.为什么点击按钮会执行computFn和watch
vue watch监听computed属性？

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

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

回答：

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

回答：

首先、watch 和 computed 属性有相同之处，都可以监听数据；

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

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

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

// 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)
  }
}

以上是 vue watch监听computed属性？ 的全部内容， 来源链接： utcz.com/p/933323.html

回到顶部