时间戳

首页 > 解决方案 > vue 中的 watch 属性是生命周期钩子吗？

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

问题描述

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

标签： vue.jsvue-mixin

解决方案

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

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

推荐阅读