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

Question

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 不是钩子函数/生命周期钩子对吧？

Answer 1

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

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

Answer 2

正如the documentation 所说，

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

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

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