vue底层原理实现概述
Vue 的响应式系统
Vue 的核心是响应式数据绑定，通过 Object.defineProperty（Vue 2）或 Proxy（Vue 3）实现数据劫持。当数据变化时，依赖该数据的视图会自动更新。
- 依赖收集：每个响应式属性关联一个
Dep实例，用于存储依赖（Watcher）。 - 派发更新：数据变化时，
Dep通知所有Watcher执行更新。
虚拟 DOM 与 Diff 算法
Vue 通过虚拟 DOM 优化渲染性能，先将模板编译为虚拟 DOM 树，再通过 Diff 算法对比新旧虚拟 DOM，最小化真实 DOM 操作。
- Patch 过程：对比节点类型、属性和子节点，按需更新。
- Key 的作用：帮助 Diff 算法识别节点身份，避免不必要的渲染。
模板编译
Vue 的模板会编译为渲染函数，分为三个阶段：
- 解析：将模板字符串转换为 AST（抽象语法树）。
- 优化：标记静态节点，跳过后续 Diff。
- 生成：将 AST 转换为可执行的渲染函数代码。
组件化机制
Vue 组件本质是一个带有预定义选项的 Vue 实例，通过递归渲染形成组件树。
- 生命周期：组件从创建到销毁的钩子函数（如
created、mounted）。 - 父子通信：通过
props向下传递数据，通过$emit向上触发事件。
异步更新队列
Vue 将数据变更后的 DOM 更新放入异步队列，避免频繁重复渲染。通过 nextTick 访问更新后的 DOM。
示例代码：
this.message = 'updated';
this.$nextTick(() => {
console.log('DOM updated');
});
