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

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

如果发现你在Vue中需要做一次强制更新，99.9%的情况是你在一个地方犯了错误。以下是可能导致这种情况的常见原因：

1. Vue无法检测到实例创建时`data`中不存在的属性：这是因为Vue在初始化实例时会将`data`中的属性添加到实例上。如果尝试访问一个在实例创建时还未添加到`data`中的属性，Vue将无法追踪这个属性的变化，从而无法触发更新。原因可能是：

- 在实例化Vue组件之前，没有正确设置`data`函数或对象。 - 在`data`函数或对象中遗漏了某些属性。

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

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

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