javascript - Vue.js - 观察对象的特定属性并在变化时加载数据

Question

我有一个名为 product 的 Vue 组件，它是一个具有一堆属性的对象。而且它经常变化。

export default {
    props: {
        product: {
            type: Object,
            default: () => {},
        },
    },
    watch: {
        'product.p1'() {
            this.loadData()
        },
        'product.p2'() {
            this.loadData()
        },
    },
    methods: {
        loadData() {
            doApiRequest(this.product.p1, this.product.p2)
        }
    },
}

当只有属性 p1 时，组件应该加载新数据和 p2的 product被改变。
一种方法是观察整个产品并在更改时加载数据。但它会产生不必要的请求，因为 p1和 p2可能没有改变。
另一个想法是观看 product.p1和 product.p2 ，并调用相同的函数在每个观察者中加载数据。
但可能会发生 p1和 p2在产品的新版本中发生更改，它将触发 2 次调用。
使用去抖动功能进行数据加载会是一个很好的解决方案吗？
或者更确切地说，对整个 product 使用单个观察者并比较新的 p1和 p2使用旧的字符串化版本进行字符串化以确定是否应触发数据加载？

Answer 1

有几种方法可以解决这个问题，每种方法都有优点和缺点。
我做的一个简单的方法是使用一个监视函数来访问您想要监视的每个属性，然后返回一个新的空对象。 Vue知道product.p1和 product.p2在 watch 函数中被访问，因此它会在任何这些属性发生变化时重新执行它。然后，通过从 watch 函数返回一个新的空对象实例，Vue 将触发 watch 处理程序，因为 watch 函数返回了一个新值(因此被监视的内容“改变了”)。

created() {
  this.$watch(() => {
    // Touch the properties we want to watch
    this.product.p1;
    this.product.p2;

    // Return a new value so Vue calls the handler when
    // this function is re-executed
    return {};
  }, () => {
    // p1 or p2 changed
  })
}

优点:

您不必对任何内容进行字符串化。

您不必去抖动监视处理函数。

缺点:

您无法跟踪 p1 的先前值和 p2 .

小心this.product可能永远为空/未定义。

它总是在 p1 时触发或 p2被改变；即使p1和 p2在下一个微任务之前被设置回它们之前的值(即 $nextTick() )；但这在大多数情况下不太可能成为问题。

您需要使用 this.$watch() .如果你想使用 watch选项，然后您需要查看计算属性。

无论如何，其中一些缺点适用于其他方法。
更紧凑的版本是:

this.$watch(
  () => (this.product.p1, this.product.p2, {}),
  () => {
    // changed
  }
})