Vue.js中如何根据数据属性自动构造watch属性？答案

【问题标题】：How to automatically construct watch property based on data attributes in Vue.js?Vue.js中如何根据数据属性自动构造watch属性？
【发布时间】：2019-05-12 19:13:41
【问题描述】：

我有标准的 Vue.js 组件，我想将data 属性中的属性转换为观察者，或者换句话说，我想根据data 属性自动构造一个watch 对象

我的想法是这样的

 watch: {
    ...(() => {
      const watchers = {}

      Object.keys(this.$data).forEach(key => {
        watchers[key] = () => {
          new ProductNutrientUpdate(this).run()
        }
      })

      return watchers
    })(),
  },

这种方法的问题在于 this.$data 尚未构造

也许我可以通过某种方式在 created 钩子中添加观察者？？

【问题讨论】：

你到底想做什么？

标签： vue.js vuejs2

【解决方案1】：

Vue 已经监视数据对象的属性（请注意，如果这些值中的任何一个本身就是对象，我认为您需要更新整个对象，即将其值更改为具有所需嵌套键值的浅拷贝）。参考：https://vuejs.org/v2/guide/reactivity.html
然后，您可以使用 update 生命周期挂钩来监视对 data 的所有更改：https://vuejs.org/v2/api/#updated

【讨论】：

【解决方案2】：

我能够使用以下方法解决挑战

created() {

    Object.keys(this.$data).forEach(key => {
      this.$watch(key, function() {
        // ... some logic to trigger on attribute change
      })
    })
}

【讨论】：