Vue 计算属性未更新。非常奇怪的行为答案

【问题标题】：Vue Computed Property not updating. Very strange behaviourVue 计算属性未更新。非常奇怪的行为
【发布时间】：2020-08-05 12:06:53
【问题描述】：

是的，这是另一个 'Vue 计算属性未更新问题...

以下是我的问题组件的摘录。我有一个计算属性“fieldModel”，它使用 Vue.set 设置一个新值，然后我在为它分配一个新值后立即控制台记录该计算属性，javascript 对象更新并且可以在 devtools 中查看，但是计算属性没有更新, DOM 也没有。

export default {
    props:{
        value:{
            type:Object,
            required:true,
        }
    },
    data() {
        return {
            model:this.value,
            key:'something',
        }
    },
    created() {

        var self = this;

        setTimeout(function() {
            self.fieldModel = 'Apples';
        }, 1000);
    },
    computed:{
        fieldModel:{
            get() {
                return this.model[this.key];
            },
            set(value) {

                var self = this;

                self.$set(self.model, self.key, value);
                console.log(self.model[self.key], self.fieldModel);
                //Logs out 'Apples', undefined, 
            }
        }
    }
}

【问题讨论】：

Can't replicate.
@StevenB。提供的信息不足或上述代码无法为您复制问题？
上面的代码没有复制这个问题，正如在链接的小提琴中可以看到的那样。

标签： javascript vue.js

【解决方案1】：

我在原始问题中发布的示例代码工作正常，这导致我分解我的代码并解决我的问题。

我在带有递归嵌套的 v-for 循环中使用了这个组件，另一个组件似乎在不更新这些组件的情况下改变了 v-model 对象，从而导致了一些非常奇怪的行为。

我能够通过添加一个“值”的观察者来更新模型字段和一个“模型”的观察者来解决这个问题，以 $emit('input') 对其父模型的任何更改。

这会导致浏览器崩溃的无限循环，但是我能够通过添加检查以查看模型/值是否是同一个对象来解决这个问题

为简洁起见，简化了示例代码：

{
   watch:{
      value(newValue) {
         if(this.model != newValue) {
            this.model = newValue;
         }
      },
      model(newModel) {
         this.$emit('input', newModel)
      },
   }
}

【讨论】：