Typescript+组合式API+setup语法糖

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

• 打包大小减少。

• 初次渲染快, 更新渲染快。

• 内存减少。

• 使用代替实现响应式。

• 重写虚拟的实现和。

• 可以更好的支持。

• （组合）：

  • 与

  • 与

    ......

• 新的内置组件：

  • ......

• 其他改变：

  • 新的生命周期钩子

  •  选项应始终被声明为一个函数

  • 移除支持作为 的修饰符

    ......

    点击查看官方文档

    备注：目前已处于维护模式，官方推荐基于  创建项目。

 是新一代前端构建工具，官网地址：https://vitejs.cn，的优势如下：

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

 构建：

构建： 

• 具体操作如下（点击查看官方文档）

 项目介绍：

总结：

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

 

  在创建应用，每一个应用都有一个根组件，根组件就是APP，创建完了这个成功摆在id为APP的div里。这个div在index.html里

 向下兼容语法，且中的模板中可以没有根标签

• 的设计是（配置）风格的。
  • 的设计是（组合）风格的。

Options API 的弊端

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

Composition API 的优势

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

 

 

setup 概述

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

特点如下：

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

  setup 的返回值

• 若返回一个对象：则对象中的：属性、方法等，在模板中均可以直接使用**（重点关注）。**
• 若返回一个函数：则可以自定义渲染内容，代码如下：

  setup 与 Options API 的关系

•  的配置（、......）中可以访问到 中的属性、方法。(旧语法可以读取到新语法)
• 但在中不能访问到的配置（、......）。//
• 如果与冲突，则优先。

setup 语法糖

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

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

1. 第一步：

2. 第二步：

1. 3.第三步：

• **作用：**定义响应式变量。
• 语法：。
• **返回值：**一个的实例对象，简称或，对象的属性是响应式的。
• 注意点：
  • 中操作数据需要：，但模板中不需要，直接使用即可。
  • 何时需要？模板中不需要；包裹在响应式对象里面的ref不需要；未包裹的ref需要。
  • 对于来说，不是响应式的，是响应式的。

• 作用：定义一个响应式对象（基本类型不要用它，要用，否则报错）
• 语法：。
• **返回值：**一个的实例对象，简称：响应式对象。
• 注意点：定义的响应式数据是“深层次”的。

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

宏观角度看：

1. 用来定义：基本类型数据、对象类型数据；

2. 用来定义：对象类型数据。

• 区别：

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

 

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

• 使用原则：

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

• 作用：将一个响应式对象中的每一个属性，转换为对象。并且改变解构的值，也会影响到原响应式对象的值。
• 备注：与功能一致，但可以批量转换。
• 语法如下：

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

实现同样的功能，方法function没有缓存，模板调用几次，函数就执行几次；计算属性computed有缓存，模板调用多次，实际上只执行一次。

计算属性实际上是一个ref响应式对象，因此赋值时候需要加上

 

• 作用：监视数据的变化（和中的作用一致）
• 特点：中的只能监视以下四种数据：

1. 定义的数据。
2. 定义的数据。
3. 函数返回一个值（函数）。
4. 一个包含上述内容的数组。

我们在中使用的时候，通常会遇到以下几种情况：

* 情况一

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

* 情况二

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

注意：

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

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

* 情况三

监视定义的【对象类型】数据，且默认开启了深度监视，且深层监视无法关闭。

无法监视地址值，因为对象地址值没有改变，本质上assign在原对象上进行的是赋值。

和值相同，都是新值，还是因为对象地址值没有改变，本质上assign在原对象上进行的是赋值。

* 情况四

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

1. 若该属性值不是【对象类型】即【基本类型】，需要写成函数形式，此时oldValue是旧值，newValue是新值。

2. 若该属性值是依然是【对象类型】，可直接编，也可写成函数，建议写成函数。

**直接写：**可以监视到对象内部属性a，b...的变化，但是监视不到整体的变化。整体改变时，对象地址值变化了，所以监视不到了。

**写函数（不开启深度监视）：**监视不到对象内部属性a，b...的变化，但是可以监视到整体的变化，函数返回值监视的是对象的地址值，改变整体是产生一个新对象，所以能监视到，并且新值是新值，旧值是旧值。（不过对象内部属性a，b...的新旧值都是新值）

**写函数（开启深度监视）推荐：**既能监视到对象内部属性a，b...的变化，也可以监视到整体的变化，函数返回值监视的是对象的地址值，改变整体是产生一个新对象，所以能监视到，并且新值是新值，旧值是旧值。（不过对象内部属性a，b...的新旧值都是新值）

结论：监视的要是对象里的属性，那么最好写函数式。

注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。

* 情况五

监视上述的多个数据

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

• 对比

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

  2. ：要明确指出监视的数据

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

作用：用于注册模板引用。给节点打标识的

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

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

 用在普通标签上：

 用在组件标签上：

 

注释：

  暴露方式:1.默认暴露/2.分别暴露export/3.统一暴露 

  在脚手架中@代表脚手架的顶端

 defineProps->定义一个外部来的数据

 关于冒号：

中代码： 

中代码：

• defineProps<{list?:Persons}>() 这个?表示父亲可传可不传，也就是用list?限制必要性
• 制定默认值：用withDefaults包裹->伴随默认值，当父亲不传的时候显示默认值，withDefaults（defineProps<{list?:Persons}>() ，{默认值->对象}）
•  list:()=>[{id:'asdasg01',name:'小猪佩奇',age:18}]--> 说明接收list，后边是一个函数返回一个值

总结：

withDefaults是配置默认值，defineProps是接收。

list?这个东西可传可不传，传的话必须是Persons类型，父亲不传默认值起作用 

注释：definExpose与 defineProps都带 define属于宏函数，可以不用引入直接使用

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

• 规律：

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

• 的生命周期

  创建阶段：、

  挂载阶段：、

  更新阶段：、

  销毁阶段：、

• 的生命周期

  创建阶段：

  挂载阶段：、

  更新阶段：、

  卸载阶段：、

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

 示例代码：        

hooks->把模块化发挥到极致，可以理解为可以调用的一个个函数，返回值是一个对象，有数据，方法

use+具体功能名

模块化的写法： 默认暴露：export default function(){}    //export default后边直接跟值（数字/数组/函数）

分别暴露：export  function 起一个名字(){}

也就是把数据方法封装起来，然后向外部提供东西return{数据，方法} 

• 什么是？—— 本质是一个函数，把函数中使用的进行了封装，类似于中的。

• 自定义的优势：复用代码, 让中的逻辑更清楚易懂。

示例代码：

• 中内容如下：

组件中具体使用：

 注释：

捕获异常：try{}catch(对象){}

拦截器->批量统一处理所有的错误

• 中要使用的最新版本，目前是版本（npm i vue-router）。

• 路由配置文件（src-->router-->index.ts）路由配置文件代码如下：

注意：(router-->路由器 )--管理-->>(route-->路由)

代码如下：

代码如下

1. 路由组件通常存放在 或 文件夹，一般组件通常存放在文件夹。

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

• 路由组件：靠路由规则渲染出来的。
• 一般组件：亲手写出来的标签。

1. 模式

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

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

   const router = createRouter({
   	history:createWebHistory(), //history模式
   	
   })

   各版本：

   vue2——

   vue3——

   React——

2. 模式

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

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

   const router = createRouter({
     	history:createWebHashHistory(), //hash模式
     	
   })

作用：可以简化路由跳转及传参（后面就讲）。

给路由规则命名：

跳转路由：

1. 编写的子路由：

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

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

记得去组件中预留一个 

query参数

1. 传递参数

接收参数：

params参数

1. 传递参数

   接收参数：

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

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

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

 

1. 作用：控制路由跳转时操作浏览器历史记录的模式。

2. 浏览器的历史记录有两种写入方式：分别为和：

   • 是追加历史记录（默认值）。一直指向栈顶，可以前进后退
   • 是替换当前记录。

3. 开启模式（在导航区）：

   

编程式路由导航--->脱离<Routerlink>实现路由跳转

场景：1.验证用户以及密码再跳转//2.鼠标划过跳转路由

开发：编程式路由导航的使用多于<roter-link>

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

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

2. 具体编码：一级规则后加{}redirect-->让指定的路径重新定位到另一个对象

简单直接

vue2-->vuex

vue3-->pinia

效果：

• 两个组件：

1.求和组件： 

 2.土味情话组件：

 

 

nanoid库和uuid库一样都可以生成uuid，但是nanoid相比uuid要更轻量级

第一步：

第二步：操作

 此时开发者工具中已经有了选项

1. 是一个保存：状态、业务逻辑 的实体，每个组件都可以读取、写入它。

2. 它有三个概念：、、，相当于组件中的： 、  和 。

3. 具体编码：

   

store是pinia的具体体现，pinia的落地实现是store

读：

存： 

具体编码：

 组件中使用中的数据

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

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

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

4.组件中调用即可 

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

 

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

2. 追加配置。

组件中读取数据：

通过 store 的  方法侦听  及其变化

状态管理库的订阅（subscription）功能来监听状态的变化。当状态发生改变时，会执行提供的回调函数。

常见搭配形式：

• : 是一个对象，包含了导致此次状态变更的信息，比如变更的路径、旧值、新值等，具体结构依据你使用的状态管理库（Pinia或Vuex）的实现细节而有所不同。
• : 当前的状态对象，包含了状态管理中所有的状态数据。在本例中，它可能包含了名为的状态属性。
• 这行代码将状态变更后的值序列化为JSON字符串，并将其保存到浏览器的本地存储（localStorage）中，键名为。注意，这里直接使用了，意味着应该是来自Vue的响应式引用

  组件通信和的区别：

• 移出事件总线，使用代替。
• 换成了。
• 把优化到了里面了。
• 把所有的东西，合并到中了。
• 被砍掉了。
• 

 父传子：

子传父:

 父组件->定义一个方法，

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

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

父组件：

 子组件

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

• 原生事件：
  • 事件名是特定的（、等等）
  • 事件对象: 是包含事件相关信息的对象（、、、）
• 自定义事件：
  • 事件名是任意名称
  • 事件对象: 是调用时所提供的数据，可以是任意类型！！！
  • 命名方式尽量不要驼峰式，而是采取keybab-case式，即

1. 示例：

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

安装

新建文件：

• on 触发事件
• off 移除事件
• all.clear 移除全部事件

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

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

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

1. 概述：实现 父↔子 之间相互通信。

2. 前序知识 —— 的本质

3. 

 

1. • ($event.target)这个是ts的类型断言，target一定是html元素而不为空
   • 数据到页面 
   • 页面到数据 

2. 组件标签上的的本质： ＋ 事件。

   在vue3中：

3. 数据到页面 
4. 页面到数据 

组件中： 

也可以更换，例如改成

组件中：

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

1. 关于到底是什么？什么时候能够？

   对于原生事件，就是事件对象====>能

   对于自定义事件，就是触发事件时，所传递的对象====>不能

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

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

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

父组件： 

 子组件：

孙组件：

 

1. 概述：

   • 用于 ：父→子。
   • 用于：子→父。

2. 原理如下：

   属性说明值为对象，包含所有被属性标识的元素或组件实例。值为对象，当前组件的父组件实例对象。

3. 子组件需要将数据暴露出来，父组件才能被允许使用；同样的，父组件把需要子组件操作的数据暴露出来，子组件才能拿到使用。

1. 概述：实现祖孙组件直接通信

2. 具体使用：

   • 在祖先组件中通过配置向后代组件提供数据
   • 在后代组件中通过配置来声明接收数据

3. 具体编码：

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

注意：子组件中不用编写任何东西，是不受到任何打扰的

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

参考之前部分的讲解

1. 默认插槽

2. 具名插槽

3. 作用域插槽

1. 理解：数据在组件的自身（子组件），但根据数据生成的结构需要组件的使用者（父组件）来决定。（新闻数据在组件中，但使用数据所遍历出来的结构由组件决定）

2. 具体编码

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

2. 用法：

   let myVar = shallowRef(initialValue);

3. 特点：只跟踪引用值的变化，不关心值内部的属性变化。

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

2. 用法：

   const myObj = shallowReactive({ ... });

3. 特点：对象的顶层属性是响应式的，但嵌套对象的属性不是。

总结

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

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

2. 用法：

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

3. 特点：

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

4. 应用场景：

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

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

2. 用法：

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

3. 特点：

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

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

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

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

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

具体编码： 

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

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

2. 编码：

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

   实现防抖效果（）封装在hooks里面：

4. 组件中使用：

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

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

是一个包含了异步请求的子组件 

•  注册全局组件
•  配置对象
•  注册全局指令

• 过渡类名  修改为 、过渡类名  修改为 。

•  作为  修饰符的支持。

•  指令在组件上的使用已经被重新设计，替换掉了 

•  和  在同一个元素身上使用时的优先级发生了变化。

• 移除了、 和  实例方法。

• 移除了过滤器 。

• 移除了 实例 。

      以上就是本篇文章【尚硅谷Vue3入门到实战，最新版Vue3+TypeScript前端开发教程】的全部内容了，欢迎阅览 ！ 文章地址：http://dfvalve.xrbh.cn/quote/7348.html 
       行业      资讯      企业新闻      行情      企业黄页      同类资讯      网站地图      返回首页 迅博思语资讯移动站 http://keant.xrbh.cn/ , 查看更多