Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸

说到Vue数据更新和页面更新的关联性，这事儿我还真有话要说。
记得有一次，我在一个项目里，数据更新了，页面就是没反应，那叫一个头疼。
后来排查下来，才发现原来是数据更新了，但Vue实例里没有这个数据。

我当时就想，这Vue也太严格了吧，连个数据更新都不放过。
后来查资料才知道，Vue在初始化实例的时候，会用getter/setter转化属性，确保这些属性是响应式的。
所以啊，如果你在data里定义了属性，Vue才能检测到它的变化。

还有一次，我在动态添加属性到对象里，结果页面就是没更新。
我当时也没想明白，后来查了查，原来是Vue不能检测到对象属性的添加或移除。
这是因为JavaScript ES5 的限制，Vue只能在数据初始化时处理属性。

再来说说数组。
我之前就犯过这样的错误，直接修改数组项，结果页面没反应。
后来才知道，Vue不检测数组和对象的直接修改，这是为了优化性能。
所以啊，如果你想更新数组，得用Vue提供的方法，比如this.array[index] = newValue。

还有，Vue在处理数据变化的时候，是异步的。
它会在一个异步队列里处理数据变化，这样可以避免不必要的计算和DOM操作，提高性能。
但是，这也可能导致你看到的数据更新不是实时的，因为模板的更新可能不会立即反映在DOM上。

有一次，我在一个循环嵌套层级很深的组件里，页面更新就变得特别慢。
我当时也没遇到作者说的那种情况，可能是我代码逻辑没问题吧。
但如果你也遇到了，那可能就是代码逻辑的问题，而不是数据层级的问题。

还有个问题就是路由参数变化时，页面可能不会更新。
我之前就遇到过这种情况，因为路由视图组件引用了相同的组件，导致动态路由参数的变化无法触发组件更新。
解决办法就是给组件添加一个唯一的key属性。

总结一下，理解这些数据更新和页面更新关联性的问题及其解决方案，对于我们这些Vue开发者来说，是非常重要的。
这样我们才能避免常见的错误，提升应用的稳定性和用户体验。

vue中数组发生改变了,但是页面没有渲染,怎么办

Vue数组未渲染？直接用this.$set。

索引改值或改长度？别这么干。

watch用deep监听。

nextTick后操作。

forceUpdate留到绝境。