初识Vue3

1. Vue3 简介

Vue 3 是 Vue.js 的最新版本，于 2020 年 9 月 18 日发布，代号为 “One Piece”。Vue 3 的发布是 Vue.js 发展过程中的一个重要里程碑，经过了大量的社区贡献和开发者的努力：

• 4800+ 次提交: 社区和核心团队的积极开发和维护。
• 40+ 个 RFC: 提出和讨论了超过 40 个新的功能建议。
• 600+ 次 PR: 处理了大量的代码更改和功能改进请求。
• 300+ 贡献者: 来自世界各地的开发者共同贡献代码。

官方发布地址

可以在Release v3.0.0 One Piece · vuejs/core (opens new window)查看官方发布详情。

截至 2023 年 10 月，Vue 3 的最新公开版本为 3.3.4。

1.1 性能的提升

• 打包大小减少 41%: 更小的打包体积意味着更快的加载速度。
• 初次渲染快 55%: 页面首次加载和渲染的速度更快。
• 更新渲染快 133%: 响应数据变化时的更新速度大幅提升。
• 内存减少 54%: 更少的内存使用意味着更高的效率和更好的性能。

1.2 源码的升级

• 使用 Proxy 替代 defineProperty: Vue 3 使用 JavaScript 的 Proxy 对象来实现响应式系统，这带来了更好的性能和更多的灵活性。
• 重写虚拟 DOM 的实现和 Tree-Shaking: 重构虚拟 DOM 实现，增强了 Tree-Shaking 能力，使得不使用的代码在打包时可以被有效移除。

1.3 拥抱 TypeScript

Vue 3 对 TypeScript 的支持更加友好，提供了更好的类型推断和类型安全。开发者可以更容易地使用 TypeScript 编写 Vue 应用，提高了代码的可维护性和可靠性。

1.4 新的特性

1. Composition API（组合 API）

Composition API 提供了一种更灵活和可组合的方式来组织组件的逻辑和状态，使代码更加模块化和易于复用。

• setup: 一个新的组件选项，作为组合 API 的入口点，用于定义组件的状态和逻辑。

• ref 与 reactive: 提供了对响应式数据的声明和处理。

  import { ref, reactive } from 'vue';
  
  const count = ref(0); // ref 创建一个可变的响应式数据
  const state = reactive({ name: 'Vue' }); // reactive 创建一个响应式对象
  

• computed 与 watch: 计算属性和侦听器的增强版本。

  import { computed, watch } from 'vue';
  
  const doubled = computed(() => count.value * 2); // computed 创建计算属性
  watch(count, (newValue, oldValue) => {
    console.log(`Count changed from ${oldValue} to ${newValue}`);
  }); // watch 监听响应式数据的变化
  

2. 新的内置组件

• Fragment: 支持多根节点的组件，允许在模板中返回多个根节点。
• Teleport: 用于将组件渲染到 DOM 树的不同位置。
• Suspense: 用于处理异步组件和加载状态的展示。

3. 其他改变

• 新的生命周期钩子: 增加了一些新的生命周期钩子，如 onBeforeMount、onMounted 等，提供了更细粒度的生命周期管理。
• data 选项应始终被声明为一个函数: 这使得每个组件实例都有其独立的状态。
• 移除 keyCode 支持作为 v-on 的修饰符: 鼓励使用更具语义化的事件修饰符，如 @keyup.enter。

2. 创建 Vue3 工程

2.1. 基于 vue-cli 创建

在此方法中，我们使用 vue-cli 工具来创建一个 Vue3 项目。vue-cli 是 Vue.js 官方提供的一个命令行工具，方便我们快速生成 Vue.js 项目的模板。

查看官方文档：可以通过访问 官方文档 (opens new window) 了解详细步骤。

注意：目前 vue-cli 已处于维护模式，官方推荐使用 Vite 来创建项目，Vite 是一种更快速、更轻量的构建工具。

创建项目步骤：

### 查看当前安装的 @vue/cli 版本，确保版本在 4.5.0 以上
vue --version

### 安装或者升级 @vue/cli 到最新版本
npm install -g @vue/cli

### 执行命令创建一个新的 Vue 项目
vue create vue_test

### 在项目创建过程中选择 Vue 的版本
### 选择 Vue 3.x 版本进行项目初始化
###  Choose a version of Vue.js that you want to start the project with (Use arrow keys)
###  > 3.x
###    2.x

### 进入项目目录并启动项目
cd vue_test
npm run serve

以上命令将创建一个名为 vue_test 的项目，并启动开发服务器以便实时查看项目效果。

---

2.2. 基于 Vite 创建（推荐）

Vite 是一个新一代的前端构建工具，提供更快速的构建和更好的开发体验。

访问官网：更多信息可以参考 Vite 官方文档 (opens new window)。Vite 的优势如下：

• 快速的热重载（HMR）：能实现极速的服务启动和响应。

• 开箱即用：对 TypeScript、JSX、CSS 等现代前端特性支持良好。

• 按需编译：只编译实际使用的模块，极大地提升了开发速度。

• 对比传统构建工具：下图展示了 Vite 与传统 webpack 在开发中的构建速度对比：

  

创建项目的步骤：

可以参考 官方文档 (opens new window) 创建 Vue 项目。

### 1. 使用 npm 命令创建 Vue 项目
npm create vue@latest

### 2. 根据提示完成配置
### 配置项目名称
√ Project name: vue3_test

### 是否添加 TypeScript 支持
√ Add TypeScript?  Yes

### 是否添加 JSX 支持
√ Add JSX Support?  No

### 是否添加路由功能
√ Add Vue Router for Single Page Application development?  No

### 是否添加 Pinia 状态管理
√ Add Pinia for state management?  No

### 是否添加单元测试
√ Add Vitest for Unit Testing?  No

### 是否添加端到端测试
√ Add an End-to-End Testing Solution? » No

### 是否添加 ESLint 代码质量检查
√ Add ESLint for code quality?  Yes

### 是否添加 Prettier 代码格式化
√ Add Prettier for code formatting?  No

创建完成后，可以编写一个简单的 App 组件来测试项目：

<template>
  <div class="app">
    <h1>你好啊！</h1> <!-- 显示一个简单的问候信息 -->
  </div>
</template>

<script lang="ts">
export default {
  name: 'App' // 组件名称，便于调试和引用
}
</script>

<style>
.app {
  background-color: #ddd; /* 背景颜色 */
  box-shadow: 0 0 10px; /* 边框阴影 */
  border-radius: 10px; /* 圆角效果 */
  padding: 20px; /* 内边距 */
}
</style>

安装推荐的 VSCode 插件

为了更好地开发 Vue 项目，官方推荐安装以下 VSCode 插件：

总结：

• 在 Vite 项目中，index.html 文件是项目的入口，位于项目的根目录。
• 加载 index.html 后，Vite 解析 <script type="module" src="xxx"> 指向的 JavaScript 文件。
• 在 Vue3 中，通过 createApp 函数来创建应用实例。

2.3. 一个简单的效果

Vue3 兼容 Vue2 的语法，并且在 Vue3 中的模板中可以没有根标签。下面是一个简单的示例：

<template>
  <div class="person">
    <!-- 显示姓名和年龄 -->
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>

    <!-- 按钮操作 -->
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>

<script lang="ts">
export default {
  name: 'App', // 组件名称

  // 组件的数据
  data() {
    return {
      name: '张三', // 默认姓名
      age: 18, // 默认年龄
      tel: '13888888888' // 联系方式
    }
  },

  // 组件的方法
  methods: {
    // 修改名字
    changeName() {
      this.name = 'zhang-san' // 新名字
    },

    // 年龄加1
    changeAge() {
      this.age += 1
    },

    // 显示联系方式
    showTel() {
      alert(this.tel)
    }
  },
}
</script>

这个示例展示了如何使用 Vue3 的基本语法创建一个简单的交互式组件。你可以通过点击按钮来修改数据和触发方法。