vue 中的 watch 属性是生命周期钩子吗？

Posted 2023-02-16

【中文标题】vue 中的 watch 属性是生命周期钩子吗？

【英文标题】：Is a watch property in vue a lifecycle hook?

【发布时间】：2019-10-11 19:05:34

【问题描述】：

vuejs 生命周期钩子中是否包含任何 watch 属性？

在这里你可以看到codepen的这段摘录：

const myMixin = 
  methods: 
    increment()
      console.log('methods from mixins')
      this.myData+=2
    
  ,
  watch:
    myData()
      console.log('watcher from mixins')
    
  


new Vue(
  el: '#app',
  mixins:[myMixin],
  data: function () 
    return 
      myData: 0
    
  ,
  methods:
    increment()
      console.log('methods from comp')
      this.myData++
    
  ,
  watch:
    myData()
      console.log('watcher from component')
    
  
);

myData 来自 myMixin 的观察者和组件的被调用。然而，来自组件的正常方法被覆盖。

在文档中说：

同名的钩子函数被合并到一个数组中，这样所有的钩子函数都会被调用。 Mixin 钩子会在组件自己的钩子之前被调用。

但是，watch 不是钩子函数/生命周期钩子对吧？

【参考方案1】：

所有键的默认合并策略的逻辑可以在Vue repo的vue/blob/dev/src/core/util/options.js文件中找到。

正如您将在第 208 行看到的那样，watch 键有一个特殊的合并策略，它会导致创建一个数组（类似于挂钩的逻辑）。

【参考方案2】：

正如the documentation 所说，

当 mixin 和组件本身包含重叠选项时， 它们将使用适当的策略“合并”。

例如，数据对象进行递归合并，其中 发生冲突时组件的数据优先。

预计watch 选项以及data 选项将被合并，这就是列出的示例中发生的情况。

【讨论】：

但是为什么methods选项没有合并，而是methods在组件中优先。还有哪些其他选项将被合并，哪些选项会将组件的选项作为优先级并覆盖 mixin 的选项？

成员被覆盖是 mixin 模式所期望的行为，请参阅 en.wikipedia.org/wiki/Mixin 。至于 Vue mixin 的实现，它试图通过额外合并钩子和一些选项来解决常见情况，特别是 data 和 watch，可能还有更多。 methods 不在合并选项中，因为这弊大于利。如果需要，您可以使用 this.$parent.foo() 访问覆盖的方法。

另外，如果有人知道将合并哪些选项以及将覆盖哪些其他选项，请发表评论，非常感谢，谢谢。

@KevinChandra 你可以在这里查看完整列表github.com/vuejs/vue/blob/dev/src/core/util/options.js#L208