Vue2原理

MVVM模型，数据驱动视图

模型->视图->视图模型

MVVM 核心思想：数据绑定，将视图和视图模型之间的交互通过数据绑定实现，从而实现 UI 和业务逻辑的分离，提高代码的可维护性和可测试性。

一、数据响应式

Vue2的数据响应式原理基于 Object.defineProperty() 方法实现，它可以将对象的属性转换为 getter 和 setter，在属性值发生变化时自动更新视图。它的优点是兼容性好，但是它的缺点是不能监听数组的变化，需要使用特殊的方法来处理数组的变化。

当一个 Vue 实例创建时，Vue 会遍历 data 对象中的所有属性，并使用 Object.defineProperty() 方法将它们转换为 getter 和 setter，这样当这些属性被读取或修改时，Vue 能够追踪到这些变化，并且能够触发相应的更新操作。

当数据发生变化时，Vue 会通过依赖收集器将相关的 Watcher 对象添加到一个队列中，然后在下一个事件循环周期中，遍历这个队列，执行这些 Watcher 对象的 update() 方法，从而更新相关的视图。

响应式原理主要通过以下几个核心部件实现：

1、Observer:Observer 的主要功能是把一个普通的对象转换为响应式的对象。它通过 Object.defineProperty 将对象的每个属性转换为带有 getter 和 setter 的属性，这样一来，当访问或设置属性时，Vue 就有机会做一些别的事情。Observer 会递归遍历对象的所有属性，以完成深度的属性转换。对于数组，Vue 会更改它的隐式原型，以监听那些可能改变数组内容的方法。

2、Dep:Dep 是一个观察者列表，当一个属性被访问或设置时，会通知所有观察者。

3、Watcher:Watcher 是 Vue 的一个核心部件，它的主要功能是监听数据的变化。当一个属性被访问或设置时，会触发 Watcher 的回调函数，从而更新视图。

4、Scheduler:Scheduler 是 Vue 的一个调度器，它的主要功能是在合适的时机执行 Watcher 的回调函数，从而更新视图。

二、模板编译

Vue2 的模板编译是将 HTML 模板转换为 Vue2 组件的过程。在 Vue2 中，模板是使用 HTML 语法编写的，然后通过编译器将其转换为 Vue2 组件的 JS 代码。

三、虚拟DOM

Vue2 使用虚拟 Dom(Virtual DOM)来实现高效的页面渲染和更新。虚拟 DOM 是一个 JS 对象树，它映射着真实 DOM 树。当数据发生变化时，Vue2 会通过比较新旧虚拟 DOM 树的差异，来计算出需要更新的部分，然后只更新这些部分，而不是整个页面重新渲染。

这种方式可以大大提高页面渲染和更新的效率，因为真实 DOM 操作是非常耗费性能的。而虚拟 DOM 可以在内存中快速计算出需要更新的部分，然后一次性进行 DOM 操作，从而减少了页面重新渲染的次数，提高了页面的性能和响应速度。

Vue2 中的虚拟 DOM 由 VNode(虚拟节点)组成，每个 VNode 对象代表着一个真实 DOM 节点或一个文本节点。当数据发生变化时，Vue2 会通过比较新旧 VNode 的差异，来计算出需要更新的部分，然后只更新这些部分，从而实现高效的页面渲染和更新。