【前端】Vue3+TypeScript笔记

创建Vue3工程

推荐基于 vite 创建（需 node.js）

npm create vue@latest   #创建项目
npm i   #安装依赖
npm run dev   #运行项目

Vue3核心语法

OptionsAPI 与 CompositionAPI

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

setup

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

setup 与 Options API 的关系:

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

setup语法糖:

<script setup lang="ts">
</script>

ref 创建：基本类型的响应式数据

<script setup lang="ts">
   import {ref} from 'vue'
   let arr=ref([])
</script>

reactive 创建：对象类型的响应式数据

ref 创建：对象类型的响应式数据

• 其实ref接收的数据可以是：基本类型、对象类型。
• 若ref接收的是对象类型，内部其实也是调用了reactive函数。

TS中的接口、泛型、自定义类型

Vue 生命周期

• 创建前(beforeCreate) / 创建(created)
• 挂载前(beforeMount) /挂载(mounted)
• 更新前(beforeUpdate) / 更新(updated)
• 销毁前(beforeDestroy) / 销毁(destroyed)

自定义Hooks

• 需要axios

  npm i axios   //安装axios
  import axios from 'axios'   //引入axios

路由

• 单页面应用SPA(Single Page web Application)

• 创建一个路由器，并暴露出去

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

路由器工作模式

1. history模式
   适合to C

• 优点：URL更加美观，不带有#，更接近传统的网站URL。
• 缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有404错误。

2. hash模式
   适合to B

• 优点：兼容性更好，因为不需要服务器端处理路径。
• 缺点：URL带有#不太美观，且在SEO优化方面相对较差。

路由传参

• query参数
• params参数

路由的props配置

路由replace

编程式导航

路由组件的两个重要的属性：$route和$router变成了两个hooks

使用情景：几秒后去广告/登录成功跳转等

Pinia

集中式状态管理

• 安装Pinia

  npm i pinia

组件通信

• props
• 自定义事件
• mitt
• v-model
• $attrs
• $refs、$parent
• provide、inject
• pinia
• slot
  • 默认插槽
  • 具名插槽
  • 作用域插槽

其他API

shallowRef 与 shallowReactive

通过使用 shallowRef() 和 shallowReactive() 来绕开深度响应。浅层式 API 创建的状态只在其顶层是响应式的，对所有深层的对象不会做任何处理，避免了对每一个内部属性做响应式所带来的性能成本，这使得属性的访问变得更快，可提升性能。

readonly 与 shallowReadonly

readonly

1. 作用：用于创建一个对象的深只读副本。

2. 用法：

   const original = reactive({ ... });
   const readOnlyCopy = readonly(original);

3. 特点：

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

4. 应用场景：

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

shallowReadonly

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

2. 用法：

   const original = reactive({ ... });
   const shallowReadOnlyCopy = shallowReadonly(original);

3. 特点：

   • 只将对象的顶层属性设置为只读，对象内部的嵌套属性仍然是可变的。

   • 适用于只需保护对象顶层属性的场景。

toRaw 与 markRaw

toRaw

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

   官网描述：这是一个可以用于临时读取而不引起代理访问/跟踪开销，或是写入而不触发更改的特殊方法。不建议保存对原始对象的持久引用，请谨慎使用。

   何时使用？ —— 在需要将响应式对象传递给非 Vue 的库或外部系统时，使用 toRaw 可以确保它们收到的是普通对象

markRaw

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

   例如使用mockjs时，为了防止误把mockjs变为响应式对象，可以使用 markRaw 去标记mockjs

customRef

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

Vue3新组件

Teleport

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

Suspense

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

全局API转移到应用对象

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

其他

• 过渡类名 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。