vue2响应式原理分析
什么是响应式？
Vue 2的响应式以数据为中心的方式来构建用户界面。在Vue 2中，响应式系统通过Object.defineProperty API实现，使得数据对象的属性能够被监听，当属性值发生变化时，与之相关的视图也会自动更新。
具体来说，响应式系统包括以下几个关键概念：
-
数据劫持 Observer：使用
Object.defineProperty来劫持数据对象的所有属性，为这些属性添加getter和setter。这样，每当属性被访问或修改时，Vue 2都能够知道，并作出相应的处理。 -
依赖收集 Dep：当渲染函数或计算属性被执行时，它们会访问响应式数据的属性，触发这些属性的getter。在getter中，Vue 2会记录当前正在执行的渲染函数或计算属性作为依赖。
-
观察者模式 Watcher：每个组件实例都对应一个观察者（Watcher）实例，它会在组件渲染的过程中把接触过的数据属性记录为依赖。当依赖项的setter触发时，会通知观察者，从而使它关联的组件重新渲染。
-
异步更新队列：Vue 2在检测到数据变化时并不会立即更新DOM，而是把这些变化放到一个异步队列中。在下一个事件循环中，Vue 2会清空队列，并执行实际的DOM更新操作。这种机制可以避免不必要的重复渲染，提高性能。
-
虚拟DOM：虽然虚拟DOM不是响应式系统的一部分，但它与响应式系统紧密协作。Vue 2使用虚拟DOM来计算出最小的DOM更新操作，从而提高页面渲染的效率。