Vue.js 为什么添加键不会触发监视的变量？

我有一个对象

allevents

用键和值异步更新。无论何时修改

allevents

，我都希望触发一个重新计算函数

为此，我使用以下Vue结构（在组件中，删除所有不相关的元素）：

导出默认值{
数据：函数（）{
返回{
//
所有事件：{}，
事件：[]
}
},
方法：{
//
mqttMessage（主题，消息）{
const cal=topic.split（'/'）.pop（）
this.allevents[cal]=JSON.parse（message）.filter（x=>true）
//在上面的更新之后，我期待着
//如果在下面监视allevents，则会触发该函数
//作为一种解决方法，我在下面添加了这一行来解决这个问题
//但我还是想了解一下缺乏触发的原因
this.computeEvents（）
},
//该函数假定在一次更改后触发，如下所示
计算机事件（）{
this.events=[]
Object.values（this.allevents.forEach（cal=>cal.forEach（e=>this.events.push（e）））
}
},
观察：{
//每当allevents发生更改时，运行computeEvents（），似乎您是一个错误的受害者

而不是：

this.allevents[cal]=JSON.parse（message.filter）（x=>true）

尝试：

Vue.set（this.allevents、cal、JSON.parse（message.filter）（x=>true））

或：

this.$set（this.allevents，cal，JSON.parse（message.filter）（x=>true））

相关摘录自：

更改检测警告
由于现代JavaScript的局限性（以及
对象。观察
），Vue无法检测属性添加或
删除。因为Vue执行getter/setter转换过程
在实例初始化期间，属性必须存在于
数据
对象，以便Vue将其转换并使其反应。对于
例如：

var vm=new Vue({
数据：{
a:1
}
})
//`vm.a`现在是被动的
vm.b=2
//`vm.b`不是被动的

Vue不允许动态添加新的根级别
已创建实例的属性。但是，可以
使用
Vue.set（对象、，
键，值）
方法：

Vue.set（vm.someObject'b'，2）

您还可以使用
vm.$set
实例方法，它是
全局
Vue.set
：

this.$set（this.someObject'b'，2）

看来你是一场灾难的受害者

而不是：

this.allevents[cal]=JSON.parse（message.filter）（x=>true）

尝试：

Vue.set（this.allevents、cal、JSON.parse（message.filter）（x=>true））

或：

this.$set（this.allevents，cal，JSON.parse（message.filter）（x=>true））

相关摘录自：

更改检测警告
由于现代JavaScript的局限性（以及
对象。观察
），Vue无法检测属性添加或
删除。因为Vue执行getter/setter转换过程
在实例初始化期间，属性必须存在于
数据
对象，以便Vue将其转换并使其反应。对于
例如：

var vm=new Vue({
数据：{
a:1
}
})
//`vm.a`现在是被动的
vm.b=2
//`vm.b`不是被动的

Vue不允许动态添加新的根级别
已创建实例的属性。但是，可以
使用
Vue.set（对象、，
键，值）
方法：

Vue.set（vm.someObject'b'，2）

您还可以使用
vm.$set
实例方法，它是
全局
Vue.set
：

this.$set（this.someObject'b'，2）

什么是
someObject
？@adelriosantiago是
data
中的一个属性的名称。在本例中，
a
就是这样一个属性（虽然它是一个数字，
set
调用只有在
a
是一个对象时才有意义）什么是
someObject
？@adelriosantiago是
data
中一个属性的名称。在本例中，
a
就是这样一个属性（虽然它是一个数字，
set
调用只有在
a
是一个对象时才有意义）。
export default {
        data: function () {
            return {
                //
                allevents: {},
                events: []
            }
        },
        methods: {
            //
            mqttMessage(topic, message) {
                const cal = topic.split('/').pop()
                this.allevents[cal] = JSON.parse(message).filter(x => true)
                // following the update above, I was expecting that since 
                // allevents is watched below, the function would trigger
                // as a workaround, I added this line below which fixes the issue
                // but I still would like to understand the lack of trigger
                this.computeEvents()
            },
            // the function ssupposed to be triggred after a chnage, below
            computeEvents() {
                this.events = []
                Object.values(this.allevents).forEach(cal => cal.forEach(e => this.events.push(e)))
            }
        },
        watch: {
            // whenever allevents change, run computeEvents() <-- this does not happen
            allevents() { 
                console.log("events compute triggered")
                this.computeEvents() 
            }
        },
        mounted() {
            //
        }
}