多次使用 vm.$watch() 还是一次来处理多个回调?

Sam*_*m g 5 javascript performance vuejs2

在需求之一中,我需要为不同的回调(属于多个子组件)动态地将手表添加到同一个对象(在父组件中)。例如:

addWatch(callback){

    this.$watch(()=>{
    ---
    return **this.a**
    },callback)
}
Run Code Online (Sandbox Code Playgroud)

我有以下疑问:

  1. 随着子组件数量的增加,是否会导致 VUEJS 出现性能问题?(如果是有没有门槛)
  2. 如果我宁愿保留一个回调数组并创建 watch 一次来循环遍历这个数组并在 watch 触发时执行每个方法,那么性能会有所提高吗?还是 VUEJS 内部管理它?

提前致谢!

Mic*_*el2 0

最好为您想要监视的每件事调用 watch。这样,vue 就可以进行优化,并且仅在该观察程序中使用的实际变量发生更改时才调用您的观察程序。

如果你观察相同的值,vue 非常擅长优化,但在这种情况下,最好只添加一个监听器,因为仍然存在性能开销(但这确实是微优化,通常不值得付出努力) )

例子:

// Will only get called when a changes
this.$watch(() => this.a, () => {
  this.aText = this.a + "";
});
// Will only get called when b changes
this.$watch(() => this.b, () => {
  this.bText = this.b + "";
});

Run Code Online (Sandbox Code Playgroud)