Vue数据更新了页面却没刷新？7种原因排查清单？

本文共计2806个文字，预计阅读时间需要12分钟。

如果发现你需要在Vue中做一次强制性更新，且99.9%的情况下是你在某个地方做错了事。

1. Vue无法检测实例被创建时data中不存在的属性：因为Vue会在初始化实例时对data中的属性进行代理，如果属性在初始化时不存在，则无法被代理，因此无法检测到。

如果你发现你自己需要在 Vue 中做一次强制更新，99.9% 的情况，是你在某个地方做错了事。

1. Vue 无法检测实例被创建时不存在于 data 中的 property

原因：由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

场景：

var vm = new Vue({ data:{}, // 页面不会变化 template: '<div>{{message}}</div>' }) vm.message = 'Hello!' // `vm.message` 不是响应式的

解决办法：

var vm = new Vue({ data: { // 声明 a、b 为一个空值字符串 message: '', }, template: '<div>{{ message }}</div>' }) vm.message = 'Hello!'

2. Vue 无法检测对象 property 的添加或移除

原因：官方 - 由于 JavaScript（ES5） 的限制，Vue.js 不能检测到对象属性的添加或删除。