【Vue3】保姆级毫无废话的进阶到实战教程 - 01

_你当像鸟飞往你的山
25,054 阅读6分钟

作为一个 React、Vue 双修选手，在 Vue 3 逐渐稳定下来之后，是时候摸摸 Vue 3 了。Vue3 的变化不可谓不大，所以，本系列主要通过对 Vue3 中的一些 Big Changes 做详细的介绍，然后封装一个比较通用的业务脚手架，里面会增加很多非常有用的小技巧，让你在 Vue 3 的世界里纵享丝滑 ~

第一篇将着重介绍一些 Vue3 中重要的变化和概念 ~

1、新建项目

找个可以开机的电脑，在终端输入：

ray-so-export (2).png

打开链接 http://127.0.0.1:5173，你的眼睛就会看到：

image.png

代表项目初始化成功，你真棒！

你的目录会长这个样子：

image.png

注意：记笔记，小技巧学起来，在 vscode 终端中使用 tree 指令打印当前项目的文件树：

tree -I "node_modules|.vscode|cypress" > tree.txt

这个命令会做两件事:

  1. 使用 tree 命令输出目录树结构，同时排除 node_modules、.vscode 和 cypress 文件夹

    • tree 命令可以输出目录的树形结构
    • -I 参数用于排除某些文件夹不显示
    • 在排除参数中用 | 分隔多个要排除的文件夹名

  2. 使用 '>' 符号将标准输出重定向到 tree.txt 文件（没有就会自动生成一个）

这样 tree 命令的输出就会被写入到 tree.txt 文件中，而不是打印到终端屏幕上。在项目中执行，然后你就会在项目根目录中看到一个 tree.txt 文件:

.
├── README.md
├── cypress.config.ts
├── dist
│   ├── assets
│   │   ├── AboutView-4d995ba2.css
│   │   ├── AboutView-675ecf4b.js
│   │   ├── index-9f680dd7.css
│   │   ├── index-d5df9149.js
│   │   └── logo-277e0e97.svg
│   ├── favicon.ico
│   └── index.html
├── env.d.ts
├── index.html
├── package.json
├── pnpm-lock.yaml
├── public
│   └── favicon.ico
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── base.css
│   │   ├── logo.svg
│   │   └── main.css
│   ├── components
│   │   ├── HelloWorld.vue
│   │   ├── TheWelcome.vue
│   │   ├── WelcomeItem.vue
│   │   ├── __tests__
│   │   │   └── HelloWorld.spec.ts
│   │   └── icons
│   │       ├── IconCommunity.vue
│   │       ├── IconDocumentation.vue
│   │       ├── IconEcosystem.vue
│   │       ├── IconSupport.vue
│   │       └── IconTooling.vue
│   ├── main.ts
│   ├── router
│   │   └── index.ts
│   ├── stores
│   │   └── counter.ts
│   └── views
│       ├── AboutView.vue
│       └── HomeView.vue
├── tree.txt
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
├── tsconfig.vitest.json
├── vite.config.ts
└── vitest.config.ts

简单介绍一下重要的文件/文件夹：

  • public
    • 里面的东西不会经过编译和打包，所以放在 public 内的东西 ”不要引用“；
    • 通常会放置( 不被JavaScript ) 引用的静态资源，例如：网页标题栏 icon，即 favicon.ico；
    • 打包的时候，里面的东西会直接被复制一份，放在根目录内，所以要引用 public 内的资源时，要使用根目录绝对路径，比如：要取 public/favicon.ico ，你应写成 /favicon.ico；
  • assets：放静态资源，如：图片、CSS
  • components：放公用组件
  • stores：与 Pinia 状态管理器有关
  • router：与 Vue Router 路由管理有关
  • views：放路由组件

2、深入认识 npm xxx

在 package.json 的 scripts 中常用的有三个指令：

  • npm run dev｜npx vite：启动项目本地服务，并提供 Hot Module Replacement (HMR)，可以在更新代码后即时更新页面；

是的，在项目根目录下 npx vite 也可以启动项目！

  • npm run build｜npx vite build：项目打包

image.png

  • npm run preview｜npx vite preview --port 4173：启动一个本地服务，预览打包后的 dist 内容，可以在正式布署前检查打包后的内容是否有问题

3、为什么要打包？

Vue3项目打包的主要目:

  1. 必要的语法编译

    • 浏览器不认识 vue 文件，需要编译成浏览器能读懂的 js 和 css
    • 浏览器不认识的新 ES 语法，需要 polyfill。

  2. Minify 代码：去除无用代码，节省浏览器解析的时间

    • 在不影响程序运行的前提下，去除不必要的空白字元、注解，将变量名称、函数名称、参数名称缩短等等，减少部署后的代码体积。

  3. 整合第三方模块：打包可以将引入的各种第三方模块打包合并到一起，作为一个整体进行部署。通过 npm 或yarn 安装所需的第三方库，实际都放在 node_modules 内，却可以透过 import from "xxx" 直接使用，不需要写出该库的完整路径，这是打包工具的功劳。

  4. 性能优化：通过打包合并文件，减少页面 HTTP 请求数量，加快加载速度。

  5. 代码保护：源码经过打包后会进行压缩和混淆，可以起到一定的代码保护作用。

  6. 兼容性优化：打包可以将代码转换为主流浏览器都能识别的语法，优化不同浏览器的兼容性。

  7. 部署方便：打包后生成的静态资源文件可以很方便地部署到各种环境。

  8. 开启gzip压缩：打包过程可以进行gzip压缩，优化静态资源文件的体积。

  9. 分析代码：通过分析打包后的文件，可以清晰看到项目中不同文件的组成和大小。

打包主要是为了优化性能、安全性、扩展性、部署便利性等等，实际项目部署中也是必要的步骤。

4、Option API 和Composition API 区别

Vue 3 提供 Option API 和 Composition API 两种写法，Option API 是延续自 Vue 2 的写法，Composition API 则是跟着 Vue 3 一起推出的新写法。

Option API 和 Composition API 主要差别有两个：

  1. 管理逻辑代码的方式，也就是<script>的部分，模板 template 和 style 的用法是一样的。
  2. Composables (Vue 官网翻译成 组合式函数)

这里引用 FU 大神在 Vueconf 上的一个解释：

image.png

image.png

4.1 Option API

所谓的 Option (选项)，就是 Vue 将代码根据特性不同，分类成 data、method、计算属性(computed)、生命周期......不同选项，让开发者通过选项 (Option) 的方式，来定义组件内的逻辑。

代码一般会根据选项式 API 被分成几个区块，比如这样：

ray-so-export (3).png

4.2 Composition API

在 Composition API 搭配 <script setup> 的情况下，可以将所有逻辑代码直接写在<script>内，就跟写原生 Javascript 的感觉很像，几乎没有什么特殊规则，交由开发者自行管理。

使用 Composition API 时，通常会根据「功能」来管理逻辑代码，一个功能使用到的 data、method，声明位置可以比较靠近，对于大的、复杂的组件来说，会提升可读性。

Composition API 的代码一般是这样：

ray-so-export (4).png

4.3 两者区别

  • Option API：有既定规则，代码按照选项分区管理

  • Composition API：较为弹性、自由，代码通常按照功能逻辑分区管理，(或随开发者偏好)

两种方式都有人喜欢，没有绝对的好坏。 其实 「自由/ 弹性」 在程式码管理上是把双刃剑，更考验开发者管理代码的能力；也有开发者偏好在订好的规则下进行开发，两者并没有优劣，而是风格差异。

  • Composition API 形式下，需要由开发者自己利用 reactive() 和 ref() 定义 data 是否有响应性，在其他地方取 data 时，也就要根据 reactive() 和 ref() 的规则进行取值和操作。

  • Option API 形式下，Vue 已经帮开发者做好了响应式，自动为 data 中的数据加上响应性，其他选项要取用 data 内的数据时，用 this.变量名 取得即可。

但整个两者背后的响应式机制是一样的，核心概念不变，而是根据Vue 定义的写法不同，有不同的使用方式，所以 Vue 官网将教学指南分成两种 API 形式。

image.png

复杂组件的情况下，Composition API 可读性更好

  • 在开发比较小的组件时，两者的可读性其实没有太大的差异。
  • 但随着组件越大、越复杂，功能用到几个不同的 Option，逻辑就会被分散在不同 Option 的区块，随着组件长大，可读性会变差，要管理一个功能时，需要在不同的 Option 区块之间切换。

官网也给了这两者的直观上的区别：

image.png

建议是都能熟悉使用，不然你怎么看懂别人的 shishan 代码呢？

5、使用 Composition API 封装自定义 Hooks

在 Vue 3 中，可以使用 Composition API 来封装可重用的逻辑，类似于 React 中的 Hooks。

通过自定义 Hooks，我们可以将可重用的逻辑封装起来，并在多个组件中共享使用。这样可以提高代码的可维护性、重用性和可读性，避免了代码重复，并且使组件更加关注自身的业务逻辑。并且 hook 具有良好的命名空间和类型推导，易于测试等特性。

5.1 useWindowSize

下面封装一个 useWindowSize 的自定义 Hooks，用于获取当前窗口的宽度和高度：

ray-so-export (5).png

将窗口大小的逻辑封装成一个可重用的函数，并且与具体的组件解耦。其他组件只需要导入并调用 useWindowSize，就可以获取窗口大小，而不需要重复编写监听器和逻辑。

比如，你就可以在组件中这样使用 useWindowSize：

ray-so-export (6).png

5.2 useFetch 和 usePagination

下面再来封装两个非常常用的自定义 Hooks：usePagination 和 useFetch。

import { ref, computed, onMounted, isRef, watch } from "vue";

export function usePagination(endpoint) {
  const currentPage = ref(1);
  const paginatedEndpoint = computed(() => {
    return `${endpoint}?page=${currentPage.value}`;
  });

  function nextPage() {
    currentPage.value++;
  }

  function prevPage() {
    if (currentPage.value <= 1) {
      return;
    }

    currentPage.value--;
  }

  return {
    endpoint: paginatedEndpoint,
    nextPage,
    prevPage
  };
}

export function useFetch(endpoint) {
  const data = ref(null);
  const loading = ref(true);
  const error = ref(null);

  function fetchData() {
    loading.value = true;
    // 也可以使用 axios
    return fetch(isRef(endpoint) ? endpoint.value : endpoint, {
      method: "get",
      headers: {
        "content-type": "application/json"
      }
    })
      .then(res => {
        // 非 200 响应码
        if (!res.ok) {
          const error = new Error(res.statusText);
          error.json = res.json();
          throw error;
        }

        return res.json();
      })
      .then(json => {
        data.value = json;
      })
      .catch(err => {
        error.value = err;
        if (err.json) {
          return err.json.then(json => {
            error.value.message = json.message;
          });
        }
      })
      .finally(() => {
        loading.value = false;
      });
  }

  onMounted(() => {
    fetchData();
  });

  if (isRef(endpoint)) {
    watch(endpoint, () => {
      // 重新请求数据
      fetchData();
    });
  }

  return {
    data,
    loading,
    error
  };
}

下面逐个分析这两个 Hooks 的封装思路：

1. usePagination:

这个自定义 Hook 用于处理分页逻辑。它接收一个 endpoint 参数，表示分页请求的接口。

  • currentPage 是一个响应式引用（ref），用于存储当前页码，默认为 1。

  • paginatedEndpoint 是一个计算属性（computed），根据当前页码和 endpoint 拼接出分页请求的完整接口。

  • nextPage 函数用于增加当前页码，即跳转到下一页。

  • prevPage 函数用于减少当前页码，即回到上一页。

最后，返回了一个对象，包含了 paginatedEndpoint、nextPage 和 prevPage。这样，在多个组件中可以方便地使用分页功能，而不需要重复编写逻辑。通过修改 currentPage 的值，可以轻松地切换页码，并且 paginatedEndpoint 会自动更新，以便发起正确的分页请求。

2. useFetch:

这个自定义 Hook 用于发送异步请求并处理响应数据。它接收一个 endpoint 参数，表示请求的接口。

  • data、loading 和 error 都是响应式引用（ref），分别用于存储请求的响应数据、加载状态和错误信息。

  • fetchData 函数用于发送请求。在函数内部，首先将 loading 置为 true，表示请求正在进行中。然后使用 Fetch API 发起请求，并根据请求的状态进行相应的处理：

    • 如果响应状态码不是 200，抛出一个带有状态文本的错误。
    • 如果响应状态码为 200，将响应数据解析为 JSON，并将其赋值给 data。
    • 如果发生错误，将错误信息存储在 error 中，并尝试提取自定义的 JSON 错误响应。

  • onMounted 钩子在组件挂载后调用 fetchData 函数，即在组件加载时发送请求。

  • 如果 endpoint 是响应式引用，则使用 watch 监听 endpoint 的变化，并在变化时重新调用 fetchData，以重新获取数据。

最后，返回一个对象，包含了 data、loading 和 error。这样，在组件中发送请求变得更加简单。通过调用 fetchData 函数，可以发起请求并获取响应数据，同时也可以监控请求的加载状态和错误信息。这样，组件可以更专注于业务逻辑，而不需要过多关注请求的细节。

怎么使用呢？

<script setup>
import { usePagination, useFetch } from './hooks'

const endpoint = 'https://example.com/api' 

const { 
  endpoint: paginatedEndpoint,
  nextPage,
  prevPage
} = usePagination(endpoint)

const {
  data,
  loading,
  error
} = useFetch(paginatedEndpoint)

function handleNextPage() {
  nextPage()
}

function handlePrevPage() {
  prevPage()
}
</script>

<template>
  <div>
    <button @click="handlePrevPage">Prev</button> 
    <button @click="handleNextPage">Next</button>

    <div v-if="loading">Loading...</div>

    <div v-if="data">
      <!-- display data -->
    </div>

    <div v-if="error">
      Error: {{ error }}
    </div>
  </div>
</template>

6、几个重要的东西

6.1 setup() 和 <script setup>

在最新的 Composition API 中引入 <script setup>，其设计理念是去除不必要的包装器和其他旧的组件选项，这样就能更简单、更集中地编写组件。你可以认为 <script setup> 是 setup() 的语法糖，比如：

ray-so-export (7).png

使用 <script setup> 语法糖，我们可以更简洁地编写组件逻辑。不再需要写多余的 return 语句：

ray-so-export (8).png

对比一下：

image.png

6.2 defineProps 和 defineEmits

要声明 props 和 emits 等选项，我们必须使用 <script setup> 中自动提供的所谓编译器宏 defineProps 和 defineEmits：

ray-so-export (9).png

这两个函数不需要导入，在预处理 <script setup> 时会自动编译。

如果你使用了 TypeScript，那么最好也声明一下 props 和 emits 的类型：

ray-so-export (10).png

6.3 多个 script

在某些情况下，我们有可能希望在组件中声明一些自定义选项，比如自定义组件名称，<script setup> 实现不了的，可以用另外一种传统的写法，在编译 *.vue 文件时，这两个区块会自动合并。

ray-so-export (11).png

6.4 defineOptions

评论区有同学提到一个比较新的 Option：defineOptions。

在 Vue 3.3+ 以后，defineOptions 这个宏可以用来直接在 <script setup> 中声明组件选项，而不必使用 6.3 中那种多个 <script> 块的方式了：

<script setup>
defineOptions({
  inheritAttrs: false,
  customOptions: {
    /* ... */
  }
})
</script>
  • 仅支持 Vue 3.3+。
  • 这是一个宏定义，选项将会被提升到模块作用域中，无法访问 <script setup> 中不是字面常数的局部变量。

比如：

image.png

在浏览器的 Vue Devtools 中：

image.png

更详细的可以看一下官方文档：vue-macros: define-options

6.5 defineExpose

在 Vue 3 的 Composition API 中，defineExpose 用于将组件的一部分内容公开给父组件。你可以指定哪些属性、方法或其他内容可以被父组件访问和使用。比如：

ray-so-export (12).png

定义了一些。

使用 defineExpose 函数将内部的属性 exposedValue 和一个方法 exposedMethod 暴露出去。在模板中，我们可以像使用普通的属性和方法一样使用这些暴露的内容。在点击按钮时，调用了 exposedMethod 方法。

父组件可以像下面这样访问和使用子组件暴露的内容：

ray-so-export (13).png

在父组件中，需要使用 ref 创建了一个对子组件的引用 childComponent。然后，我们可以通过 childComponent.value 来访问子组件实例，并调用其公开的方法 exposedMethod。

6.6 defineSlots

这个宏可以用于为 IDE 提供插槽名称和 props 类型检查的类型提示。

defineSlots() 只接受类型参数，没有运行时参数。类型参数应该是一个类型字面量，其中属性键是插槽名称，值类型是插槽函数。函数的第一个参数是插槽期望接收的 props，其类型将用于模板中的插槽 props。返回类型目前被忽略，可以是 any，但我们将来可能会利用它来检查插槽内容。

它还返回 slots 对象，该对象等同于在 setup 上下文中暴露或由 useSlots() 返回的 slots 对象。

<script setup lang="ts">
const slots = defineSlots<{
  default(props: { msg: string }): any
}>()
</script>
  • 仅支持 Vue 3.3+。

6.7 Suspense

在组件中，我们通常需要异步请求数据，比如在 <script setup> 的顶层使用了 await。以这种方式定义的组件必须与 Suspense 组件一起使用（React 有的我也要有？），这样 Vue 才能解决异步问题并正确加载组件。

<Suspense> 是一个内置组件，用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态。

<script setup>
const user = await fetch(`/users/1`).then((d) => d.json())
</script>

<template>
  <Suspense>
    <AsyncComponent />
  </Suspense>
</template>

不过需要注意：<Suspense> 还是一项实验性功能。它不一定会最终成为稳定功能，并且在稳定之前相关 API 也可能会发生变化。

7、SFC

在 Vue 3 中，SFC（Single File Component，单文件组件）是一种将模板、脚本和样式封装在一个单独的文件中的开发模式。SFC 提供了一种组织和编写 Vue 组件的便捷方式，并提供了更好的可读性和可维护性。

一个典型的 Vue 3 SFC 包含三个部分：

  • 模板（template）：每个 .vue 文件最多只能有一个<template>，内容会被 @vue/compiler-dom 预编译成 JavaScript 的渲染函数。

  • 脚本（script）：每个.vue最多只能有一个<script>(不包含<script setup>)

  • 样式（style）：每个.vue可以有多个<style>，样式可以是普通的 CSS，也可以使用预处理器（如 Sass、Less）或 CSS-in-JS 库（如 CSS Modules）来编写。

以下是一个示例 SFC 文件的结构：

<template>
  <!-- 模板内容 -->
</template>

<script>
// 脚本内容
</script>

<style>
/* 样式内容 */
</style>

因为浏览器并不认识.vue档，所以在开发的时候，我们不能像以前一样直接通过 live server 在浏览器上预览项目，这也是为什么我们需要用到 Vite 或 Vue Cli 等建构工具，建构工具会根据 Vue 提供的 loader -@vue/compiler-sfc 来编译 .vue 文件。

Vue 3 的编译器会解析 SFC 的模板、脚本和样式部分，并将它们转换为可执行的渲染函数、JavaScript 代码和样式。这样，开发人员可以通过单个文件来组织组件的结构和逻辑，提高代码的可维护性和可读性，并且在构建过程中，Vue 3 的编译器会将 SFC 转换为可执行的 Vue 组件，使其能够在浏览器中运行。

打开浏览器的控制台，你就会发现，虽然它还有.vue，但你再仔细看看它，它已经是js了：

image.png

参考

avatar
文章
阅读
粉丝