Vue中检测变化有哪些容易被忽视的细节需要注意？

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

目录+深入响应式原理+如何追踪变化+测试变化注意事项+对于对象+对于数组+声明响应式+property+异步更新队列+深入响应式原理+Vue+独特特性之一，其非侵入性的响应式系统。数据

目录

• 深入响应式原理
• 如何追踪变化
• 检测变化的注意事项
• 对于对象
• 对于数组
• 声明响应式 property
• 异步更新队列

深入响应式原理

Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工作原理同样重要，这样你可以避开一些常见的问题。在这个章节，我们将研究一下 Vue 响应式系统的底层的细节。

如何追踪变化

当你把一个普通的 JavaScript 对象传入 Vue 实例作为data选项，Vue 将遍历此对象所有的 property，并使用Object.defineProperty把这些 property 全部转为getter/setter。Object.defineProperty是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。