【Web前端】Vue2与Vue3核心概览与优化对比

📚 Vue 2 核心知识体系

Vue 2 是一个用于构建用户界面的渐进式 JavaScript 框架，其核心概念主要包括以下几个方面。

1. 基础语法与模板

1）模板语法 ：使用双大括号 {``{ }} 进行文本插值，以及指令（如 v-bind, v-model, v-if, v-for 等）来操作 DOM。

2）Vue 实例 ：每个 Vue 应用都是通过 new Vue() 创建的 Vue 实例，包含数据、方法、生命周期钩子等选项。

3）计算属性与侦听器：

① 计算属性 (computed)：用于声明依赖数据变化的复杂逻辑，具有缓存性，只有当依赖变化时才重新计算。

② 侦听器 (watch)：用于观察和响应 Vue 实例上的数据变动，执行异步或开销较大的操作。

2. 数据绑定与响应式

1）响应式原理 ：Vue 2 使用 Object.defineProperty 来劫持各个属性的 getter 和 setter，实现数据响应式。对于数组，需要重写数组的变异方法（如 push, pop 等）来实现响应式。

2）数据绑定：

① 单向绑定 ：使用 {``{}} 插值和 v-bind 指令。

② 双向绑定 ：使用 v-model 指令，本质上是语法糖，通过 v-bind:value 和 v-on:input 实现。

3. 指令系统

常用内置指令包括：

1）条件渲染 ：v-if, v-else, v-else-if, v-show

2）列表渲染 ：v-for （须指定 key）

3）事件处理 ：v-on （可搭配事件修饰符，如 .stop, .prevent 等）

4）属性绑定 ：v-bind （可简写为 :）

5）双向绑定 ：v-model

4. 组件系统

1）组件定义与注册：分为全局注册和局部注册。

2）组件通信：

① 父传子 ：通过 props。

② 子传父 ：通过 $emit 触发事件。

③ 其他方式 ：自定义事件（event.$on, event.$off, event.$emit）、Vuex 状态管理。

3）内容分发 ：通过 <slot> 插槽实现，包括默认插槽、具名插槽和作用域插槽。

4）组件生命周期：

beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed 等钩子函数。父子组件生命周期执行顺序有特定规律。

5）组件 data：必须是一个函数，以确保每个组件实例拥有独立的数据对象。

5. 路由与状态管理

1）Vue Router：官方路由管理器，用于构建单页面应用 (SPA)。

包含路由配置、动态路由、嵌套路由、导航守卫等概念。

2）Vuex：官方状态管理库，采用集中式存储管理应用的所有组件的状态。

核心概念：State、Getter、Mutation（同步修改状态）、Action（异步操作，提交 Mutation）。

6. 生命周期钩子

Vue 实例在其生命周期中会触发一系列钩子函数，允许你在特定阶段执行自定义代码。常用钩子及其应用场景如下表所示：

生命周期钩子	触发时机与常见应用场景
beforeCreate	实例初始化之后，数据观测和事件/监听器配置之前被调用。常用于初始化非响应式变量。
created	实例创建完成，数据观测、属性和方法运算完成，但 $el 属性尚未显示。常用于异步数据请求。
beforeMount	挂载开始之前被调用，相关的 render 函数首次被调用。
mounted	实例挂载到 DOM 后调用。可访问 DOM 元素，常用于依赖 DOM 的初始化或异步数据请求。
beforeUpdate	数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。可操作更新后的 DOM。
beforeDestroy	实例销毁之前调用。这一步实例仍然完全可用。常用于清理定时器、解绑自定义事件等。
destroyed	实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，事件监听器被移除，子实例也被销毁。

7. 工具与生态

1）Vue CLI：官方标准脚手架工具，用于快速创建和管理 Vue 项目。

2）Vue Devtools：浏览器调试扩展，用于可视化调试 Vue 应用。

⚡ Vue 3 新特性与优化

Vue 3 在性能、包大小和开发体验上都有显著提升，并引入了新的 API 和特性。

1. 性能优化

Vue 3 在性能方面做了大量优化，主要体现在：

优化方面	Vue 2 的情况	Vue 3 的优化
响应式系统	使用 Object.defineProperty，无法检测对象属性的添加/删除，对数组需重写方法。	使用 Proxy 实现响应式，直接监听对象和数组变化，性能更高且无需 hack 数组方法。
虚拟 DOM 与 Diff 算法	全量对比虚拟 DOM 树。	编译时优化： • 静态提升 (Static Hoisting)： 将静态节点提升到渲染函数外，避免重复创建和渲染。 • Patch Flag： 在虚拟 DOM 生成时为动态节点添加标记，Diff 时仅比较带标记的节点，减少比对范围。 **• 事件监听器缓存 (Cache Event Handlers)：**缓存内联事件处理函数，避免不必要的更新。
Tree-shaking	支持较弱。	更好的支持，打包时能移除未使用的代码（如可选组件、指令），减小最终打包体积。
SSR 渲染	性能一般。	对静态内容大幅优化，使用 _createStaticVNode 方法生成 static node，直接 innerHTML，提升服务端渲染性能。

2. Composition API

这是 Vue 3 最重要的新 API，旨在解决 Options API 在逻辑复杂组件中代码分散的问题。

1）核心 setup 函数：

① 作为 Composition API 的入口点，在组件创建（beforeCreate 之前）执行。

② 接收 props 和 context 参数。

③ 返回一个对象，其属性暴露给模板的其余部分。

2）响应式引用与对象：

① ref ：用于创建基本类型的响应式数据，通过 .value 访问和修改。

② reactive：用于创建对象类型的响应式数据。

3）计算属性与侦听器：

① computed：创建计算属性。

② watch 与**watchEffect**：用于侦听响应式数据的变化并执行副作用。

4）生命周期钩子 ：提供了一套与 Options API 生命周期钩子对应，但以 on 开头的函数（如 onMounted, onUpdated 等），可在 setup 中使用。

5）逻辑复用与代码组织：通过 Composition API，可以将与特定功能相关的数据、计算属性和方法组织在一起，并轻松提取到可复用的组合式函数中。

3. 新特性与语法变化

1）Fragments (多根节点组件)：组件模板不再强制要求单个根元素。

2）Teleport：允许将组件模板的一部分"传送"到当前组件 DOM 层次结构之外的 DOM 中，非常适合模态框、通知框等。

3）Suspense（实验性）：提供了一种在组件树中协调嵌套异步依赖（如异步组件）的加载状态的标准方式。

4）v-model 升级：

① 在 Vue 2 中，一个组件上只能使用一个 v-model。

② 在 Vue 3 中，支持多个 v-model ，例如 v-model:title="title" v-model:content="content"。

③ 默认使用 modelValue 作为 prop，update:modelValue 作为事件。

5）自定义指令 API 变更 ：指令的钩子函数名称和参数与组件生命周期钩子对齐（如 beforeMount -> beforeMount, inserted -> mounted 等）。

4. 更好的 TypeScript 支持

1）Vue 3 的源码完全使用 TypeScript 重写。

2）提供了更好的类型推断和类型支持。

3）Composition API 的设计与 TypeScript 的结合更加自然和高效。

🔍 Vue 2 与 Vue 3 主要区别对比

对比维度	Vue 2	Vue 3
响应式系统	Object.defineProperty	Proxy
API 风格	Options API	Composition API (也支持 Options API)
碎片 (Fragments)	不支持，单根节点	支持，多根节点
TypeScript 支持	支持，但集成度较低	原生支持更好
打包体积	较大	Tree-shaking 优化，体积更小
性能	相对较低	虚拟 DOM 优化、响应式优化，性能更高
v-model	单个	多个
自定义指令 API	bind, inserted 等	beforeMount, mounted 等，与组件生命周期对齐
生命周期钩子	beforeDestroy, destroyed	beforeUnmount, unmounted (Composition API 中为 onBeforeUnmount, onUnmounted)
按键修饰符	支持 v-on:keyup.enter 等	不再支持 keyCode 作为修饰符

Vue 3 通过其性能提升、更灵活的 Composition API 和更好的 TypeScript 支持，为构建现代、高效、可维护的 Web 应用提供了强大的工具集。