vuejs 计算的给定道具的设置器不是反应式的

Question

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

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

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

    <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，因此您保存它的代码不会运行。

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

让我们从标题的 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，或者添加更多逻辑到一个不同的计算变量，通知用户存在数据冲突，并要求他覆盖他的数据。