Vue的数据驱动视图简单理解： 当Vue实例中的数据（data）发生变化时，与之相关联的视图（template）会自动更新，反映出最新的数据状态。 这种数据与视图的自动同步，就是Vue数据驱动视图的核心概念。
Vue的数据驱动视图是通过其响应式系统实现的。以下是Vue数据驱动视图实现的核心原理：
响应式系统
Vue的响应式系统基于Object.defineProperty，Vue 3中则使用了Proxy，这使得Vue能够侦测到数据的变化，并自动更新到视图中。
[原始数据]
data: {message: "Hello Vue!"
}[响应式数据]
data: {message: {get() { ... },set(newValue) { ... }}
}- 数据劫持（Data Hijacking）
- Object.defineProperty（Vue 2）: Vue 2通过Object.defineProperty来劫持（或观察）每个组件的data对象中的属性。对于每个属性，Vue都定义了getter和setter，以便在属性被访问或修改时执行特定的逻辑。
function defineReactive(data, key, value) {Object.defineProperty(data, key, {enumerable: true,configurable: true,get: function() {return value;},set: function(newVal) {if (value === newVal) return;value = newVal;// 通知视图更新}});
}
- Proxy（Vue 3）: Vue 3使用Proxy对象重写了一套响应式系统。Proxy可以拦截对象的任意操作，不仅仅是属性访问，是一个更强大和灵活的方式来实现响应式。
function reactive(data) {return new Proxy(data, {get(target, key) {return target[key];},set(target, key, value) {target[key] = value;// 通知视图更新return true;}});
}
- 依赖收集
当组件进行渲染时，会访问模板中用到的data属性，这个访问过程会触发属性的getter。getter会执行一个“依赖收集”的过程，将当前的属性与视图部分建立起联系。
[组件渲染]
<template><div>{{ message }}</div>
</template>[依赖收集]
data.message => 视图更新函数
- 派发更新
当data中的属性被修改时，会触发setter。setter会通知之前在getter中收集到的依赖（即视图部分），告知它们数据发生了变化。然后，视图会根据新的数据重新渲染。
[数据变化]
data.message = "Hello World!";[派发更新]
setter触发 =>
通知依赖 =>
执行视图更新函数
虚拟DOM（Virtual DOM）
Vue使用虚拟DOM来提高性能。虚拟DOM是一个轻量级的JavaScript对象，它表示真实DOM的内存表示。
-
diff算法
当数据变化时，Vue会生成一个新的虚拟DOM树，并与旧的树进行比较（diff）。Vue的diff算法高效地比较两棵树，找出实际需要变更的最小部分。 -
更新真实DOM
一旦diff过程完成，并且找出了变化，Vue会高效地批量更新真实DOM，只对变化的部分进行操作。
[虚拟DOM]
Virtual DOM Tree (JavaScript对象)[Diff算法]
旧Virtual DOM Tree|| diffV
新Virtual DOM Tree|| 找出差异V
[更新真实DOM]
组件化
Vue通过组件化的方式来构建界面。每个组件都有自己的状态（data）、视图（template）和行为（methods等）。组件的状态变化会触发视图的更新，而且组件之间的状态是独立的。
[组件结构]
<parent-component><child-component :prop="parentData"></child-component>
</parent-component>[数据流]
parentData (parent) => prop (child)
总体流程
- 初始化：Vue实例化时，对data对象进行响应式处理。
- 编译模板：将模板编译成渲染函数，该函数返回虚拟DOM树。
- 视图渲染：执行渲染函数，生成初始的虚拟DOM树，并转换为真实DOM。
- 数据变化：当数据变化时，重新执行渲染函数，生成新的虚拟DOM树。
- diff算法：比较新旧虚拟DOM树，找出差异。
- 更新视图：根据差异更新真实DOM。
