1

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

在这里，您可以看到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不是钩子函数/生命周期钩子吗？

4

2 回答 2

1

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

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

于 2020-05-05T10:56:13.063 回答
0

正如文件所述，

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

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

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

于 2019-05-25T14:58:34.053 回答