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 的观察者和组件的被调用。然而，来自组件的正常方法被覆盖。

文档中说：

Hook functions with the same name are merged into an array so that all of them will be called. Mixin hooks will be called before the component’s own hooks.

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

Answer 1

如the documentation所述，

When a mixin and the component itself contain overlapping options, they will be “merged” using appropriate strategies.

For example, data objects undergo a recursive merge, with the component’s data taking priority in cases of conflicts.

预计 watch 选项将与 data 选项合并，这就是所列示例中发生的情况。

Answer 2

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

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

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

Is a watch property in vue a lifecycle hook?

vue.js

vue-mixin