vue.js - vuejs 计算的给定 Prop 的 setter 不是响应式(Reactive)的

Question

我正在使用计算来复制我的 Prop 值并在我的组件中使用/改变它:

export default {
  props: ['propOffer'],
  computed: {
    offer: {
      get: function () {
        return JSON.parse(JSON.stringify(this.propOffer))          
      },
      set: function () {
        this.offer
      }
    },
   }

问题在于使用 setter。它不是 react 性的。当我使用某种输入时，会有延迟，所以我计算出的报价不会立即更新。输入示例:

    <v-text-field
    label="Offer title"
    v-model="offer.title"
    ></v-text-field>

这与我声明 offer 时的行为完全相反。作为变量(未计算) - 然后我得到了我的 {{offer}} <template> 内部立即发生变化

我该如何改进它？我设置我的计算错误吗？

Answer 1

为了更好地理解这种情况，这就是目前发生的情况:

当应用程序加载时，初始状态是:

<your-component>
propOffer: '{"title":"test"}'
offer.<lastValue>: undefined

在那个时间点，您的应用程序将加载 v-text-field , 此引用字段 offer ，这将初始化 offer计算变量:

<your-component>
propOffer: '{"title":"test"}'
offer.<lastValue>: [Javascript object 1]

[Javascript object 1]
title: "test"

<v-text-field>
value: "test"

当用户输入 v-text-field ，它的值会发生变化，因为 v-model发出回更新:

<your-component>
propOffer: '{"title":"test"}'
offer.<lastValue>: [Javascript object 1]

[Javascript object 1]
title: "test123"

<v-text-field>
value: "test123"

正如您在此处看到的，在正常操作中永远不会调用 setter，因此您保存它的代码不会运行。

您可以通过为商品标题制作另一个计算 Prop 来解决此问题，然后添加一些代码以防止您的更改被撤消。

让我们从标题的 getter 和 setter 开始:

computed: {
    title: {
        get() {
            return this.offer.title;
        },
        set(title) {
            this.offer = {...this.offer, title};
        }
    },
    // ....

现在我们需要在我们的主要 offer 函数中正确处理这个 set 操作，因为如果我们不处理它，并且基本上修改它的返回对象，我们就会进入未定义行为的领域，因为计算的值不匹配计算。

    // ... 

    offer: {
        get: function () {
            if (this.modifiedOffer) {
                return this.modifiedOffer;
            }
            return JSON.parse(JSON.stringify(this.propOffer))          
        },
        set: function (offer) {
            this.modifiedOffer = offer;
        }
    },
},
data() {
    return: {
        modifiedOffer: undefined,
    };
},

完成此模式后，您现在有一个稳定的应用程序，它没有显示未定义的行为，要获得更多功能，您基本上需要检查 propOffer更改，并强制删除 this.modifiedOffer ，或者向不同的计算变量添加更多逻辑，通知用户存在数据冲突，并要求他覆盖他的数据。