vue3 概述
Vue 3 相比于 Vue 2 做出了多项重大升级和改进，旨在提供更好的性能、更高的开发效率以及更加灵活的代码组织方式。
模块关系图
+---------------------+ +----------------------+
| | | |
+------------>| @vue/compiler-dom +--->| @vue/compiler-core |
| | | | |
+----+----+ +---------------------+ +----------------------+
| |
| vue |
| |
+----+----+ +---------------------+ +----------------------+ +-------------------+
| | | | | | |
+------------>| @vue/runtime-dom +--->| @vue/runtime-core +--->| @vue/reactivity |
| | | | | |
+---------------------+ +----------------------+ +-------------------+
文件结构
.
├── compiler-core // 顾名思义，核心中的核心，抽象语法树和渲染桥接实现
├── compiler-dom // Dom的实现
├── compiler-sfc // Vue单文件组件(.vue)的实现
├── compiler-ssr
├── global.d.ts
├── reactivity
├── runtime-core
├── runtime-dom
├── runtime-test
├── server-renderer // 服务端渲染实现
├── shared // package 之间共享的工具库
├── size-check
├── template-explorer
└── vue
Compile Time（编译时）
- 定义：编译时指的是 Vue 应用从源代码转换成浏览器可执行 JavaScript 代码的过程。这个过程通常发生在开发环境中，当你使用 Vue CLI 或 Vite 这样的构建工具时。
- 目的：编译时的主要目的是优化模板，将 Vue 的模板语法转换成高效的 JavaScript 渲染函数。这包括静态内容提升、静态树提升、模板表达式预编译等优化措施。
- 源码示例：在 Vue 源码目录中，与编译时相关的代码通常位于 compiler 目录。这部分代码负责解析模板（如 .vue 文件中的
<template>部分），并将其转换成 JavaScript 渲染函数。
Runtime（运行时）
- 定义：运行时指的是 Vue 应用在浏览器中执行时的环境和行为。这包括创建 Vue 实例、响应式系统的工作、组件的挂载和更新等。
- 目的：运行时的主要目的是确保 Vue 应用能够根据数据的变化动态更新 DOM，响应用户的交互，以及处理组件的生命周期等。
- 源码示例：在 Vue 源码目录中，与运行时相关的代码通常位于 runtime 目录。这部分代码包括虚拟 DOM 的创建和更新逻辑、组件实例的管理逻辑、以及响应式系统的实现等。
1. 组合式 API（Composition API）
- Vue 2 使用的是选项式 API，这意味着在一个组件中，相关的逻辑会根据选项（如 methods, computed, data）分散到不同的地方。
- Vue 3 引入了组合式 API，允许开发者更灵活地组织和重用逻辑。通过使用 setup 函数，开发者可以更好地将代码按逻辑聚合，而不是按照选项分散，这对于复杂组件的管理尤其有用。
case1:
import { ref } from 'vue';
export default {
setup() {
const message = ref("Hello, Vue 3!");
return { message };
},
};
case2:
import { ref, computed } from 'vue';
export default {
setup() {
const firstName = ref("John");
const lastName = ref("Doe");
const fullName = computed(() => `${firstName.value} ${lastName.value}`);
return { firstName, lastName, fullName };
},
};
2. 性能提升
- Vue 3 对虚拟 DOM 进行了重写，引入了更快的挂载和更新算法。它还采用了 Proxy 对象重写响应性系统，从而提供更好的性能和内存使用优化。
- 引入了 Tree-shaking 支持，意味着最终打包的文件只包含用到的功能，进一步减少了应用的体积。
3. 更好的 TypeScript 支持
- Vue 2 提供了 TypeScript 支持，但并不是从零开始设计来完全兼容 TypeScript。
- Vue 3 是以 TypeScript 编写的，提供了从核心代码到 API 的完全类型支持，使得开发者可以享受到更一致和强大的类型检查体验。
import { ref, computed } from 'vue';
export default {
setup() {
const firstName = ref("John");
const lastName = ref("Doe");
const fullName = computed(() => `${firstName.value} ${lastName.value}`);
return { firstName, lastName, fullName };
},
};
4. 新的响应性系统
- Vue 2 使用的响应性系统基于 Object.defineProperty 实现。
- Vue 3 的响应性系统基于 ES6 的 Proxy 实现，这允许 Vue 跟踪更多种类的变化（例如数组索引和对象属性的添加/删除），并且有更好的性能。
5. 更多内置功能
- Vue 3 引入了多个新的内置组件和 API，如 Teleport（传送门）、Fragments（片段）、Suspense（用于数据获取的异步组件等待机制）等，增强了 Vue 的功能性和灵活性。
6. 自定义渲染器 API
- Vue 3 提供了自定义渲染器 API，使得开发者可以更容易地创建跨平台应用，例如使用同一套逻辑代码在不同的环境下渲染（Web、移动端原生渲染等）。
7. 更轻量、更快
- 通过优化包的体积和更新性能，Vue 3 在运行时更加高效，尤其是在移动设备和低性能设备上。
8. 兼容性和平滑迁移
- 尽管 Vue 3 引入了许多新特性，Vue 团队还是提供了兼容性构建版本和迁移工具，帮助开发者从 Vue 2 平滑迁移到 Vue 3。