2025年vue教程菜鸟教程（vue3 菜鸟教程）

大家好，我是讯享网，很高兴认识大家。

 <p style="text-align:center;"><img alt="" src="https://i-blog.csdnimg.cn/direct/4d6e84cdd9554a62b1268a973e7d4933.jpeg" /></p>

讯享网

1. 介绍

1.1 Vue是什么

1.2 为什么学习Vue

1.3 渐进式框架

1.4 Vue版本

2. 环境准备

2.1 Node.js 安装

2.2 基于vite创建

2.3 简单介绍

2.4 模版语法

3. Vue3基础知识

3.1 什么是Vue3

3.2 Vue3的起点setup

setup 语法糖

3.3 ref 基本类型的响应式数据

3,4 reactive 对象类型的响应式数据

3.5 ref 对象类型的响应式数据

3.6 toRefs 与 toRef

3.7 computed 计算属性

基础用法

Getter & Setter

特性总结

3.8 watch 监视

情况一较多使用

情况二

情况三

情况四较多使用

情况五

停止监视

3.9 watchEffect

3.10 标签的 ref 属性

3.11 TS 接口，泛型，自定义类型

接口（Interfaces）

泛型（Generics）

自定义类型（Custom Types）

3.12 props 父传子数据

1. 父组件中准备数据

2. 子组件中声明props

3.13 生命周期

Vue2的生命周期

Vue3的生命周期

3.14 自定义hook

4. Vue3进阶知识

4.1 路由

4.2 Vue Router

创建路由

集成Vue Router到Vue应用

使用路由

4.3 两个注意点

4.4 to的两种写法

4.5 路由器的工作模式

4.6 命名路由

4.7 嵌套路由

设置路由

使用嵌套路由

4.8 路由传参

query参数

params参数

4.9 路由的props配置

4.10 replace属性

4.11 编程式导航

4.12 重定向

5. Pinia

Pinia 的特点

5.1、安装 Pinia

5.2、创建 Store

创建一个 store 文件 counter.ts

5.3、使用 Store

在组件中使用 store

5.4、修改pinia数据

1、第一种修改方式，直接修改

2、第二种修改方式：批量修改

3、第三种修改方式：借助action修改（action中可以编写一些业务逻辑）

5.5 storeToRefs

5.6 getters

5.7 $subscribe 订阅

5.8 store组合式写法

6. 组件通信

6.1. 【props】

6.2. 【自定义事件】

6.3. 【mitt】

6.4.【v-model】

6.5.【$attrs 】

6.6. 【$refs、$parent】

6.7. 【provide、inject】

6.8. 【pinia】

6.9. 【slot】

1. 默认插槽

2. 具名插槽

更简洁的语法：

3. 作用域插槽

7. 其它 API

7.1.【shallowRef 与 shallowReactive 】

shallowRef

使用示例:

shallowReactive

使用示例:

总结

选择哪个？

7.2.【readonly 与 shallowReadonly】

readonly

使用示例:

shallowReadonly

使用示例:

总结

选择哪个？

7.3.【toRaw 与 markRaw】

toRaw

使用示例:

markRaw

使用示例:

总结

选择哪个？

7.4.【customRef】

使用 customRef 的基本步骤：

总结

8. Vue3新组件

8.1. 【Teleport】

Teleport 的基本用法

HTML 结构

Vue 组件中使用 Teleport

8.2. 【Suspense】

Suspense 的基本用法

异步组件

使用 Suspense

特性

注意事项

总结

8.3.【全局API转移到应用对象】

移动的全局 API

示例

创建 Vue 应用实例

注册全局组件

注册全局指令

注册插件

配置选项

挂载应用

总结

在本篇文章中，我们将详细讲解如何使用Vue3，从基本概念到高级技巧，最终通过一个项目实战，让大家全面掌握Vue3开发技能。

Vue基于标准HTML，CSS，JavaScript构建，并提供了一套声明式，组件化的编程模型，帮助你高效地开发用户页面。无论是简单还是复杂页面，Vue都可以胜任

1.1 Vue是什么

渐进式JavaScript框架，易学易用，性能出色，适用场景丰富的Web前端框架

1.2 为什么学习Vue

Vue是目前前端最火的框架之一
Vue是目前企业技术栈中要求的知识点
Vue可以提升开发体验
....

1.3 渐进式框架

Vue是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但web世界是十分多样化的，不同的开发者在web上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue的设计非常注重灵活性和“可以被逐步集成”这个特点。

1.4 Vue版本

目前，在开发中，Vue有两大版本vue2和vue3，老项目一般都是vue2，但是因为vue2已经停止维护了，新的项目一般都是会选择vue3开发（vue3涵盖了vue2的知识体系，当然vue3也增加了许多新的特性）

2.1 Node.js 安装

Windows 安装

访问官方网站下载: 访问Node.js官方网站 Node.js — Run JavaScript Everywhere ，选择“Downloads”页面，找到适合你系统的安装包（推荐使用LTS版本，即长期支持版，更稳定）。
运行安装程序: 下载完成后，双击安装包开始安装。在安装界面，你可以选择是否加入PATH环境变量（建议勾选），这样安装完成后就可以直接在命令行中使用和命令。
验证安装: 安装完成后，打开命令提示符（cmd）或PowerShell，输入以下命令检查安装是否成功：

讯享网

分别会显示Node.js和npm（Node包管理器）的版本号。

2.2 基于vite创建

vite 是新一代前端构建工具

优势

轻量快速的热重载，能实现极速的服务启动。
对 ts、jsx、css等支持开箱即用。
真正的按需求编辑，不再等待整个应用编辑完成。
webpack构建与vite构建对比图如下：

讯享网

具体操作如下：

总结：

项目中，是项目的入口文件，在项目最外层。
加载后，解析指向的。
中是通过 函数创建一个应用实例。

2.3 简单介绍

讯享网

2.4 模版语法

main.ts

App.vue

讯享网

文本插值

最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法（即双大括号）：

使用 JavaScript 表达式

每个绑定仅支持单一表达式，也就是一段能够被求值的JavaScript代码。一个简单的判断方法是是否合法地写在 return 后面

讯享网

无效

3.1 什么是Vue3

Vue2 的API设计是Option（配置）风格的。
Vue3 的API设计是Composition（组合）风格的。

Option API的弊端

Options类型的 API ，数据、方法、计算属性等、是分散在：data，methods，computed 中的，若想新增或者修改一个需求，就需要分别修改：data，methods，computed，不便于维护和复用。

Composition API的优势

可以用函数的方式，更加优雅的组织代码，让相关功能的代码更加有序的组织在一起。

3.2 Vue3的起点setup

setup 概述

setup 是 Vue3 中一个新的配置项，值是一个函数，它是 composition API “表演的舞台”，组件中所用到的：数据，方法，计算属性，监视….等等，均配置在 setup 中。

特点如下：

setup 函数返回的对象中的内容，可直接在模版中使用。
setup 中访问 this 是 undefined
setup 函数会在 beforeCreate 之前调用，它是“领先”所有钩子执行的。

讯享网

setup 语法糖

setup 函数有一个语法糖，这个语法糖，可以让我们把 setup 独立出去，代码如下：

扩展：上述代码，还需要编写一个不写 setup 的 script 标签，去指定组件名字，比较麻烦，我们可以借助 vite 中的插件简化

第一步： npm i vite-plugin-vue-setup-extend -D
第二步：vite.config.ts

讯享网

3.3 ref 基本类型的响应式数据

作用：定义响应式变量。

语法： let xxx = ref(初始值) .

返回值：一个 RefImpl 的实例对象，简称 ref 对象或 ref ， ref 对象的 value 属性是响应式的。

注意点:

JS 中操作数据需要： xxx.value ，但模版中不需要 .value , 直接使用即可。
对于 let name = ref(‘张三’) 来说， name 不是响应式的， name.value 是响应式的。

3,4 reactive 对象类型的响应式数据

作用：定义一个响应式对象（基本类型不要用它，要用，否则报错）

语法：

返回值：一个的实例对象，简称：响应式对象。

注意点：定义的响应式数据是“深层次”的。

讯享网

3.5 ref 对象类型的响应式数据

其实接收的数据可以是：基本类型（详细可以看3.3）、对象类型。

1、定义与初始化:

使用函数可以将一个初始值（不论是基本类型还是对象/数组）封装成一个响应式引用。例如，定义一个对象类型的响应式数据：

在这个例子中，是一个响应式引用，其属性包含实际的对象数据。

2、访问与更新:

访问包裹的值时，需要通过来读取或修改其内部的值。在JavaScript代码中：

讯享网

而在Vue模板中，可以直接使用，Vue会自动解包给你：

3、 内部机制:

对于基本类型，通过来实现响应式。
对于对象或数组这类复杂类型，虽然你直接使用，但其内部实际上会使用来创建一个深层次的响应式代理对象，然后将其包装在一个简单的包装器中，暴露属性。

4、响应性:

当包裹的对象内部属性发生变化时，Vue的响应系统会自动追踪并触发依赖更新，确保UI能够相应地更新。

5、与reactive的区别

讯享网

区别

ref 创建的变量必须使用 .value （可以使用volar插件自动添加.value）.

reactive 重新分配一个新对象，会失去响应式。（可以使用去整体替换）。

使用原则

1、若需要一个基本类型的响应式数据，必须使用 ref 。

2、若需要一个响应式对象，层级不深、ref、reactive 都可以。

3、若需要一个响应式对象，且层级较深，推荐使用 reactive 。

3.6 toRefs 与 toRef

作用：将一个响应式对象中的每一个属性，转换为对象。

备注：与功能一致，但可以批量转换。

总结

用于将响应式对象的一个属性转换为一个独立的对象，便于单独操作和传递。
则是将整个响应式对象转换为一个各属性均为独立对象的普通对象，适合需要分解响应式对象以便于外部使用的情况。

讯享网

3.7 computed 计算属性

作用：根据已有数据计算出新数据（和中的作用一致）。

基础用法

在Vue 3的Composition API中，你不再直接在组件的对象里定义属性，而是使用函数，通过导入函数来定义计算属性。

在这个例子中，就是一个计算属性，它依赖于的值，并且只有当的值变化时，才会重新计算。

Getter & Setter

Vue 3的计算属性同样支持定义getter和setter，允许你不仅读取而且修改计算属性的值，并触发相应的副作用。

讯享网

特性总结

响应式依赖：计算属性自动追踪依赖，当依赖的数据变化时自动重新计算。
缓存机制：计算属性的结果会被缓存，直到依赖项变化，这提高了应用的性能。
组合API集成：在函数中使用，与Vue 3的其他 Composition API 特性无缝集成。
getter/setter：可以定义setter来改变计算属性所依赖的数据，从而提供了更灵活的数据处理能力。

与其他API的关系

在Vue 3中，常与和一起使用，前者用于创建基本类型的响应式引用，后者用于创建复杂对象或数组的响应式代理。结合这些API可以构建复杂的响应式逻辑，同时保持代码的清晰和高效。

3.8 watch 监视

是一个用于观察和响应Vue实例上的数据变化的重要特性。它主要用于在某些数据变化时执行异步或开销较大的操作，或者执行那些不应该在每个组件渲染周期内运行的代码。

特点： Vue3 中的 watch 只能监视以下四种数据：

ref 定义的数据。

reactive 定义的数据。

函数返回的一个值。

一个包含上述内容的数组。

情况一较多使用

监视 ref 定义的【基本类型】数据：直接写数据名即可，监视的是其 value 值的改变。

语法

watch(谁?, 回调函数)

使用函数监视的变化。当的值发生变化时，传入的回调函数会被调用，其中是变化后的新值，是变化前的旧值。这段代码会打印出sum变化的前后值。

情况二

监视 ref 定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要手动开启深度监视。

注意：

若修改的是 ref 定义的对象中的属性， newValue 和 oldValue 都是新值，因为它们是同一个对象。

若修改的是 ref 定义的对象， newValue 是新值， oldValue 是旧值，因为不是同一个对象了。

深度监视

如果你想监视对象内部属性的变化，需要设置选项：

讯享网

watch的第一个参数是：被监视的数据

watch的第二个参数是：监视的回调

watch的第三个参数是：配置对象（deep、immediate等等…..）

情况三

监视 reactive 定义的【对象类型】数据，且默认开启了深度监视，且是不可以关闭的。

情况四较多使用

监视 ref 或 reactive 定义的【对象类型】数据中的某个属性，注意点如下：

若该属性不是【对象类型】，需要写成函数形式。
若该属性值依然是【对象类型】，可直接编，也可写成函数，不过建议写成函数。

结论

监视若是对象里的属性，那么最好写函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。

讯享网

情况五

监视上述的多个数据

停止监视

讯享网

3.9 watchEffect

是Vue 3引入的一个重要功能，它是Composition API的一部分，用于自动收集依赖并执行副作用函数，每当这些依赖发生变化时，副作用函数就会重新运行。这使得开发者能够更容易地处理响应式数据变化带来的副作用，如数据更新后的DOM操作、发送网络请求等。

官网：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改是重新执行该函数。

watch对比watchEffect

都能监听响应式数据的变化，不同的是监听数据变化的方式不同

watch ：要明确指出监视的数据

watchEffect ：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）

3.10 标签的 ref 属性

作用：用于注册模板引用。

用在普通标签上，获取的是节点。

用在组件标签上，获取的是组件实例对象。

用在普通标签上：

讯享网

用在组件标签上：

3.11 TS 接口，泛型，自定义类型

TypeScript 提供了丰富的类型系统，帮助开发者在编码阶段就能捕获潜在的错误，增强代码的可读性和健壮性。以下是关于 TypeScript 中接口（Interfaces）、泛型（Generics）和自定义类型（Custom Types）的基本概念和使用方法。

一般在引入ts接口是都会创建一个和components文件夹同级的types文件夹

接口（Interfaces）

接口用于定义对象的形状（shape），即描述一个对象需要具备的属性和方法。接口可以用于类的实现，也可以用于变量、函数参数或返回值的类型注解。

在types文件夹下ts文件

讯享网

如果增加一个可有可无的属性

泛型（Generics）

泛型允许你在定义函数、接口或类的时候不预先指定具体的类型，而是在使用的时候指定。这增加了代码的重用性和灵活性。

讯享网

自定义类型（Custom Types）

自定义类型可以是类型别名（type aliases）或枚举（enums），它们提供了另一种方式来定义复杂的类型结构。

同样是在types文件夹下的ts文件中，对前面定义的接口进行改造

3.12 props 父传子数据

父子组件之间传递数据主要通过实现，这是一种单向数据流的方式，即数据从父组件流向子组件。

1. 父组件中准备数据

在父组件中，你需要准备要传递给子组件的数据。这个数据可以是任何有效的JavaScript数据类型，包括基本类型（如字符串、数字）和复杂类型（如对象、数组）。

从其他子组件传过来的数据

defineExpose
讯享网

2. 子组件中声明props

在子组件中，你需要声明你期望从父组件接收的数据。这可以通过选项完成，可以定义每个prop的名称、类型和是否必需。

这里可以根据 3.11 TS接口 来规范数据

父传子

讯享网

子接收

3.13 生命周期

组件的生命周期：创建、挂载、更新、销毁

Vue2的生命周期

Vue 2 提供了以下生命周期钩子函数：

: 在组件创建之前调用。
: 在组件创建后调用。
: 在组件挂载之前调用。
: 在组件挂载后调用。
: 在组件更新之前调用。
: 在组件更新后调用。
: 在组件销毁之前调用。
: 在组件销毁后调用。

每个钩子函数都有其特定的用途，可以帮助您在组件的生命周期中执行特定的任务。

: 在组件创建之前调用，可以用来设置初始状态或执行必要的设置。

: 在组件创建后调用，可以用来执行必要的设置或初始化。

: 在组件挂载之前调用，可以用来执行必要的设置或初始化。

: 在组件挂载后调用，可以用来执行必要的设置或初始化。

: 在组件更新之前调用，可以用来执行必要的设置或初始化。

: 在组件更新后调用，可以用来执行必要的设置或初始化。

: 在组件销毁之前调用，可以用来执行必要的清理或销毁。

: 在组件销毁后调用，可以用来执行必要的清理或销毁。

Vue3的生命周期

Vue 3的Composition API通过函数引入，它没有直接对应Vue 2中的生命周期钩子，但提供了类似功能的组合式API。

创建阶段：setup

挂载阶段：onBeforeMount、 onMounted

更新阶段：onBeforeUpdate、onUpdated

卸载阶段：onBeforeUnmount、onUnmounted

setup(): 这是一个新的入口点，替代了Vue 2中的和，在这里可以初始化数据、计算属性、侦听器、副作用等。在组件实例被创建之后，模板被渲染之前调用，且不能访问。
onBeforeMount() / onMounted(): 分别对应Vue 2的和。在挂载前调用，可以用于进行最后的准备工作；在组件被挂载到DOM后调用，此时可以访问DOM元素。
onBeforeUpdate() / onUpdated(): 类似Vue 2的和，分别在组件数据变化并即将重新渲染前和重新渲染后调用。
onBeforeUnmount() / onUnmounted(): 对应Vue 2的和，分别在组件卸载前和卸载后调用，用于清理工作，如取消定时器、解绑事件监听器等。
onErrorCaptured(): 类似Vue 2的，用于捕获子组件抛出的错误。
onRenderTracked() / onRenderTriggered(): 这两个是Vue 3新增的，用于调试。在组件渲染过程中跟踪依赖变化时调用，在组件因依赖变化而触发渲染时调用。

常用的钩子：onMounted(挂载完毕)、onUpdated(更新完毕)、onBeforeUnmount(卸载之前)

示例代码

讯享网

3.14 自定义hook

什么是？—— 本质是一个函数，把函数中使用的进行了封装，类似于中的。
自定义的优势：复用代码, 让中的逻辑更清楚易懂。

创建一个和Components同级的hooks文件夹来存放 hook文件

示例代码

useSum.ts
useDog.ts
```
讯享网
```
组件中具体使用：

4.1 路由

Vue 3 的路由系统是基于 Vue Router 4.x 的，以下是 Vue 3 中路由的基本使用方法：

安装 Vue Router

讯享网

4.2 Vue Router

创建路由

首先，你需要定义你的路由。每个路由映射到一个组件。创建一个components同级的router文件夹。例如：

然后创建一个index.ts文件：

集成Vue Router到Vue应用

在你的Vue应用的主要入口文件（通常是或），你需要将创建的路由器实例注入到Vue应用中：

讯享网

使用路由

在组件内部，你可以使用进行导航，以及使用来显示路由对应的组件：

4.3 两个注意点

1、路由组件通常存放在 pages 或 views 文件夹、一般组件通常存放 components 文件夹。

2、通过点击导航、视觉效果上“消失”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。

4.4 to的两种写法

讯享网

4.5 路由器的工作模式

1、history 模式

优点：URL更加美观，不带有#，更接近传统的网站URL。

缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有404错误。

2、hash 模式

优点：兼容性更好，因为不需要服务器端处理路径。

缺点：URL带有#不太美观，且在SEO优化方面相对较差.

4.6 命名路由

作用：可以简化路由跳转及传参

给路由规则命名：

讯享网

跳转路由：

4.7 嵌套路由

设置路由

接下来，定义你的路由。嵌套路由通常涉及定义一个父路由，该路由可以包含一个或多个子路由。下面是一个简单的示例，定义了一个组件作为父路由，它有一个子路由：detail。

讯享网

使用嵌套路由

注意

记得要加完整路径

在你的主组件中，使用来渲染父路由的组件，同时在父组件内部使用另一个来渲染子路由的组件。

4.8 路由传参

query参数

传递参数
```
讯享网
```
接收参数

params参数

传递参数
```
讯享网
```
接收参数

温馨提示

备注1：传递参数时，若使用的对象写法，必须使用配置项，不能用。

备注2：传递参数时，需要提前在规则中占位

4.9 路由的props配置

作用：让路由组件更方便的收到参数（可以将路由参数作为传给组件）

props忘记的可以回头翻看（3.12）

讯享网

4.10 replace属性

作用：控制路由跳转时操作浏览器历史记录的模式。
浏览器的历史记录有两种写入方式：分别为和：
- 是追加历史记录（默认值）。
- 是替换当前记录。
开启模式：

4.11 编程式导航

实际上这种写法用的更多一些

编程式路由导航是指在Vue应用中通过JavaScript代码来控制路由的导航，而不是通过HTML中的标签。这种方式提供了更多的灵活性和控制能力，特别是在需要根据条件或逻辑来决定导航路径的情况下非常有用。

在Vue 3中，编程式路由导航可以通过Vue Router提供的方法来实现。下面是一些常用的方法：

1、使用

方法是最常用的编程式导航方法之一，用于导航到一个新的位置。它可以接受一个路由对象或一个相对路径作为参数。

实例

讯享网

2、使用

方法与类似，但不同之处在于它不会在浏览器的历史堆栈中添加新的记录，而是替换当前的历史记录。

实例

4.12 重定向

作用：将特定的路径，重新定向到已有路由。

实例

讯享网

Pinia 是一个 Vue 专用的状态管理库，它提供了一种简洁、易于理解和使用的状态管理模式。Pinia 的设计目标是尽可能地保持简单，同时又足够强大以满足大多数状态管理的需求。在 Vue 3 中，Pinia 是一个非常受欢迎的选择，尤其是在那些需要状态管理但又不想引入像 Vuex 这样较重的解决方案的项目中。

Pinia 的特点

简单易用：Pinia 的 API 设计非常直观，学习曲线平缓。
类型安全：Pinia 支持 TypeScript，并且在开发过程中提供强大的类型推断。
可扩展性：Pinia 允许你轻松地扩展功能，如中间件、插件等。
模块化：Pinia 支持按模块划分状态，便于管理和维护。

5.1、安装 Pinia

首先，你需要安装 Pinia。可以通过 npm 进行安装：

npm install pinia

操作

5.2、创建 Store

Pinia 中的 store 是通过定义一个函数并使用函数来创建的。下面是一个简单的示例：

创建一个 store 文件

讯享网

在这个示例中，我们定义了一个名为的 store，它有一个状态，一个 action 用于增加的值，以及一个 getter 用于返回的两倍。

5.3、使用 Store

一旦你创建了 store，就可以在组件中使用它。Pinia 提供了函数来访问 store。

在组件中使用 store

5.4、修改pinia数据

1、第一种修改方式，直接修改

讯享网

2、第二种修改方式：批量修改

3、第三种修改方式：借助修改（中可以编写一些业务逻辑）

讯享网

组件中调用即可

5.5 storeToRefs

借助将中的数据转为对象，方便在模板中使用。
注意：提供的只会将数据做转换，而的会转换中数据。

讯享网

5.6 getters

在 Vue 3 中使用 Pinia 定义 getters 是一个很好的方式来处理和计算状态数据。

概念：当中的数据，需要经过处理后再使用时，可以使用配置。
追加配置。

5.7 $subscribe 订阅

Pinia 提供了一个方法，用于订阅 Store 的变化。当 Store 的状态发生变化时，你可以通过来执行某些操作，比如记录状态的变化或者触发某些副作用。

讯享网

: 订阅 Store 的变化。当发生变化时，回调函数会被调用。

参数包含了变化的具体信息。
参数包含了 Store 的当前状态。
在回调函数中，使用存储最新的到本地存储。

5.8 store组合式写法

组件通信和的区别：

移出事件总线，使用代替。

换成了。
把优化到了里面了。
把所有的东西，合并到中了。
被砍掉了。

常见搭配形式：

概述：是使用频率最高的一种通信方式，常用与：父 ↔ 子。

若 父传子：属性值是非函数。
若 子传父：属性值是函数。

父组件

讯享网

子组件

概述：自定义事件常用于：子 => 父。
注意区分好：原生事件、自定义事件。

原生事件：
- 事件名是特定的（、等等）
- 事件对象: 是包含事件相关信息的对象（、、、）
自定义事件：
- 事件名是任意名称
- 事件对象: 是调用时所提供的数据，可以是任意类型！！！

实例

讯享网

概述：与消息订阅与发布（）功能类似，可以实现任意组件间通信。

安装

新建文件：

讯享网

接收数据的组件中：绑定事件、同时在销毁前解绑事件：

【第三步】：提供数据的组件，在合适的时候触发事件

讯享网

注意这个重要的内置关系，总线依赖着这个内置关系

概述：实现 父↔子 之间相互通信。
前序知识 —— 的本质
组件标签上的的本质：＋事件。
```
讯享网
```
组件中：
也可以更换，例如改成组件中：
```
讯享网
```
如果可以更换，那么就可以在组件标签上多次使用
```
讯享网
```

概述：用于实现当前组件的父组件，向当前组件的子组件通信（祖→孙）。
具体说明：是一个对象，包含所有父组件传入的标签属性。

注意：会自动排除中声明的属性(可以认为声明过的被子组件自己“消费”了)

父组件：

子组件：

讯享网

孙组件：

概述：
- 用于：父→子。
- 用于：子→父。
原理如下：
属性说明值为对象，包含所有被属性标识的元素或组件实例。值为对象，当前组件的父组件实例对象。

案例

父组件

讯享网

子组件1

子组件2

讯享网

概述：实现祖孙组件直接通信
具体使用：
- 在祖先组件中通过配置向后代组件提供数据
- 在后代组件中通过配置来声明接收数据
具体编码：
【第一步】父组件中，使用提供数据
注意：子组件中不用编写任何东西，是不受到任何打扰的
【第二步】孙组件中使用配置项接受数据。
```
讯享网
```

参考之前部分 5.Pinia

1. 默认插槽

父组件：

子组件：

讯享网

2. 具名插槽

如何使用具名插槽：

在子组件中定义具名插槽：

在子组件模板中使用定义具名插槽。
是您为插槽指定的名字。

在父组件中使用具名插槽：

在父组件中使用，其中与子组件中定义的插槽名字相匹配。

实例

子组件

父组件

讯享网

在这个例子中，定义了两个具名插槽：和。在中，我们使用来填充这些插槽。

更简洁的语法：

Vue 也支持更简洁的语法来使用具名插槽：

子组件

父组件

讯享网

这里，和是具名插槽的简写形式。

3. 作用域插槽

作用域插槽（Scoped Slots）是 Vue 中一种高级特性，它允许父组件访问子组件的数据，并在父组件中使用这些数据来渲染内容。这种特性使得组件之间的数据传递更加灵活，尤其是在需要根据子组件提供的数据动态生成内容的情况下非常有用。

如何使用作用域插槽：

在子组件中定义作用域插槽：
- 在子组件中使用标签，并为其添加属性来绑定子组件的数据。
- 这样父组件就可以访问这些数据并在插槽中使用它们。
在父组件中使用作用域插槽：
- 在父组件中使用来定义作用域插槽。
- 是一个对象，它包含了从子组件传递过来的数据。
- 在模板中，您可以使用这些数据来渲染内容。

示例：

子组件

父组件

讯享网

Vue 3 中，为了更好地管理响应式状态，引入了几个新的 API，包括和。这两个函数都是用于创建响应式的引用类型，但它们之间有一些关键的区别。

创建一个响应式的引用对象，该对象只跟踪其属性的变化。当变化时，依赖于它的任何组件将会重新渲染。但是，如果的值本身是一个对象或数组，并且该对象或数组内部发生变化，则不会触发重新渲染。

使用示例:

创建一个对象的响应式代理，但它只会使该对象的第一层属性成为响应式的。这意味着如果你修改对象的第一层属性，那么变化会被追踪。然而，如果对象包含其他嵌套的对象或数组，这些内部结构的变化不会被追踪。

使用示例:

讯享网

总结

用于创建一个响应式的引用，只跟踪的变化。
创建一个响应式代理，只使对象的第一层属性成为响应式的。

选择哪个？

如果你需要一个简单的响应式引用，可以选择。
如果你需要一个响应式对象，但不关心对象内部深层次的响应性，可以使用。

这两种方法都比完全响应式的和要节省性能开销，因为它们减少了需要追踪的依赖数量。这对于大型应用程序或者有复杂数据结构的应用程序来说是非常有用的。

在 Vue 3 中，为了更好地管理状态并提高性能，引入了和这两个实用函数。它们可以用来创建不可变的响应式对象，这对于防止意外修改状态以及优化性能非常有用。

创建一个只读的响应式代理。这意味着你不能直接修改通过创建的对象的属性。如果尝试修改这些属性，将会抛出一个错误，并且不会发生实际的修改。但是，如果对象包含其他嵌套的对象或数组，你可以修改这些内部对象或数组的属性。

使用示例:

类似于，但它只创建一个只读的响应式代理，且只对对象的第一层属性应用只读。这意味着如果对象包含其他嵌套的对象或数组，这些内部结构仍然是可写的。

使用示例:

讯享网

总结

创建一个只读的响应式代理，阻止直接修改对象及其所有嵌套对象的属性。
创建一个只读的响应式代理，只阻止直接修改对象的第一层属性，内部对象或数组仍然可写。

选择哪个？

如果你需要一个完全不可变的响应式对象，可以选择。
如果你需要一个只读的响应式对象，但不关心内部对象的响应性和可写性，可以使用。

这两种方法都可以帮助你在开发过程中避免意外的状态修改，从而提高代码的健壮性和可维护性。此外，它们还可以带来性能上的好处，因为只读对象不需要追踪内部属性的变化，这可以减少不必要的渲染和计算。

在 Vue 3 中，为了更好地管理和操作响应式数据，引入了和这两个实用函数。它们可以帮助您处理和优化与响应式数据相关的操作。

函数用于获取一个响应式对象的原始版本。这意味着它会返回对象的一个非响应式版本，这在某些场景下很有用，比如当你需要将响应式对象作为参数传递给不支持响应式数据的函数或库时。

使用示例:

函数用于标记一个对象，使其永远都不会被转换成响应式的。这对于那些大型的对象或者外部库返回的对象非常有用，因为这些对象可能包含复杂的内部结构，转换为响应式可能会消耗大量的性能资源。

使用示例:

讯享网

总结

用于获取响应式对象的原始版本，即一个非响应式的副本。
用于标记一个对象，使其永远不会被转换成响应式的。

选择哪个？

如果你需要暂时性地禁用一个响应式对象的响应性，可以选择。
如果你需要永久性地禁用一个对象的响应性，可以使用。

这两种方法都可以帮助您更好地控制和优化应用程序中的响应式数据管理。使用可以在需要时临时禁用响应性，而使用可以避免不必要的性能开销。

是 Vue 3 中的一个实用工具，它允许您创建自定义的响应式引用类型。通过，您可以实现更复杂的逻辑，比如自定义值的读取和写入行为、延迟更新、缓存值等。

使用的基本步骤：

定义一个类：继承自并实现和方法。
实现方法：当值被读取时调用，用于追踪依赖。
实现方法：当值被修改时调用，用于触发依赖的更新。
定义和方法：实现自定义的读取和写入逻辑。

作用：创建一个自定义的，并对其依赖项跟踪和更新触发进行逻辑控制。

实现防抖效果（）：

总结

允许您创建自定义的响应式引用类型，实现更复杂的逻辑。
定义类：继承自并实现和方法。
实现逻辑：通过和方法自定义读取和写入行为。
使用：通过函数创建自定义引用。

通过，您可以实现许多有趣的功能，比如缓存值、防抖更新、懒加载等。这对于构建高性能和复杂的应用程序非常有用。

是 Vue 3 中引入的一个非常有用的全局 API，它允许您将组件渲染到 DOM 中的任意位置，而不受组件树的限制。这在实现模态框、弹出菜单、工具提示等 UI 元素时非常有用，因为这些元素通常需要放置在页面的特定位置，而不仅仅是当前组件的子节点。

Teleport 的基本用法

HTML 结构

首先，在 HTML 中定义一个接收 Teleport 渲染内容的容器，通常位于或者标签内：

讯享网

Vue 组件中使用 Teleport

在 Vue 组件中使用非常简单，只需要在模板中使用标签，并为其指定属性，指向之前定义的接收容器。

等待异步组件时渲染一些额外内容，让应用有更好的用户体验
使用步骤：
- 异步引入组件
- 使用包裹组件，并配置好与

Suspense 的基本用法

异步组件

首先，你需要创建一个异步组件。在 Vue 3 中，你可以使用函数来创建一个异步组件。这个函数接受一个工厂函数作为参数，该工厂函数会在需要的时候返回一个 Promise，该 Promise 解析后的值就是组件的定义。

讯享网

使用 Suspense

接下来，在你的模板中使用组件包裹异步组件。组件有两个特殊的插槽：和。插槽用于放置异步组件，而插槽的内容会在异步组件加载完成之前显示。

特性

默认和回退插槽：组件提供了两个特殊的插槽：和。插槽用于放置需要加载的异步组件，插槽则用于在组件加载完成前显示占位内容。
错误处理：如果你的异步组件加载失败，你可以使用事件来处理这种情况。

注意事项

避免滥用：虽然是一个强大的功能，但是过度使用可能会导致应用结构变得复杂。尽量只在需要的地方使用它。
性能考量：使得 Vue 能够更高效地管理异步组件的加载，但是在一些极端情况下，可能会对性能产生影响，特别是当多个异步组件同时加载时。

总结

是 Vue 3 中用于处理异步组件加载状态的一个非常实用的功能。它可以帮助你优雅地处理组件加载中的状态，以及错误处理。通过使用，你可以轻松地提升用户体验，特别是在那些依赖于异步数据的应用场景中。

在 Vue 3 中，为了更好地组织和管理全局 API，一些原本作为全局函数提供的 API 被移动到了 Vue 应用实例 () 上。这样做有助于将全局 API 的作用域限定在一个具体的 Vue 应用中，从而避免全局命名冲突，并提供更清晰的 API 使用方式。

移动的全局 API

以下是一些从全局函数转移到 Vue 应用实例 () 上的 API：

- 用途：注册全局组件。
- 以前的全局函数：
- 新的 API：
- 用途：注册全局指令。
- 以前的全局函数：
- 新的 API：
- 用途：访问和修改 Vue 的配置选项。
- 以前的全局对象：
- 新的 API：
- 用途：注册插件。
- 以前的全局函数：
- 新的 API：
和
- 用途：提供和注入依赖。
- 以前的全局函数：在组件内使用和选项。
- 新的 API：在组件内使用函数中的和语法。
- 用途：挂载 Vue 应用到 DOM。
- 以前的全局函数：
- 新的 API：

示例

创建 Vue 应用实例

讯享网

注册全局组件

注册全局指令

讯享网

注册插件

配置选项

讯享网

挂载应用

总结

迁移原因：为了提供更清晰的作用域和避免全局命名冲突。
新 API：现在这些 API 都可以通过 Vue 应用实例 () 访问。
优势：更加模块化和易于维护。

通过这种方式，您可以更轻松地管理您的 Vue 应用，并且避免在项目中出现全局命名冲突的问题。这种方式也使得代码更加清晰和易于理解。

2025年vue教程菜鸟教程（vue3 菜鸟教程）

1.1 Vue是什么

1.2 为什么学习Vue

1.3 渐进式框架

1.4 Vue版本

2.1 Node.js 安装

2.2 基于vite创建

2.3 简单介绍

2.4 模版语法

3.1 什么是Vue3

3.2 Vue3的起点setup

setup 语法糖

3.3 ref 基本类型的响应式数据

3,4 reactive 对象类型的响应式数据

3.5 ref 对象类型的响应式数据

3.6 toRefs 与 toRef

3.7 computed 计算属性

基础用法

Getter & Setter

特性总结

3.8 watch 监视

情况一 较多使用

情况二

情况三

情况四 较多使用

情况五

停止监视

3.9 watchEffect

3.10 标签的 ref 属性

3.11 TS 接口，泛型，自定义类型

接口（Interfaces）

泛型（Generics）

自定义类型（Custom Types）

3.12 props 父传子数据

1. 父组件中准备数据

2. 子组件中声明props

3.13 生命周期

Vue2的生命周期

Vue3的生命周期

3.14 自定义hook

4.1 路由

4.2 Vue Router

创建路由

集成Vue Router到Vue应用

使用路由

4.3 两个注意点

4.4 to的两种写法

4.5 路由器的工作模式

4.6 命名路由

4.7 嵌套路由

设置路由

使用嵌套路由

4.8 路由传参

query参数

params参数

4.9 路由的props配置

4.10 replace属性

4.11 编程式导航

4.12 重定向

Pinia 的特点

5.1、安装 Pinia

5.2、创建 Store

创建一个 store 文件

5.3、使用 Store

在组件中使用 store

5.4、修改pinia数据

1、第一种修改方式，直接修改

2、第二种修改方式：批量修改

3、第三种修改方式：借助修改（中可以编写一些业务逻辑）

5.5 storeToRefs

5.6 getters

5.7 $subscribe 订阅

5.8 store组合式写法

1. 默认插槽

2. 具名插槽

更简洁的语法：

3. 作用域插槽

使用示例:

使用示例:

总结

情况一较多使用

情况四较多使用

使用的基本步骤：