Vue.js - 观察对象的特定属性，并在更改时加载数据

Question

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

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)
        }
    },
}

仅当＜code＞产品和＜code＞p2属性更改时，组件应加载新数据。一种方法是监视整个产品，并在更改时加载数据。但它会产生不必要的请求，因为＜code＞p1可能没有更改。

另一个思路是观察< code>product.p1和< code>product.p2，调用同一个函数在每个观察器中加载数据。但是，在产品的新版本中，可能会发生< code>p1和< code>p2都发生变化的情况，这将触发2个调用。

使用去抖函数进行数据加载会是一个好的解决方案吗？

或者更确切地说，对整个产品使用单个观察程序，并将新的p1和p2与旧的字符串化版本进行比较，以确定是否应触发数据加载？

Answer 1

正如其他一些开发人员所说，您可以使用计算属性来监控product. p1或product. p2或两者的变化，然后在每种情况下只调用loadData（）方法一次。这是假设的product.vue组件的代码：

<template>
    <div>
        this is product compo
    </div>
</template>

<script>
export default {
    name: "product",
    watch: {
        p1p2: function(newVal, oldVal) {
            this.loadData();
        }
    },
    props: {
        productProp: {
            type: Object,
            default: () => {},
        },
    },

    computed: {
        p1p2: function() {
            return this.productProp.p1 + this.productProp.p2;
        }
    },
    methods: {
        loadData() {
            console.log("load data method");
        }
    },
}
</script>

Answer 2

对此有几种方法，各有利弊。

我做的一个简单方法是使用watch函数访问您要观看的每个属性，然后返回一个新的空对象。Vue知道在watch函数中访问了product. p1和product. p2，因此它会在这些属性中的任何一个更改时重新执行它。然后，通过从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
  })
}

赞成的意见：

• 你不必把任何东西串起来
• 您不必对watch handler函数进行反跳

缺点:

• 您无法跟踪＜code＞p1的先前值
• 如果＜code＞发生此情况，请小心。产品可能为空/未定义
• 当＜code＞p1发生变化时，它将始终触发；即使p1和p2，在下一个微任务（即$nextTick（））之前被设置回其先前的值；但在大多数情况下，这不太可能成为问题
• 您需要使用＜code＞这个。$watch（）。如果要使用＜code＞watch＜/code＞选项，则需要监视计算属性

这些缺点中的一些也适用于其他方法。

更紧凑的版本是：

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