Vue3基本功能介绍

news2025/1/12 6:02:38

文章目录

    • Vue3组件中的模板结构可以没有根标签div
    • 组合式API
    • Ref
    • Reactive函数
    • 回顾Vue2响应式
    • Vue3实现响应式
    • 对比reactive和ref
    • Setup注意点
    • 计算属性与监听computed
    • Watch
    • WatchEffect
    • Vue3生命周期
    • 自定义hook函数
    • toRef
    • 其他组合API
    • shallowReactive
    • shallowRef
    • readonly和shallowOnly
    • ToRaw和markRow
    • customRef
    • Provide和inject
    • 响应式数据的判断
    • Composition API的优势
    • 新的组件
    • Fragment
    • Teleport
    • Suspense
    • Vue3其他变化

Vue3组件中的模板结构可以没有根标签div

在这里插入图片描述

组合式API

  1. Setup
    Vue3中的一个新的配置项,是一个函数;
    组件中所用到的数据、方法等等,均要配置在setup中;
    Setup函数的两种返回值:
    1)若返回一个对象,则对象的属性、方法,在模板中均可以直接使用。(常用)
    在这里插入图片描述
    2)若返回一个渲染函数,可以自定义渲染内容。
    在这里插入图片描述
    在这里插入图片描述

注意点:
1、尽量不要与vue2.x配置使用
*Vue2配置(data,methods,computed…)中可以访问到vue3的setup中的属性、方法。
*vue3的setup中的配置不能访问到Vue2的配置(data,methods,computed…)。
*如果有重名,setup优先。
2、setup不能是一个async函数,因为如果是async函数,返回值不再是return的对象,而是promise,模板中将看不到return中的属性。

Ref

RefImpl:引用对象,如果想让一个普通变量变成响应式的,就需要把这个变量丢给ref。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述修改的时候需要使用name.value进行修改。使用的时候直接使用name字段就行。
补充:const obj= {name:’li’}定义的对象是可以修改对象里面的属性,如:obj.name = ‘ni’
但是不可以修改整个对象,比如:obj = {name:’ni’}
Ref作用:定义一个响应式的数据。
Ref语法:
1)创建一个包含响应式数据的引用对象
在这里插入图片描述2)JS中操作数据,使用XXX.value。
3)模板中使用,不需要value,直接{{XXX}}。

Ref接收的数据类型:基本类型,对象类型。
const a = ref(1); Const a = ref(‘1’); const a = ref(true); const a = ref({}); const a = ref([])

基本数据类型:响应式依靠的是object.defineProperty()的get和set。
对象类型:内部求助了vue3的一个新函数——reactive函数。

Reactive函数

作用:定义一个对象类型的响应式数据(基本类型不要用它,要用ref函数)。
使用ref定义的响应式数据,在js中修改的时候必须加上.value;使用reactive定义的响应式数据,不用.value就可以进行修改,无论对象层级有多深,数组也可以直接用索引来修改。
在这里插入图片描述
语法:const 代理对象 = reactive(原对象),接受一个对象或数组,返回一个代理对象(proxy的实例对象,简称proxy对象)。

Reactive定义的响应式数据是’深层次’的。
内部基于ES6的proxy实现,通过代理对象操作源对象内部数据进行操作。

回顾Vue2响应式

存在问题:
新增属性,删除属性,界面不会更新。
直接通过下标修改数组界面不会自动更新。
在这里插入图片描述
在这里插入图片描述Vue2使用object.defineProperty来劫持数据是否发生改变,如下:
在这里插入图片描述
在这里插入图片描述能监测到获取和修改属性:
在这里插入图片描述
新增的属性没有get和set:

在这里插入图片描述
删除name属性:
在这里插入图片描述综上,获取和修改一个属性可以捕获到,但是新增和删除属性是捕获不到的,所以使用 s e t 和 set和 setdelete方法才能响应。

Vue3实现响应式

  1. 如下代码,p = new Proxy()后,p是一个proxy对象,是person的一个代理对象,对p的修改会映射到person身上:
    在这里插入图片描述在这里插入图片描述
    上面代码只是说P是person的代理对象,p改变,person跟着改变,但是并没有做到响应式,也就是变化并没有捕获到。
  2. Vue3捕获响应:
    在这里插入图片描述结果如下:对对象的增删改查全部捕获到,并且映射到person中。
    其中set方法,既捕获新增又捕获修改。
    在这里插入图片描述
  3. 对上面代码进行优化,vue3中是使用Reflect来对数据进行修改。
    在这里插入图片描述

综上,实现原理: 通过proxy(代理):拦截对象中任意属性的变化,包括:属性值的读写,属性的添加,属性的删除等。
通过Reflect(反射):对被代理对象(原对象)的属性进行操作。

对比reactive和ref

  1. 从定义数据角度对比
    Ref用来定义:基本数据类型。
    Reactive用来定义:对象(或数组)类型数据。
    备注:ref也可以定义对象(或数组)类型数据,它内部会自动通过reactive转为代理对象。
  2. 从原理角度对比
    Ref通过object.defineProperty()的get和set来实现响应(数据劫持)。
    Reactive通过proxy来实现响应式(数据劫持),通过Reflect来操作源数据内部。
  3. 从使用角度对比
    Ref定义的数据,操作数据需要使用.value,模板中使用数据不需要使用.value。
    Reactive定义的数据,操作数据与读取数据,均不需要使用.value。

Setup注意点

  1. Setup执行时机:beforeCreate之前执行一次,这个时候的this是undefined。
    Setup一共有两个参数,第一个是父组件传过来的值:
    在这里插入图片描述
    在这里插入图片描述

在这里插入图片描述
第二个参数是:context
在这里插入图片描述
在这里插入图片描述
Context.attrs:值为对象,包含:组件外部传递过来,但是没有在props配置中声明的属性,相当于this. a t t r s 。 C o n t e x t . e m i t :分发自定义事件的函数,相当于 t h i s . attrs。 Context.emit:分发自定义事件的函数,相当于this. attrsContext.emit:分发自定义事件的函数,相当于this.emit。(下面举例)
Context.slots:收到的插槽内容,相当于this.$slots。(下面举例)
Context.emit使用:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
Context.slots使用:

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

计算属性与监听computed

与vue2中的computed配置功能一致。
写法:
在这里插入图片描述

Watch

Watch在vue3中是一个组合API,可以多次调用,它有三个参数:
Params1:被监听的变量,可以是一个数组,存放多个变量。
Params2:回调函数,监听的数据有变化时调用,回调函数中有两个参数,newVal和oldVal。
Params3:是一个对象,存放watch的配置{immediate:true,deep:true}。

  1. Watch监听ref变量
    在这里插入图片描述
    在这里插入图片描述
  2. Watch监听reactive变量
    Vue3bug:
    1)watch监听reactive变量时,oldValue值获取不到。
    2)强制开启了深度监听,deep配置无效。
    在这里插入图片描述在vue3中,不管嵌套的层级有多深,只要是用reactive定义的,都可以监听到。但是获取不到正确的oldVal。
    情况三:监听reactive定义的嵌套多级的对象,不管嵌套层级有多深,都是深度监听
    在这里插入图片描述
    在这里插入图片描述
    情况四,监听reactive定义的响应式对象中的某一属性。使用回调函数的方式。并且可以获取到oldValue值。
    在这里插入图片描述
    在这里插入图片描述
    情况五:监视reactive定义的响应式对象的某些属性。可以成功获取oldVal。
    在这里插入图片描述
    在这里插入图片描述
    特殊情况:监听salary,要使用deep。拿不到oldValue。
    在这里插入图片描述
    总结:
    在这里插入图片描述
    在这里插入图片描述答疑:
    1、为什么监听ref定义的基本数据类型不需要使用.value,监听ref定义的引用类型的数据需要使用.value。
    监听ref定义的基本数据类型:监听的是RefImpl对象。
    监听ref定义的引用类型数据,监听的是RefImpl对象,但是RefImpl中的value值是Proxy对象,需要深度监听,所以需要使用{deep:true},或者监听person.value。
    在这里插入图片描述

WatchEffect

Watch:既要指明监视的属性,又要指明监视的回调。
WatchEffect:不用指明监视的属性,监视的回调中用到了哪个属性,就监视哪个,而且深度监听。
WatchEffect有点像computed:
1)但computed注重的是计算出来的值(回调函数的返回值),所以必须要写返回值。
2)而WatchEffect注重的是过程(即函数体),所以不用写返回值。

如下例子,person.salary.s1.sa发生变化了就会被监听到。
在这里插入图片描述

Vue3生命周期

第一种使用方式——配置项的方式
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
注意:
1)使用配置项这种方式的生命周期,setup在所有生命周期之前执行。
2)最后两个生命周期在vue2中是beforeDestroy和destroyed,vue3中改成了beforeUnmount和unmounted。

第二种使用方式——组合式API
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
注意:
1)使用组合API生命周期钩子,onBeforeCreate和onCreated两个钩子没有API,就相当于setup。

自定义hook函数

Vue3的hook函数,相当于vue2的 mixin,不同在于hooks是函数。
Vue3的hook函数,可以帮助我们提高代码的复用性, 让我们能在不同的组件中都利用 hooks 函数。
例子:将鼠标点击页面就获取坐标点的方法拿出独立,便于其他组件复用。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

toRef

作用:创建一个ref对象,其value值指向另一个对象中的某个属性。
语法:const name = toRef(device,’name’).
应用:要将响应式对象中的某个属性单独提供给外部使用时。
在这里插入图片描述
扩展:toRefs和toRef功能一样,但是可以创建多个ref对象,语法:toRefs(device)。
在这里插入图片描述

其他组合API

shallowReactive

作用:浅层次的响应式,只考虑第一层的响应式。
如下举例:name和age会响应,但是position.po.p不是响应式的。
在这里插入图片描述

shallowRef

只处理基本数据类型的响应式,不进行对象的响应式处理。
如果使用ref,处理对象时,内部借用的是reactive方法,使用ES6的proxy,shallowRef没有做这个操作,所以不能对对象进行响应式处理。
在这里插入图片描述
在这里插入图片描述何时使用?
1)如果有一个对象,结构比较深,但是变化时只是外层属性发生变换,使用shallowReactive。
2)如果有一个对象,后续功能不会修改该对象里面的属性,而是生成新的对象来替换,使用shallowRef。

readonly和shallowOnly

readonly:是一个函数,接收一个响应式的数据,相当于将这个响应式的数据保护起来,不能进行修改。
在这里插入图片描述
shallowOnly:让一个响应式的数据变为只读的,不可修改(浅只读),浅只读就是对于嵌套层级的对象来说,只能对第一级进行只读操作,其他级依然是响应式。
在这里插入图片描述
应用场景:不希望数据被修改时。

ToRaw和markRow

markRow应用几率高。
ToRaw:把reactive定义的响应式数据转成原始数据(没有响应式)。
使用场景:用于读取响应式对象对应的普通对象,对这个普通对象的所有操作,不会引起页面更新。
注:ref定义的无效。

在这里插入图片描述
在这里插入图片描述
markRow:标记一个对象,使其永远不会再成为响应式对象。
应用场景:
1、有些值不应被设置为响应式,例如复杂的第三方类库;
2、当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能。(例如一个层级很深很深的数据,vue3会一层一层的做响应式,如果这个数据只是展示使用,不需要对其进行修改,可以使用markRaw标记为普通对象,从而提高性能。)

小插曲:如果动态给一个响应式的对象中添加属性,要么一开始定义这个对象的时候就先将这个属性定义出来;如果使用toRef(),就需要先将这个大对象抛出去,否则第一次进去页面报错。

在这里插入图片描述给reactive定义的响应式数据身上追加任何属性,都是响应式的属性。

在这里插入图片描述
在这里插入图片描述
使用markRaw标记后,car不再是响应式的。
在这里插入图片描述
在这里插入图片描述

customRef

作用:创建一个自定义的ref,并对其依赖项跟踪和更新触发进行显式控制。
注:customRef函数调用要传入一个函数,函数体里面要返回一个对象。
举例:实现防抖效果(在输入框中输入的东西,过500ms再在下面显示出来)

在这里插入图片描述

Provide和inject

作用:实现祖和后代组件(跨级)间通信。
套路:父组件有一个provide选项来提供数据,后代任何一级的组件(包括子组件,即第一级组件,但是没必要,子组件使用props就好。)有一个inject选项来开始使用这些数据。
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述

响应式数据的判断

isRef:检查一个值是否为一个ref对象。
isReactive:检查一个对象是否是由reactive创建的响应式代理。
isReadonly:检查一个对象是否是由readonly创建的只读代理。
isProxy:检查一个对象是否是由reactive或者readonly方法创建的代理。
在这里插入图片描述

Composition API的优势

使用传统的opsitionApi,新增或者修改一个需求,就需要分别在data,methods,computed中修改。使用compositionAPI我们可以更优雅的组织我们的代码,函数,让相关功能的代码更加有序的组织到一起。
在这里插入图片描述
在这里插入图片描述

新的组件

Fragment

在vue2中,组件要有一个根标签;
在vue3中,组件可以没有根标签,内部会将多个标签包裹在一个虚拟的Fragment元素中。好处:减少标签层级,减少内部占用。
在这里插入图片描述

Teleport

Teleport是一种能将我们的组件html结构传送到指定位置的技术。
举例:父组件中引入子组件,子组件中引入孙组件,孙组件中引入dialog组件:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
正常来讲,html结构是:弹窗在孙组件中,不能移动到body体内。
在这里插入图片描述
使用teleport包裹后,可以将包裹的内容移动到任意位置
在这里插入图片描述
将弹窗相关的html结构移动到了body的位置。

在这里插入图片描述

Suspense

等待异步组件时渲染一些额外内容,让用户有更好的体验。
使用步骤:
在这里插入图片描述举例:将子组件放在suspense中包裹起来,再异步引入。
在这里插入图片描述显示效果:子组件显示显示‘稍等,加载中…’,再显示child组件中真正的内容。
在这里插入图片描述
补充内容:
之前说过,setup不能是一个async函数,因为返回值不再是return的对象,而是promise,模板看不到return中的属性。
但其实,setup可以是async函数,也可以返回一个promise对象,但需要suspense和异步引入组件的配合。
在这里插入图片描述
让组件等一等再加载出来的两种方法:
1、使用了异步组件,异步引入,suspense,网速慢;
2、使用promise。

Vue3其他变化

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
例如如下两种写法,都是依赖按键code。
移除:@keyup.13 = “fn” 的写法;
移除:Vue.config.keyCodes.huiche = 13 //定义了一个别名按键
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1612168.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SRIO系列-时钟逻辑与复位逻辑

一、前言 上一篇讲述了SRIO协议的基本概念,传输的HELLO帧格式、事务类型等,本篇说一下SRIO IP核的时钟关系。 基本的IP设置可以参考此篇文章:【高速接口-RapidIO】Xilinx SRIO IP 核详解-CSDN博客 二、时钟关系 PHY可以在两个时钟域上运行…

ubuntu下boa服务器编译运行

一.下载boa源码并解压 官网网站:BOA源码 点击箭头所指的位置即可下载 解压: tar -xvf boa-0.94.13.tar.gz 解压完成得到目录: 二.安装环境所缺依赖,否则编译会报错 sudo apt install bison sudo apt install flex 三.编译 1…

vue快速入门(三十五)组件通信-父传子

注释很详细&#xff0c;直接上代码 上一篇 新增内容 父组件传值子组件接收父组件传来的数据 源码 App.vue <template><div id"app"><!-- :item"item"为将item的值传递给MyTest组件 --><MyTest v-for"item in roles" :key&q…

【Linux开发 第七篇】权限

权限 Linux组权限修改权限 Linux组 在linux中的每个用户必须属于一个组&#xff0c;不能独立于组外 文件/目录 所有者 一般为文件的创建者&#xff0c;谁创建了该文件&#xff0c;就自然的成为了该文件的所有者 这一列即为文件的所有者 修改文件的所有者&#xff1a; chown…

【已解决】win10系统 Docker 提示Docker Engine stopped解决全过程记录

【已解决】win10系统 Docker 提示Docker Engine stopped解决全过程记录 一、检查服务是否开启 找到 【Docker Desktop Service】&#xff0c;然后&#xff0c;启动他&#xff1b; 你也可以直接设置为“自动” 找到服务&#xff0c;右键》属性》启动类型&#xff1a;自动》点击…

经典目标检测YOLOV1模型的训练及验证

1、前期准备 准备好目录结构、数据集和关于YOLOv1的基础认知 1.1 创建目录结构 自己创建项目目录结构&#xff0c;结构目录如下&#xff1a; network CNN Backbone 存放位置 weights 权重存放的位置 test_images 测试用的图…

Java多线程并发八股问题总结

目录 (1).Java中实现线程的方法(2).如何停止一个正在运行的线程(3).notify和notifyAll有什么区别(4).sleep()和wait()有什么区别(5).volatile是什么&#xff1f;可以保证有序性吗&#xff1f;(6).Thread类中的start()和run方法有什么区别&#xff1f;(7).为什么wait、notify、n…

面试经典150题——跳跃游戏 II

面试经典150题 day10 题目来源我的题解方法一 动态规划方法二 贪心 题目来源 力扣每日一题&#xff1b;题序&#xff1a;45 我的题解 方法一 动态规划 动态规划&#xff0c;当j位置可达i位置时&#xff1a;dp[i]Math.min(dp[i],dp[j]1); 时间复杂度&#xff1a;O( n 2 n^2 n…

今日早报 每日精选15条新闻简报 每天一分钟 知晓天下事 4月21日,星期日

每天一分钟&#xff0c;知晓天下事&#xff01; 2024年4月21日 星期日 农历三月十三 1、 商务部等10部门联合发文&#xff1a;进一步支持境外机构投资境内科技型企业。 2、 第二艘国产大型邮轮下坞搭载建造&#xff0c;预计2026年底前交付&#xff0c;中国邮轮开启批量化建造…

Python-VBA函数之旅-hash函数

目录 一、hash函数的定义&#xff1a; 二、hash函数的工作方式&#xff1a; ​三、hash函数的优缺点&#xff1a; 四、hash函数的常见应用场景&#xff1a; 1、hash函数&#xff1a; 1-1、Python&#xff1a; 1-2、VBA&#xff1a; 2、推荐阅读&#xff1a; 个人主页&…

Efficient Subclass Segmentation in Medical Images论文速读

Efficient Subclass Segmentation in Medical Images 摘要 随着医学图像分析的研究兴趣越来越细化&#xff0c;大量注释的成本也在上升。降低成本的一种可行方法是使用粗粒度超类标签进行注释&#xff0c;同时使用有限的细粒度注释作为补充。通过这种方式&#xff0c;细粒度的…

BAPI_BATCH_CHANGE:修改批次的特征值

文章目录 BAPI_BATCH_CHANGE&#xff1a;修改批次的特征值实现步骤定义变量获取对象/类等 获取已维护特性值新特性值更新 注意事项最终效果字段介绍 BAPI_BATCH_CHANGE&#xff1a;修改批次的特征值 现在有一个需求是要修改批次里面的某一个特征值&#xff0c;所以需要使用到B…

带头循环双向链表专题

1. 双向链表的结构 带头链表⾥的头节点&#xff0c;实际为“哨兵位”&#xff0c;哨兵位节点不存储任何有效元素&#xff0c;只是站在这⾥“放哨 的” “哨兵位”存在的意义&#xff1a; 遍历循环链表避免死循环。 2. 双向链表的实现 2.1双向链表结构 typedef int DataTyp…

适合各大资源网投稿html源码

源码介绍 适合各大资源网投稿html源码&#xff0c;源码由HTMLCSSJS组成&#xff0c;记事本打开源码文件可以进行内容文字之类的修改&#xff0c;双击html文件可以本地运行效果&#xff0c;也可以上传到服务器里面&#xff0c;重定向这个界面 效果预览 源码下载 适合各大资源…

mac电脑mysql下载与安装

mysql下载地址 历史下载地址 MySQL :: Download MySQL Community Server (Archived Versions) mac 版下载 mac版本分为 Intel 处理器 和 M系列处理器。 从 8.0.26开始&#xff0c; mysql 支持M系列处理器。 以前的都只有Intel 处理器的。 Intel 处理器选择 x86_64 M 系列处理…

冯喜运:4.21黄金市场失去正常反应?下周黄金原油解析

【黄金消息面解析 】&#xff1a;周五(4月19日)&#xff0c;伊朗媒体似乎淡化了以色列袭击的影响&#xff0c;表明地缘政治风险降低&#xff0c;导致避险资产需求放缓&#xff0c;金价回吐涨幅。本周现货黄金价格上涨超2%。美国黄金期货收盘上涨0.7%&#xff0c;至2413.8美元。…

深入理解Java IO流:字节流

深入理解Java IO流&#xff1a;字节流 引言 在Java中&#xff0c;IO&#xff08;输入/输出&#xff09;操作是程序与外部世界交互的重要方式。 其中&#xff0c;File类是进行文件操作的基础&#xff0c;而字节流和字符流则是数据传输的两种主要方式。 本文将深入探讨这些概念及…

C# 自动填充文字内容到指定图片

目录 需求 开发运行环境 方法设计 实现代码 AddText方法 图片转Base64 调用示例 小结 需求 在我们的一些发布系统项目应用中&#xff0c;会经常发布一些链接图标&#xff0c;该图标基本上以模板背景为主&#xff0c;并填充项目文字内容。解决方式一般会让美工进行制作…

数字化校园在职校教育中的价值和前景

在当今信息化浪潮中&#xff0c;职校教育正以前所未有的速度迈入智慧校园时代。数字化校园以其强大的功能和广泛的适用性&#xff0c;正在深刻地改变职校的教学模式、管理模式以及学生的学习方式&#xff0c;助力职校教育实现高质量、高效率、个性化的转型&#xff0c;如何利用…

微信小程序小游戏开发,微信开发者工具提示该目录下的项目(wxapp2)已在工具中创建,怎么办

微信小程序小游戏开发&#xff0c;微信开发者工具提示该目录下的项目&#xff08;wxapp2&#xff09;已在工具中创建&#xff0c;怎么办 情况描述&#xff0c; 导入一个项目的时候&#xff0c;导入成了小游戏项目了 想换成小游戏项目&#xff0c;变不了了&#xff0c;提示 “…