小编ven*_*nom的帖子

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

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当仅属性和p2of product发生更改时，组件应加载新数据。一种方法是观察整个产品并在更改时加载数据。但它会产生不必要的请求，因为p1和p2可能没有改变。

另一个想法是 watchproduct.p1和product.p2，并调用相同的函数在每个观察器中加载数据。但有可能在新版本的产品中两者p1都发生了变化，会触发2次调用。p2

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

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