尚硅谷-Vue3
2024-10-07 09:49:23 1 举报AI智能生成
前端vue3教程
作者其他创作
大纲/内容
5.1【准备一个效果】
第一步：npm install pinia
此时开发者工具中已经有了pinia选项
第二步：操作src/main.ts
5.2【搭建 pinia 环境】
src/store/count.ts
src/store/talk.ts
子主题
组件中使用state中的数据
5.3【存储+读取数据】
直接修改
批量修改
组件中调用action即可
借助action修改
5.4.【修改数据】(三种方式)
5.5.【storeToRefs】
追加getters配置
组件中读取数据
5.6.【getters】
通过 store 的 $subscribe() 方法侦听 state 及其变化
5.7.【$subscribe】
5.8. 【store组合式写法】
5.pinia
事件总线➡mitt。vuex➡pinia。把.sync优化到了v-model里面了。把$listeners所有的东西，合并到$attrs中了。$children被砍掉了。
Vue3组件通信和Vue2的区别
常见搭配形式
概述：props是使用频率最高的一种通信方式，常用与 ：父 ↔ 子。
父组件
子组件
6.1. 【props】
概述：自定义事件常用于：子 => 父。
注意区分好：原生事件、自定义事件。
示例
6.2. 【自定义事件】
安装mitt
新建emitter.ts
接收数据的组件
提供数据的组件
使用步骤
6.3. 【mitt】
前序知识 ：v-model的本质
:moldeValue ＋ update:modelValue事件
AtguiguInput组件中
组件标签上的v-model的本质
例如改成abc
也可以更换value
如果value可以更换，那么就可以在组件标签上多次使用v-model
6.4.【v-model】
概述：$attrs用于实现当前组件的父组件，向当前组件的子组件通信（祖→孙）。
具体说明：$attrs是一个对象，包含所有父组件传入的标签属性。
孙组件
6.5.【$attrs 】
原理
6.6. 【refs 、refs、refs、parent】
在祖先组件中通过provide配置向后代组件提供数据
在后代组件中通过inject配置来声明接收数据
具体使用
【第一步】父组件中，使用provide提供数据
【第二步】孙组件中使用inject配置项接受数据。
具体编码
6.7. 【provide、inject】
6.8. 【pinia】
父组件中
子组件中
1. 默认插槽
2. 具名插槽
数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（新闻数据在News组件中，但使用数据所遍历出来的结构由App组件决定）
理解
3. 作用域插槽
6.9. 【slot】
6.组件通信
创建一个响应式数据，但只对顶层属性进行响应式处理。
作用
用法
只跟踪引用值的变化，不关心值内部的属性变化。
特点
shallowRef
创建一个浅层响应式对象，只会使对象的最顶层属性变成响应式的，对象内部的嵌套属性则不会变成响应式的
对象的顶层属性是响应式的，但嵌套对象的属性不是。
shallowReactive
7.1.【shallowRef 与 shallowReactive 】
用于创建一个对象的深只读副本。
对象的所有嵌套属性都将变为只读。任何尝试修改这个对象的操作都会被阻止（在开发模式下，还会在控制台中发出警告）。
创建不可变的状态快照。保护全局状态或配置不被修改。
应用场景
readonly
与 readonly 类似，但只作用于对象的顶层属性。
只将对象的顶层属性设置为只读，对象内部的嵌套属性仍然是可变的。适用于只需保护对象顶层属性的场景。
shallowReadonly
7.2.【readonly 与 shallowReadonly】
用于获取一个响应式对象的原始对象， toRaw 返回的对象不再是响应式的，不会触发视图更新。
toRaw
标记一个对象，使其永远不会变成响应式的。
编码
markRaw
7.3.【toRaw 与 markRaw】
创建一个自定义的ref，并对其依赖项跟踪和更新触发进行逻辑控制。
实现防抖效果（useSumRef.ts）
7.4.【customRef】
7.其它API
通过使用 shallowRef() 和 shallowReactive() 来绕开深度响应。浅层式 API 创建的状态只在其顶层是响应式的，对所有深层的对象不会做任何处理，避免了对每一个内部属性做响应式所带来的性能成本，这使得属性的访问变得更快，可提升性能。
什么是Teleport？—— Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。
代码
8.1. 【Teleport】
等待异步组件时渲染一些额外内容，让应用有更好的用户体验
异步引入组件
使用Suspense包裹组件，并配置好default 与 fallback
8.2. 【Suspense】
app.componentapp.configapp.directiveapp.mountapp.unmountapp.use
8.3.【全局API转移到应用对象】
过渡类名 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。…
8.4.【其他】
8.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. 【性能的提升】
使用Proxy代替defineProperty实现响应式。重写虚拟DOM的实现和Tree-Shaking。
1.2.【 源码的升级】
Vue3可以更好的支持TypeScript。
1.3. 【拥抱TypeScript】
setupref与reactivecomputed与watch…
1. Composition API（组合API）
FragmentTeleportSuspense…
2. 新的内置组件
新的生命周期钩子data 选项应始终被声明为一个函数移除keyCode支持作为 v-on 的修饰符…
3. 其他改变
1.4. 【新的特性】
1.vue3简介
官方文档
创建流程
2.1. 【基于 vue-cli 创建】
官网
官网地址
轻量快速的热重载（HMR），能实现极速的服务启动。对 TypeScript、JSX、CSS 等支持开箱即用。真正的按需编译，不再等待整个应用编译完成。webpack构建 与 vite构建对比图如下：
具体操作如下
自己动手编写一个App组件
Vite 项目中，index.html 是项目的入口文件，在项目最外层。
加载index.html后，Vite 解析 <script type=\"module\" src=\"xxx\"> 指向的JavaScript。
Vue3**中是通过 **createApp 函数创建一个应用实例。
总结
2.2. 【基于 vite 创建】(推荐)
2.3. 【一个简单的效果】
2.创建vue3工程
Options API 的弊端
Composition API 的优势
3.1. 【OptionsAPI 与 CompositionAPI】
setup例子
setup是Vue3中一个新的配置项，值是一个函数，它是 Composition API “表演的舞台”，组件中所用到的：数据、方法、计算属性、监视…等等，均配置在setup中。
setup 概述
setup函数返回的对象中的内容，可直接在模板中使用。setup中访问this是undefined。setup函数会在beforeCreate之前调用，它是“领先”所有钩子执行的。
若返回一个对象：则对象中的：属性、方法等，在模板中均可以直接使用**（重点关注）。**
若返回一个函数：则可以自定义渲染内容，代码如下：
setup 的返回值
Vue2 的配置（data、methos…）中可以访问到 setup中的属性、方法。但在setup中不能访问到Vue2的配置（data、methos…）。如果与Vue2冲突，则setup优先。
setup 与 Options API 的关系
setup函数有一个语法糖，这个语法糖，可以让我们把setup独立出去，代码如上
setup 语法糖
npm i vite-plugin-vue-setup-extend -D
第一步
修改：vite.config.ts
第二步
第三步
setup语法糖扩展
3.2. 【拉开序幕的 setup】
语法
JS中操作数据需要：xxx.value，但模板中不需要.value，直接使用即可。对于let name = ref('张三')来说，name不是响应式的，name.value是响应式的。
注意点
例子
3.3. 【ref 创建：基本类型的响应式数据】
3.5. 【ref 创建：对象类型的响应式数据】
ref用来定义：基本类型数据、对象类型数据；reactive用来定义：对象类型数据。
宏观角度看
ref创建的变量必须使用.value（可以使用volar插件自动添加.value）。
reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）
区别
若需要一个基本类型的响应式数据，必须使用ref。若需要一个响应式对象，层级不深，ref、reactive都可以。若需要一个响应式对象，且层级较深，推荐使用reactive。
使用原则
3.6. 【ref 对比 reactive】
将一个响应式对象中的每一个属性，转换为ref对象。
toRefs与toRef功能一致，但toRefs可以批量转换。
备注
3.7. 【toRefs 与 toRef】
3.8. 【computed】
监视数据的变化（和Vue2中的watch作用一致）
ref定义的数据。reactive定义的数据。函数返回一个值（getter函数）。一个包含上述内容的数组。
Vue3中的watch只能监视以下四种数据：
监视ref定义的【基本类型】数据：直接写数据名即可，监视的是其value值的改变。
* 情况一
监视ref定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要手动开启深度监视。
* 情况二
监视reactive定义的【对象类型】数据，且默认开启了深度监视。
* 情况三
监视ref或reactive定义的【对象类型】数据中的某个属性
* 情况四
监视上述的多个数据
* 情况五
使用情况
3.9.【watch】
都能监听响应式数据的变化，不同的是监听数据变化的方式不同watch：要明确指出监视的数据watchEffect：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）。
watch对比watchEffect
3.10. 【watchEffect】
用在普通DOM标签上，获取的是DOM节点。
用在组件标签上，获取的是组件实例对象。
3.11. 【标签的 ref 属性】
App.vue
Person.vue
3.12. 【props】
Vue组件实例在创建时要经历一系列的初始化步骤，在此过程中Vue会在合适的时机，调用特定的函数，从而让开发者有机会在特定阶段运行自己的代码，这些特定的函数统称为：生命周期钩子
概念
生命周期整体分为四个阶段，分别是：创建、挂载、更新、销毁，每个阶段都有两个钩子，一前一后。
规律
创建阶段：beforeCreate、created挂载阶段：beforeMount、mounted更新阶段：beforeUpdate、updated销毁阶段：beforeDestroy、destroyed
Vue2的生命周期
创建阶段：setup挂载阶段：onBeforeMount、onMounted更新阶段：onBeforeUpdate、onUpdated卸载阶段：onBeforeUnmount、onUnmounted
Vue3的生命周期
onMounted(挂载完毕)、onUpdated(更新完毕)、onBeforeUnmount(卸载之前)
常用的钩子
示例代码
3.13. 【生命周期】
本质是一个函数，把setup函数中使用的Composition API进行了封装，类似于vue2.x中的mixin。
什么是hook？
自定义hook的优势
useSum.ts
useDog.ts
组件中具体使用
3.14. 【自定义hook】
3.vue3核心语法
4.1. 【对路由的理解】
路由配置文件代码
main.ts代码
App.vue代码
4.2. 【基本切换效果】
4.3. 【两个注意点】
history模式
hash模式
4.4.【路由器工作模式】
4.5. 【to的两种写法】
给路由规则命名
跳转路由
4.6. 【命名路由】
1. 编写News的子路由：Detail.vue
2. 配置路由规则，使用children配置项：
3. 跳转路由（记得要加完整路径）
4. 记得去Home组件中预留一个<router-view>
4.7. 【嵌套路由】
传递参数
接收参数
query参数
params参数
4.8. 【路由传参】
4.9. 【路由的props配置】
分别为push和replace
浏览器的历史记录有两种写入方式
开启replace模式
4.10. 【 replace属性】
4.11. 【编程式导航】
4.12. 【重定向】
4.路由
尚硅谷-Vue3
0 条评论
回复 删除
下一页
