Vue中通过事件监听器更新数据时计算属性未更新问题求助

问题根源 #

你的代码里，mounted钩子中给document绑定事件时用了普通function作为回调，此时回调里的this指向的是document对象，而非Vue组件实例。所以你赋值的this.option并不是组件data中定义的响应式变量，自然无法触发selectedOption计算属性的更新。

解决方案 #

有两种简单的修复方式，核心都是确保回调里的this指向Vue组件实例：

方式一：使用箭头函数

箭头函数不会绑定自己的this，会继承外层作用域的this（也就是Vue实例）：

export default {
data() {
    return {
        option: null,
    }
},
computed: {
    selectedOption() {
        return this.option
    },
},
mounted() {
    document.addEventListener("newOptionSelected", (event) => {
        this.option = event.detail.option;
        console.log(this.option); // 此时this指向Vue实例，修改的是data中的option
    });
}
}

方式二：提前保存Vue实例的引用

在回调外把Vue实例的this存到变量中，回调里用这个变量访问实例属性：

export default {
data() {
    return {
        option: null,
    }
},
computed: {
    selectedOption() {
        return this.option
    },
},
mounted() {
    const vm = this; // 保存Vue实例引用
    document.addEventListener("newOptionSelected", function(event){
        vm.option = event.detail.option; // 用vm访问data中的option
        console.log(vm.option);
    });
}
}

额外注意 #

如果后续需要在组件销毁时移除事件监听，避免内存泄漏，可以在beforeUnmount钩子中执行移除操作：

beforeUnmount() {
    // 注意：如果用箭头函数作为回调，需要提前保存回调引用才能移除
    // 所以更推荐方式二的写法，方便后续移除监听
    document.removeEventListener("newOptionSelected", 你的回调函数);
}

内容的提问来源于stack exchange，提问作者PizzaIsLove