前端入门（五）Vue3组合式API特性

已于 2023-12-02 11:52:51 修改
阅读量1.1k 收藏 17
点赞数 17
分类专栏： 前端 文章标签： 前端 typescript javascript
于 2023-12-01 16:45:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baiduwaimai/article/details/134709651
版权

文章目录

Vue3简介

Vue3带来了：

  • 1、性能的提升：
    • 打包大小减少41%
    • 初次渲染快55%, 更新渲染快133%
    • 内存减少54%
    • ……
  • 2、源码的升级
    • 使用Proxy代替defineProperty实现响应式
    • 重写虚拟DOM的实现和Tree-Shaking
    • …
  • 3、拥抱TypeScript
  • 4、新的特性
      1. Composition API（组合API） （用前要引入）
        ○ setup配置
        ○ ref与reactive
        ○ watch与watchEffect
        ○ provide与inject
        ○ …
      1. 新的内置组件
        ○ Fragment
        ○ Teleport
        ○ Suspense
      1. 其他改变
        ○ 新的生命周期钩子
        ○ data 选项应始终被声明为一个函数
        ○ 移除keyCode支持作为 v-on 的修饰符
        ○ …

创建Vue3工程

使用vite创建

官方文档：https://v3.cn.vuejs.org/guide/installation.html#vite

vite官网：https://vitejs.cn

  • 什么是vite？—— 新一代前端构建工具。
  • 优势如下：
    • 开发环境中，无需打包操作，可快速的冷启动。
    • 轻量快速的热重载（HMR）。
    • 真正的按需编译，不再等待整个应用编译完成。
  • 传统构建 与 vite构建对比图

在这里插入图片描述
在这里插入图片描述

vue-cli方式

VUE3官方文档

## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建
vue create vue_test
## 启动
cd vue_test
npm run serve

在这里插入图片描述

常用 Composition API

启动项 - setup()

setup是所有Composition AIP（组合API）“表演的舞台”。

  • 1、组件中所用到的：数据、方法等均要配置在setup中，不需要专门的data、methods等配置项了。
  • 2、setup函数的两种返回值：
    • 若返回一个对象，则对象中的属性、方法在模板中均可以直接使用。
    • 若返回一个渲染函数：则可以自定义渲染内容。（了解）

在这里插入图片描述
在这里插入图片描述

setup的执行时机与参数

setup()执行的时机是先于beforecreated的，此时vue实例尚未创建，因此setup()函数内部this为undefined。

setup()可以接收两个参数：

  • props：值为一个对象，包含了组件外部传递过来，且在组件内部声明接收了的属性项。
  • context：上下文对象，主要包含下边3个属性：
    • attrs：值为对象，包含组件外部传递过来，且在本组件中props配置中没有声明的属性，该对象也存在于this.$attrs
    • slots：收到的插槽内容，相当于 this.$slots
    • emits：分发自定义事件的函数，相当于this.$emit

响应式原理

vue2中的响应式

在vue2中，通过Object.defineProperty()对对象属性的读取、修改进行了拦截（数据劫持）。对数组类型，通过重写数组更新的一系列方法实现拦截，对其变更方法进行了包裹。

这种响应式实现存在以下问题：

  • 新增属性、删除属性，界面不会更新
  • 直接通过下标修改数组，界面不会自动更新。

vue3中的响应式

  • 1、通过Proxy（代理）：拦截对象中任意属性的变化，包含属性值的读写、属性的添加、属性的增删
  • 2、通过Reflect（反射）：对被代理对象的属性进行操作

ref函数

在setup中安置的数据项并不会直接被vue监测，如果想要使其被vue监测，实现响应式的更新，应该使用ref函数，其作用是定义一个响应式的数据的引用对象（reference object）

使用ref函数构建的数据项类型是一个RefImpl引用实现类型，对RefImpl对象的value属性更新，对于Vue框架是可见的，但在模板中使用其时，不必加value属性，Vue框架会自动解析到其中的value。
在这里插入图片描述
ref函数的参数也可以是一个对象，如果是对象，其value属性是一个Proxy对象，拥有原对象的每一个属性，对其的修改也是响应式的。
在这里插入图片描述

reactive函数

reactive函数的作用是定义一个对象（数组）类型的响应式数据，基本类型用ref，reactive只能处理对象类型的数据。

语法：const 代理对象 = reactive(源对象)接收一个对象或数组，返回其代理对象（Proxy实例）

reactive定义的响应式数据是深层次的，即对其多层数据的更改同样是响应式。

在这里插入图片描述

reactive与ref对比

1、从定义数据角度：

  • ref用于定义基本数据类型
  • reactive用来定义：对象或者数组类型
  • ref也可以用来定义对象（数组）类型数据，它内部会自动通过reactive转为代理对象。
    2、从原理角度：
  • ref通过Object.defineProperty()的get与set实现响应式（数据劫持）
  • reactive通过使用Proxy实现响应式，并通过Reflect操作源对象内部的数据。

3、从使用角度：

  • ref定义的数据，操作数据需要.value，模板使用不需要.value
  • reactive定义的数据：操作数据与模板使用均不需要.value

计算属性 - computed

Vue3中的computed不再是内置选项，需要import导入，随后在setup()中配置，配置方式与Vue2中基本一致。
在这里插入图片描述

监视属性 - watch

watch属性在Vue3的组合式API中，也不再是内置属性，在需要使用时进行import。

监视属性，当监视对象分为ref和reactive时，有下边几种不同的情况。

1、当监视ref定义的响应式数据
在这里插入图片描述
watch函数还有第三个选填参数，配置一个对象，设置immediate、deep是否为true。

在这里插入图片描述

2、监视ref定义的多个响应式数据
可以写多个watch函数，当然也可以写为数组形式，当写为数组形式监视多个数据时，handle回调中 newValue、oldValue也是一个数组，根据下标判断，是哪个具体的数据。
在这里插入图片描述
3、监视reactive定义的一个响应式数据
注意：这种虽然可以触发监视逻辑，但是无法获取正确的odlvalue，console结果中old和new的值都是新的值
在这里插入图片描述
对于reactive定义的响应式数据，进行监视，是强制开启深度监视的，即便你配置deep为false也是无效，这与reactive的实现方式有关。

4、监视reactive定义的响应式对象的某个属性。
注意：此时的监视对象需要写为函数类型，因为假如你直接使用person.name，它其实是一个普通类型的值，没有响应式效果。
在这里插入图片描述

5、监视reactive定义的响应式属性的多个属性。
数组中每个元素都得写为函数类型。
在这里插入图片描述

总结：
一般在生产情况中，使用reactive，但此时oldValue会失效，如果要解决这个问题，可以将其单独拎出来，使用ref

watchEffect

  • watchEffect，不需要证明具体监视哪个属性，因此写起来更加高效，即effect。
  • watchEffect有点像computed，监视回调中用到哪个属性，就监视哪个属性，但computed注重计算出来的值（回调函数返回值），所以必须写返回值。而wacthEffect更加注重过程，回调函数的函数体，所以不用写返回值。

在这里插入图片描述

Vue3生命周期

1、Vue3中可以继续使用Vue2中生命周期的钩子，但有两个被改名了：

  • beforeDestroy改名为beforeUnmount
  • destroyed改名为unmounted

2、Vue3中也提供了组合式API形式的生命周期钩子，与Vue2中的钩子对应关系如下：

注意：前两个函数，beforeCreate与Create 相当于Vue3中的setup阶段
在这里插入图片描述

自定义hook函数

这里的hook本质上是一个函数，目的是将setup中可以复用的组合式API进行一个封装，类似于Vue2中mixin。

自定义hook的优势也与mixin一样，复用代码，使得setup中写的逻辑更加清晰易懂。

step1：定义hook文件夹，实现定义hook逻辑的js文件
在这里插入图片描述
step2：引入并在setup中直接使用。
在这里插入图片描述

toRef

  • 作用：创建一个ref对象，使其value属性指向另一个对象的某个属性，假如我们要将响应式对象中某个属性单独提供给外部使用时，可以使用ref。
  • 语法：const name = toRef(person, 'name')
  • 扩展：toRefs，批量创建，不再需要第二个参数，会将对象的每一个属性批量创建为同名的RefImpl。

在这里插入图片描述
使用toRef建立引用绑定关系后，在template中就可以直接使用这些属性，且不会丢失响应式特性：
在这里插入图片描述
使用toRefs结合...语法：
在这里插入图片描述

其他Composition API

shallowReactive()与shallowRef()

shallow是浅层次的意思。

  • shallowReactive：只处理对象最外层属性的响应式（浅响应式）
  • shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理。
  • 什么时候用？
    • 如果有一个对象数据，结构比较深，只希望最外层属性响应式变化，使用shallowReactive
    • 如果有一个对象数据，后续功能不会修改对象中的属性，而是生成新的对象替换，使用shallowRef

readonly() 与shallowReadonly()

  • readonly：让一个响应式数据变为只读（深只读）
  • shallowReadonly：让一个响应式数据变为只读（浅只读）
  • 应用场景：不希望数据被修改

toRaw与markRaw

  • toRaw:将一个reactive生成的响应式对象，转为普通对象
  • markRaw：标记一个对象，使其永远不会再成为响应式对象

customRef

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

provide与inject

实现祖孙组件间（至少隔一代）的通信（实际上父子间也可以，只不过父子间一般使用props通信）

在这里插入图片描述
step1：祖组件中provice：
在这里插入图片描述
step2：后代组件inject：

在这里插入图片描述

对响应式的数据进行判断

  • isRef：检查一个值是否为一个ref对象
  • isReactive：检查一个对象是否是由reactive创建的响应式代理
  • isReadonly：检查一个对象是否是由readonly创建的只读代理
  • isProxy：检查一个对象是否是由reactive或者readonly创建的代理。

新的组件与其他变化

Fragment（片段）

  • 在Vue2中：组件必须有一个根标签div
  • 在Vue3中：组件可以没有根标签，内部会将多个标签包含在一个Fragment的虚拟元素中
  • 这样的好处在于减少标签层级，减小内存占用

Teleport（传送）

teleport是一种能够将我们的组件的HTML结构移动到指定位置的技术。
在这里插入图片描述

Suspense（悬浮）

等待异步组件时，渲染一些额外的组件，优化用户体验

其他变化

全局API的转移

Vue2中有很多全局的API和配置，借助的Vue.xxx实现，而在Vue3中取消了Vue这个实例，转而使用app替代，很多Vue原有的API转移到了app实例上。

在这里插入图片描述

  • 配置：config
  • 全局组件：component
  • 全局指令：directive
  • 全局混入：mixin
  • 引入插件：use
  • 给原型配置属性：prototype

其他改动

  • 1、data应该始终写为函数返回值。
  • 2、移除keyCode作为v-on的修饰符（@keyup.13，非法）
  • 3、移除v-on.native修饰符。

vue2中默认给组件绑定事件为自定义事件，如果是内置事件，需要使用native声明，而在vue3中，当父组件给子组件绑定事件时，子组件在使用emits触发事件时，如果有相应配置，则是自定义事件，如果没有配置，则会被识别为内置事件。
在这里插入图片描述

  • 4、移除了过滤器（filter），推荐使用计算属性或者方法调用实现。
椛丿未眠”
关注
  • 17
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3中的Vue.prototype.xxx = xxx
我的博客
04-12 1406
vue3中的Vue.prototype.xxx = xxx。
vue3课件-入门.zip
12-30
本课件旨在帮助开发者快速入门Vue3，了解其新特性和最佳实践。 在 "00-vue3入门.md" 文件中，你将学习到以下Vue3的核心知识点： 1. **Composition API**：Vue3 引入了Composition API，这是一种更加灵活的组件定义...
如何在Vue3中使用Vue.prototype
weixin_45392204的博客
08-25 9771
前端菜鸟最近在开发新的项目，准备用Vue3，遇到了一些问题，整理下 话不多说，直接上代码。 import{createApp}from"vue"; importAppfrom"./App.vue"; importrouterfrom"./router"; importstorefrom"./store"; importqsfrom"qs"; constapp=createApp(App); app.use(store); app.use(router...
Vue3 学习笔记
最新发布
w530763509的博客
05-25 475
只能用来定义对象(当你明确知道你需要的是一个响应式数据对象)定义响应式数据可以定义一个复杂数据类型,成为响应式数据// 不定义reactive,无法实时更改DOM的数据(v-model)//组合API的起点,将来的组合API的代码,基本上在这聊setup() {name:'ls',age: 18})通常用来定义响应式对象。
Vue3像Vue2一样在prototype（原型）上挂载数据
小怪獸丶的糖的专栏
11-12 2014
【代码】Vue3像Vue2一样在prototype（原型）上挂载数据。
vue 3.0 prototype 替代用法
热门推荐
block_xu的博客
12-14 2万+
在vue2.x中，我们想设置全局变量，可以在main文件中用prototype绑定vue实列，在vue3.0中，可以用app.config.globalProperties来代替prototype，具体用法如下 // main.js import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import axios from 'a
Vue3 globalProperties 的使用（代替 Vue.prototype.$xxx）
卡尔特斯
07-28 4064
代码】Vue3globalProperties的使用（代替Vue.prototype.$xxx）
Vue3如何像在prototype（原型）上挂载数据
qq_68155756的博客
08-08 3978
1. 首先，由于Vue团队对原型链的封装和改进，Vue3无法像Vue2一样直接在原型上放置数据， 2. 在Vue原型上挂载数据的作用是为了所有组件都可以通过 this. 获取到挂载的这个数据， 如果Vue3想要达到同样的效果，即（所有组件都可以通过this.myName获取到张三），需要用到vue3的mixin方法： 这样，在其他组件使用this.myName的时候就可以获取到'张三'，达到与在Vue.prototype上挂载数据同样的作用
vue3 组合式使用示例及代码展示，vue3 入门参考书，vue3 烹饪书.zip
04-03
在“vue3 组合式API、vuex、vue-router、axios、tailwindcss使用示例及代码展示”这个压缩包中，我们可以找到关于Vue3核心特性和常用生态库的详细学习资料。 首先，Vue3的组合式API是其最重要的更新之一。传统Vue2...
vue3 + vite入门级资料 (基于vue2和前端基础)
12-13
这是一项基于vite框架和vue3的学习项目，主要使用了vue3的组合式API，也就是复合setup函数的写法。其中内容有vue3的生命周期，watch函数，以及vue3的响应式数据reactive和ref的用法。简而言之就是练手，练基本操作。
VUE3+Element-Plus入门代码
12-27
Vue3和Element-Plus是现代前端开发中的两个关键组件，Vue3是Vue.js框架的最新版本，它带来了许多性能优化和新特性，而Element-Plus则是一个基于Vue3的高质量UI组件库，提供了丰富的界面元素供开发者使用。...
Vue.js 3.0 API 官方手册 中文pdf版(含源码).zip
08-17
Vue 3 中引入了`ref`和`reactive`两个核心响应式API。`ref`用于创建一个响应式引用，可以直接修改其值，而`reactive`则可以将整个对象转换为响应式的。 3. **模板语法改进**： 虽然Vue 3仍然支持Vue 2的模板语法...
vue3 中 vue.prototype 的变化
SanOrintea的博客
11-07 4275
1 如果是选项式API，官方文档中有app.config.globalProperties这个代替方案（https://cn.vuejs.org/api/application.html#app-config-globalproperties）。2 如果是组合式API，直接用provide/inject。
vue3变化：prototype以及$on废弃的解决办法
qq_39179734的博客
10-13 7470
最近在教程里学习vue，实操中有一个功能需要在main里使用prototype定义全局属性，然后在子组件中发送到另外的组件遇到了问题。 vue3 中 prototype已经不在使用 换乘了config.globalProperties 而教程中vue2.是这样的 Vue.prototype.$bus = new Vue() 都知道vue3没有Vue了而是 {createApp} 并且 $on $off $once都已经废弃。这里有一个替换方法是使用mitt 使用方法： //首先初始化...
vue3详细讲解
2302_77290281的博客
09-04 3210
data() {return {},
【Vue】一一一一prototype详解
XiaoCoder的博客
02-23 450
Vue.prototype详解地址
vue3学习（十三）---全局定义事件及编写vue插件
邱先生的博客
10-26 866
之前我们使用vue2的时候使用会将loading、toast、axios等定义为全局属性方便后期使用。Vue3没有prototype属性，使用来绑定属性和事件。声明文件要写，不然TS无法正确类型 推导return `$${return ` $ ${ str } ` } } 声明文件 不然 TS 无法正确类型 推导。
Vue中 Vue.prototype 详解及使用——作用：避免和已被定义的数据、方法、计算属性产生冲突
weixin_44867717的博客
07-03 8365
vue知识
Vue：关于Vue.prototype、Vue.component和Vue.use的使用详解
Litt_White的博客
02-05 1776
Vue：关于Vue.prototype、Vue.component和Vue.use的使用详解。以及Vue.prototype、Vue.component和Vue.use三者的区别
Vue3+TS快速入门：两小时掌握 TypeScript 核心与 Vue3 组合式API
Vue3引入了全新的组合式API，而TypeScript则提供了强大的静态类型检查，两者结合可以帮助开发者在编码阶段就发现并避免错误，提高代码质量和开发效率。 1. TypeScript核心语法 TypeScript是JavaScript的超集，它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值