

首页  思维导图  详情



尚硅谷-Vue3

2024-11-24 22:01:21   4  举报





AI智能生成

前端vue3教程

前端开发 vue3

UI设计

模版推荐

作者其他创作

大纲/内容

6. 组件通信

Vue3组件通信和Vue2的区别

事件总线➡mitt。 vuex➡pinia。 把.sync优化到了v-model里面了。 把$listeners所有的东西，合并到$attrs中了。 $children被砍掉了。

常见搭配形式

6.1. 【props】

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

父组件

子组件

6.2. 【自定义事件】

概述：自定义事件常用于：子 => 父。

注意区分好：原生事件、自定义事件。

示例

父组件

子组件

6.3. 【mitt】

使用步骤

安装mitt

新建emitter.ts

接收数据的组件

提供数据的组件

6.4.【v-model】

前序知识：v-model的本质

组件标签上的v-model的本质

:moldeValue ＋ update:modelValue事件

AtguiguInput组件中

也可以更换value

例如改成abc

AtguiguInput组件中

如果value可以更换，那么就可以在组件标签上多次使用v-model

6.6. 【refs、parent】

原理

6.5.【$attrs 】

概述：$attrs用于实现当前组件的父组件，向当前组件的子组件通信（祖→孙）。

具体说明：$attrs是一个对象，包含所有父组件传入的标签属性。

父组件

子组件

孙组件

6.7. 【provide、inject】

具体使用

在祖先组件中通过provide配置向后代组件提供数据

在后代组件中通过inject配置来声明接收数据

具体编码

【第一步】父组件中，使用provide提供数据

【第二步】孙组件中使用inject配置项接受数据。

6.8. 【pinia】

6.9. 【slot】

1. 默认插槽

父组件中

子组件中

2. 具名插槽

父组件中

子组件中

3. 作用域插槽

理解

数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（新闻数据在News组件中，但使用数据所遍历出来的结构由App组件决定）

具体编码

父组件中

子组件中

6.10 【defineExpose】

概述

defineExpose 主要用于在子组件中暴露方法和属性，以便父组件通过 ref 访问它们。 它并不直接允许子组件访问父组件的属性或方法，但可以通过暴露子组件的方法，间接 实现与父组件的交互。

工作原理

子组件暴露

使用 defineExpose，子组件可以明确指定哪些属性和方法可以被父组件访问。

父组件访问

父组件通过 ref 引用子组件，并可以调用子组件暴露的方法或访问其暴露的属性。

总结

defineExpose 是一种控制组件暴露接口的机制，旨在简化父组件与子组件之间的交互。 它通过让子组件明确暴露其接口，增强了组件的可重用性和封装性，但不直接支持子组 件访问父组件的功能。

例子

父组件

子组件

7. 其它API

7.1.【shallowRef 与 shallowReactive 】

shallowRef

作用

创建一个响应式数据，但只对顶层属性进行响应式处理。

用法

特点

只跟踪引用值的变化，不关心值内部的属性变化。

shallowReactive

作用

创建一个浅层响应式对象，只会使对象的最顶层属性变成响应式的，对象内部的嵌套属性则不会变成响应式的

用法

特点

对象的顶层属性是响应式的，但嵌套对象的属性不是。

7.2.【readonly 与 shallowReadonly】

readonly

作用

用于创建一个对象的深只读副本。

用法

特点

对象的所有嵌套属性都将变为只读。 任何尝试修改这个对象的操作都会被阻止（在开发模式下，还会在控制台中发出警告）。

应用场景

创建不可变的状态快照。 保护全局状态或配置不被修改。

shallowReadonly

作用

与 readonly 类似，但只作用于对象的顶层属性。

用法

特点

只将对象的顶层属性设置为只读，对象内部的嵌套属性仍然是可变的。 适用于只需保护对象顶层属性的场景。

7.3.【toRaw 与 markRaw】

toRaw

作用

用于获取一个响应式对象的原始对象， toRaw 返回的对象不再是响应式的，不会触发视图更新。

具体编码

markRaw

作用

标记一个对象，使其永远不会变成响应式的。

编码

7.4.【customRef】

作用

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

实现防抖效果（useSumRef.ts）

8. vue3新组件

8.1. 【Teleport】

什么是Teleport？—— Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。

代码

8.2. 【Suspense】

等待异步组件时渲染一些额外内容，让应用有更好的用户体验

使用步骤

异步引入组件

使用Suspense包裹组件，并配置好default 与 fallback

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

app.component app.config app.directive app.mount app.unmount app.use

8.4.【其他】

过渡类名 v-enter 修改为 v-enter-from、过渡类名 v-leave 修改为 v-leave-from。 keyCode 作为 v-on 修饰符的支持。 v-model 指令在组件上的使用已经被重新设计，替换掉了 v-bind.sync。 v-if 和 v-for 在同一个元素身上使用时的优先级发生了变化。 移除了$on、$off 和 $once 实例方法。 移除了过滤器 filter。 移除了$children 实例 propert。 …

9. element-plus

安装 Element Plus

在项目中引入 Element Plus

全局引入 Element Plus

编辑 main.js 文件

按需引入（推荐）

安装按需加载相关的插件

然后在 vite.config.js 中配置插件

使用 Element Plus 组件

1. vue3简介

概述

2020年9月18日，Vue.js发布版3.0版本，代号：One Piece（n 经历了：4800+次提交、40+个RFC、600+次PR、300+贡献者 官方发版地址：Release v3.0.0 One Piece · vuejs/core 截止2023年10月，最新的公开版本为：3.3.4

1.1. 【性能的提升】

打包大小减少41%。 初次渲染快55%, 更新渲染快133%。 内存减少54%。

1.2.【源码的升级】

使用Proxy代替defineProperty实现响应式。 重写虚拟DOM的实现和Tree-Shaking。

1.3. 【拥抱TypeScript】

Vue3可以更好的支持TypeScript。

1.4. 【新的特性】

1. Composition API（组合API）

setup ref与reactive computed与watch …

2. 新的内置组件

Fragment Teleport Suspense …

3. 其他改变

新的生命周期钩子 data 选项应始终被声明为一个函数 移除keyCode支持作为 v-on 的修饰符 …

2. 创建vue3工程

2.1. 【基于 vue-cli 创建】

官方文档

创建流程

2.2. 【基于 vite 创建】

官网地址

特点

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

具体操作如下

自己动手编写一个App组件

总结

Vite 项目中，index.html 是项目的入口文件，在项目最外层。

加载index.html后，Vite 解析 <script type="module" src="xxx"> 指向的JavaScript。

Vue3**中是通过 **createApp 函数创建一个应用实例。

2.3. 【一个简单的效果】

国内源

3. vue3核心语法

3.1. 【OptionsAPI 与 CompositionAPI】

Options API 的弊端

Composition API 的优势

3.2. 【拉开序幕的 setup】

setup例子

setup 概述

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

特点

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

setup 的返回值

若返回一个对象：则对象中的：属性、方法等，在模板中均可以直接使用**（重点关注）。**

若返回一个函数：则可以自定义渲染内容，代码如下：

setup 与 Options API 的关系

Vue2 的配置（data、methos…）中可以访问到 setup中的属性、方法。 但在setup中不能访问到Vue2的配置（data、methos…）。 如果与Vue2冲突，则setup优先。

setup 语法糖

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

setup语法糖扩展

第一步

npm i vite-plugin-vue-setup-extend -D

第二步

修改：vite.config.ts

第三步

3.3. 【ref 创建：基本类型的响应式数据】

语法

注意点

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

例子

3.5. 【ref 创建：对象类型的响应式数据】

3.6. 【ref 对比 reactive】

宏观角度看

ref用来定义：基本类型数据、对象类型数据； reactive用来定义：对象类型数据。

区别

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

ref可以重新分配一个新对象

例子

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

使用原则

若需要一个基本类型的响应式数据，必须使用ref。 若需要一个响应式对象，层级不深，ref、reactive都可以。 若需要一个响应式对象，且层级较深，推荐使用reactive。

3.7. 【toRefs 与 toRef】

作用

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

备注

toRefs与toRef功能一致，但toRefs可以批量转换。

语法

3.8. 【computed】

3.9.【watch】

作用

监视数据的变化（和Vue2中的watch作用一致）

特点

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

ref定义的数据。 reactive定义的数据。 函数返回一个值（getter函数）。 一个包含上述内容的数组。

使用情况

* 情况一

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

* 情况二

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

* 情况三

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

* 情况四

监视ref或reactive定义的【对象类型】数据中的某个属性

* 情况五

监视上述的多个数据

3.10. 【watchEffect】

watch对比watchEffect

都能监听响应式数据的变化，不同的是监听数据变化的方式不同 watch：要明确指出监视的数据 watchEffect：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）。

示例

3.11. 【标签的 ref 属性】

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

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

3.12. 【props】

子主题

App.vue

Person.vue

3.13. 【生命周期】

概念

Vue组件实例在创建时要经历一系列的初始化步骤，在此过程中Vue会在合适的时机，调用特定的函数，从而让开发者有机会在特定阶段运行自己的代码，这些特定的函数统称为：生命周期钩子

规律

生命周期整体分为四个阶段，分别是：创建、挂载、更新、销毁，每个阶段都有两个钩子，一前一后。

Vue2的生命周期

创建阶段：beforeCreate、created 挂载阶段：beforeMount、mounted 更新阶段：beforeUpdate、updated 销毁阶段：beforeDestroy、destroyed

Vue3的生命周期

创建阶段：setup 挂载阶段：onBeforeMount、onMounted 更新阶段：onBeforeUpdate、onUpdated 卸载阶段：onBeforeUnmount、onUnmounted

常用的钩子

onMounted(挂载完毕)、onUpdated(更新完毕)、onBeforeUnmount(卸载之前)

示例代码

3.14. 【自定义hook】

什么是hook？

本质是一个函数，把setup函数中使用的Composition API进行了封装，类似于vue2.x中的mixin。

自定义hook的优势

复用代码, 让setup中的逻辑更清楚易懂。

示例代码

useSum.ts

useDog.ts

组件中具体使用

4. 路由

4.1. 【对路由的理解】

4.2. 【基本切换效果】

index.ts

main.ts代码

App.vue代码

4.3. 【两个注意点】

4.4.【路由器工作模式】

history模式

hash模式

4.5. 【to的两种写法】

4.6. 【命名路由】

给路由规则命名

跳转路由

4.7. 【嵌套路由】

1. 编写News的子路由：Detail.vue

2. 配置路由规则，使用children配置项：

3. 跳转路由（记得要加完整路径）

4. 记得去Home组件中预留一个<router-view>

4.8. 【路由传参】

query参数

传递参数

接收参数

params参数

传递参数

接收参数

4.9. 【路由的props配置】

4.10. 【 replace属性】

浏览器的历史记录有两种写入方式

分别为push和replace

开启replace模式

4.11. 【编程式导航】

4.12. 【重定向】

具体编码

5. pinia

5.1【准备一个效果】

5.2【搭建 pinia 环境】

第一步：安装  Pinia

第二步：初始化Pinia

main.js（或 main.ts）

5.3【存储+读取数据】 

创建PiniaStore 

src/store/talk.ts

在组件中使用 Pinia Store

5.4.【修改数据】(三种方式)

直接修改

批量修改

借助action修改

组件中调用action即可

5.5.【storeToRefs】

5.6.【getters】

追加getters配置

组件中读取数据

5.7.【$subscribe】

通过 store 的 $subscribe() 方法侦听 state 及其变化

5.8. 【store组合式写法】

 Collect

Get Started

Vue3新文档-1.1简介

 Collect

Get Started

AQS 原理-尚硅谷周阳

 Collect

Get Started

vue3解析步骤

 Collect

Get Started

Vue3学习笔记整理





0 条评论

下一页