Vue 的执行流程主要包括以下几个阶段
一、创建阶段
- 实例创建：首先通过
new Vue创建一个 Vue 实例，在创建实例时会传入一个配置对象，包含数据（data）、模板（template）、方法（methods）等。 - 数据响应式处理：Vue 会遍历实例的
data对象，利用Object.defineProperty对数据中的属性进行劫持，使其成为响应式数据。这样当数据属性的值发生变化时，Vue 能够自动检测到变化并触发相应的更新操作。 - 编译模板：根据传入的
template或el（指定挂载的 DOM 元素）属性，Vue 会使用模板解析器将模板字符串转换为抽象语法树（AST），然后对 AST 进行优化，例如静态节点标记等，最后生成可执行的渲染函数。
二、挂载阶段
- 挂载元素：将生成的渲染函数与指定的挂载元素（通常是一个 DOM 节点）进行关联，通过
vm.$mount方法将 Vue 实例挂载到页面上。Vue 会找到挂载元素对应的真实 DOM 节点，并将渲染函数渲染得到的虚拟 DOM（Virtual DOM）树与真实 DOM 进行挂载和更新。 - 首次渲染：调用渲染函数，将初始的组件数据渲染成真实的 DOM 结构并插入到挂载的元素中，完成首次页面渲染，使组件在页面上显示出来。
三、更新阶段
- 数据变化监测：当 Vue 实例中的响应式数据发生变化时，Vue 能够监听到数据的变化，因为在创建阶段已经对数据进行了响应式处理。
- 触发更新：数据变化会触发 setter 函数，Vue 会根据变化的路径找到相关的依赖（Watcher），并通知这些依赖进行更新。
- 虚拟 DOM 对比：Vue 会通过虚拟 DOM 机制来进行高效的 DOM 更新。Vue 会重新调用渲染函数生成新的虚拟 DOM 树，然后将新的虚拟 DOM 树与旧的虚拟 DOM 树进行对比，找出差异。
- DOM 操作：根据虚拟 DOM 的差异对比结果，Vue 会精确地计算出需要对真实 DOM 进行哪些操作，如添加、删除、修改节点等，然后通过高效的 DOM 操作（例如批量更新、最小化 DOM 操作次数等）将真实 DOM 更新到最新的状态，以确保页面与数据的一致性。
总之，Vue 的执行流程是一个从创建实例、编译模板、挂载元素到数据变化后触发更新的完整过程，通过其独特的响应式数据和虚拟 DOM 技术，实现了高效的页面渲染和更新，大大提高了前端开发的效率和用户体验。
