当前位置: 首页 > news >正文

Vue3语法系统进阶 - 全面掌握Vue3特性

目录

  • 01-ref属性在元素和组件上的分别使用
  • 02-利用nextTick监听DOM更新后的情况
  • 03-自定义指令与自定义全局属性及应用场景
  • 04-复用组件功能之Mixin混入
  • 05-插件的概念及插件的实现
  • 06-transition动画与过渡的实现
  • 07-动态组件与keep-alive组件缓存
  • 08-异步组件与Suspense一起使用
  • 09-跨组件间通信方案 Provide_Inject
  • 10-Teleport实现传送门功能
  • 11-虚拟DOM与render函数及Diff算法虚拟DOM

01-ref属性在元素和组件上的分别使用

Vue是基于MVVM设计模式进行实现的,视图与数据不直接进行通信,但是Vue并没有完全遵循这一原则,而是允许开发者直接进行原生DOM操作。

  • 在Vue中可通过ref属性来完成这一行为,通过给标签添加ref属性,然后再通过vm.$refs来获取DOM
  • ref属性添加给组件,可以获取到组件的实例对象,间接地实现组件之间的通信
<template><div><h2>ref属性</h2><button @click="handleClick">点击</button><div ref="elem">aaaaaaaaa</div><div ref="elem2">bbbbbbbbb</div><my-head ref="elem3"></my-head></div>
</template><script>import MyHead from '@/2_头部组件.vue'export default {methods: {handleClick(){// ref属性添加到元素身上,可以获取到当前元素的原生DOMconsole.log( this.$refs.elem );console.log( this.$refs.elem2 );//ref属性添加到组件身上,可以获取到当前组件的vm对象(实例对象)this.$refs.elem3.handleMessage('根组件的数据');}}}
</script> 

2_头部组件.vue文件:

<template><div>hello myhead</div>
</template><script>export default {data(){return {message: '头部组件的消息'}},methods: {handleMessage(data){console.log(data);}}}
</script>

02-利用nextTick监听DOM更新后的情况

  • 主要作用:将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它
  • 默认情况下,数据的更新会产生一个很小的异步延迟,所以直接在数据改变后取获取DOM是得不到DOM更新后的结果,而得到的是DOM更新前的结果
  • 如何才能得到DOM更新后的结果呢,可以有两种方案:
    • 第一种就是利用生命周期updated这个钩子函数
    • 第二种就是利用我们讲的nextTick方法,支持两种风格即回调和promise
      在这里插入图片描述

03-自定义指令与自定义全局属性及应用场景

  • 除了核心功能默认内置的指令 (例如v-model v-show),Vue 也允许注册自定义指令,来实现一些封装功能。
  • 自定义指令的实现
    • 实现一个简单的v-color指令,用于给元素添加背景色
      -
    • 下面我们来完成一个实际可以应用的指令,按钮权限指令,一般情况下这种指令不会局部使用,而是全局使用,所以可以通过vue来实现一个全局的按钮权限指令
      在这里插入图片描述
  • 自定义全局属性
    • 添加一个可以在应用的任何组件实例中访问的全局 property,这样在引入一些第三方模块的时候,就不用每一次进行import操作,而是直接通过this对象去访问全局属性即可,下面举一个例子,实现一个http的全局属性。
      在这里插入图片描述

04-复用组件功能之Mixin混入

  • 它是选项式API的一种复用代码的形式,通过混入mixin的方式,我们可以将一些公共的数据、方法或计算属性复用到多个组件中,提高代码的可维护性和重用性.
    在这里插入图片描述
  • mixin存在的问题就是不够灵活,不支持传递参数,这样无法做到差异化的处理,所以目前比较推荐的复用操作还是选择使用组合式API中的use函数来完成复用的逻辑处理

05-插件的概念及插件的实现

  • 插件是自包含的代码,通常向 Vue 添加全局级功能。例如:全局方法、全局组件、全局指令、全局mixin等等。基
  • 于Vue的第三方模块都是需要通过插件的方式在Vue中进行生效的,比如:Element PlusVue RouterVuex等等。
    在这里插入图片描述

06-transition动画与过渡的实现

  • Vue中通过两个内置的组件来实现动画与过渡效果,分别是:<transition><transition-group>
    在这里插入图片描述
    在这里插入图片描述

07-动态组件与keep-alive组件缓存

  • 动态组件
    • 动态组件可以实现在同一个容器内动态渲染不同的组件,依一个内置组件<component>is属性的值,来决定使用哪个组件进行渲染。
      在这里插入图片描述
  • keep-alive组件
    当我们点击的时候,就会进行组件的切换。在每次切换的过程中都会重新执行组件的渲染,这样组件操作的行为就会还原,而我们如何能够保证组件不变呢?可以利用<keep-alive>对组件进行缓存,这样不管如何切换,都会保持为初始的组件渲染,这样可以很好的保留之前组件的行为。
    组件的切换也可以配合<transition>完成动画的切换。
    在这里插入图片描述

08-异步组件与Suspense一起使用

  • 异步组件
    • 在大型应用中,我们可能需要将应用分割成小一些的代码块,并且只在需要的时候才从服务器加载一个模块。

    • 对于大型项目来说,如果能实现按需载入的话,那么势必会对性能有所提升,在Vue中主要就是利用defineAsyncComponent来实现异步组件的。
      在这里插入图片描述

  • Suspense组件
    • 由于异步组件是点击切换的时候才去加载的,所以可能会造成等待的时间,那么这个时候可以配合一个loading效果,在Vue中提供了一个叫做<Suspense>的组件用来完成loading的处理。
      在这里插入图片描述

09-跨组件间通信方案 Provide_Inject

正常情况下,我们的组件通信是需要一级一级的进行传递,通过父子通信的形式,那么如果有多层嵌套的情况下,从最外层把数据传递给最内层的组件就非常的不方便,需要一级一级的传递下来,那么如何才能方便的做到跨组件通信呢?

可以采用Provide inject 依赖注入的方式来完成需求
在这里插入图片描述
在这里插入图片描述

10-Teleport实现传送门功能

  • Teleport组件
    • Teleport可以实现传送门功能,也就是说逻辑属于当前组件中,而结构需要在组件外进行渲染,例如:按钮模态框组件。
      在这里插入图片描述
  • 逻辑组件
    • 但是往往我们需要的并不是普通组件的调用方式,而是逻辑组件的调用方式:
      在这里插入图片描述

11-虚拟DOM与render函数及Diff算法虚拟DOM

  • 虚拟DOM
    • Vue框架帮我们完成了大量的DOM操作,那么在底层Vue并没有直接操作真实的DOM,因为真实的DOM直接去操作是非常好性能的,所以最好在JS环境下进行操作,然后在一次性进行真实DOM的操作。
      在这里插入图片描述
    • 内置的render函数可以把字符串转换成虚拟DOM。
      在这里插入图片描述
  • Diff算法
    • 当更新的时候,一个依赖发生变化后,副作用会重新运行,这时候会创建一个更新后的虚拟 DOM 树。运行时渲染器遍历这棵新树,将它与旧树进行比较,然后将必要的更新应用到真实 DOM 上去。

    • 而两个虚拟DOM进行对比的时候,需要加入一些算法提高对比的速度,这个就是Diff算法。
      在这里插入图片描述

  • 在脚手架下我们推荐使用:
    在这里插入图片描述

相关文章:

Vue3语法系统进阶 - 全面掌握Vue3特性

目录 01-ref属性在元素和组件上的分别使用02-利用nextTick监听DOM更新后的情况03-自定义指令与自定义全局属性及应用场景04-复用组件功能之Mixin混入05-插件的概念及插件的实现06-transition动画与过渡的实现07-动态组件与keep-alive组件缓存08-异步组件与Suspense一起使用09-跨…...

第9天----【位运算进阶之----按位取反(~)】(附补码,原码讲解)

今天我们来谈谈按位取反这件事。 简单来说&#xff0c;按位取反就是先将一个数写成其二进制表达形式&#xff0c;然后1变0&#xff0c;0变1。下面就让我们展开深入地讨论吧&#xff01; 文章目录 一、预备知识&#xff1a;1. 原码&#xff1a;定义&#xff1a;优缺点&#xff…...

如何获取当前 JAR 包的存放位置?

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言代码中如何获取打包后的jar包存放的位置&#xff1f; 前言 代码中如何获取打包后的jar包存放的位置&#xff1f; 要获取当前运行的 JAR 包所存放的位置&#…...

微调llama2模型教程:创建自己的Python代码生成器

本文将演示如何使用PEFT、QLoRa和Huggingface对新的lama-2进行微调&#xff0c;生成自己的代码生成器。所以本文将重点展示如何定制自己的llama2&#xff0c;进行快速训练&#xff0c;以完成特定任务。 一些知识点 llama2相比于前一代&#xff0c;令牌数量增加了40%&#xff0…...

Java【手撕双指针】LeetCode 57. “两数之和“, 图文详解思路分析 + 代码

文章目录 前言一、两数之和1, 题目2, 思路分析3, 代码展示 前言 各位读者好, 我是小陈, 这是我的个人主页, 希望我的专栏能够帮助到你: &#x1f4d5; JavaSE基础: 基础语法, 类和对象, 封装继承多态, 接口, 综合小练习图书管理系统等 &#x1f4d7; Java数据结构: 顺序表, 链表…...

大数据(一)定义、特性

大数据&#xff08;一&#xff09;定义、特性 本文目录&#xff1a; 一、写在前面的话 二、大数据定义 三、大数据特性 3.1、大数据的大量 (Volume) 特性 3.2、大数据的高速(Velocity)特性 3.3、大数据的多样化 (Variety) 特性 3.4、大数据的价值 (value) 特性 3.5、大…...

【C++】构造函数和初始化列表的性能差距

构造函数和初始化列表的性能差距对比测试 1.说明 在C类和对象中&#xff0c;你可能听到过更加推荐用初始化列表来初始化类内成员。如果类内成员是自定义类型&#xff0c;则只能在初始化列表中调用自定义类型的构造函数。 但初始化列表和在构造函数体内直接赋值有无性能差距呢…...

Linux下套接字TCP实现网络通信

Linux下套接字TCP实现网络通信 文章目录 Linux下套接字TCP实现网络通信1.引言2.具体实现2.1接口介绍1.socket()2.bind()3.listen()4.accept()5.connect() 2.2 服务器端server.hpp2.3服务端server.cc2.4客户端client.cc 1.引言 ​ 套接字(Socket)是计算机网络中实现网络通信的一…...

❤ vue清除定时器Bug

❤ vue清除定时器Bug 页面加载&#xff0c;清除定时器 clearTimeout(intm) 问题 遇见的需求是&#xff1a;webapp 从A页面进入B页面,B页面点击按钮&#xff0c;加载完B页面的加载效果进入c&#xff0c;从C页面返回A页面&#xff0c;仍然显示B页面的加载效果 结果定时器一直…...

IDEA创建Spring,Maven项目没有resources文件夹

有时新建Spring或Maven项目时&#xff0c;会出现目录中main下无resources文件夹的情况&#xff0c;来一起解决一下&#xff1a; FIles|Project Structure 在Modules模块找到对应路径&#xff0c;在main下创建resources&#xff0c;右键main&#xff0c;选择新文件夹 输入文件…...

Unity 结构少继承多组合

为什么不推荐使用继承&#xff1f; 继承是面向对象的四大特性之一&#xff0c;用来表示类之间的 is-a 关系&#xff0c;可以解决代码复用的问题。虽然继承有诸多作用&#xff0c;但继承层次过深、过复杂&#xff0c;也会影响到代码的可维护性。所以&#xff0c;对于是否应该在…...

保研之旅2:中科院声学所“声学和信息学科”夏令营

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; 本人持续分享更多关于电子通信专业内容以及嵌入式和单片机的知识&#xff0c;如果大家喜欢&#xff0c;别忘点个赞加个关注哦&#xff0c;让我们一起共同进步~ &#x…...

android adb自动连接手机安装apk bat

1.新建bat文件adb echo off:apk文件名称 在setting.txt获取 set apkFileName"":设置文件 set settingFileE:\apk\bat\setting.txt:启动页面 applicationid/启动页面路径 set startActivitycom.aaa.aaa/com.aaa.aaa.ui.common.SplashActivity:读取settingFile第一行的…...

用心维护好电脑,提高学习工作效率

无论是学习还是工作&#xff0c;电脑都是IT人必不可少的重要武器&#xff0c;一台好电脑除了自身配置要经得起考验&#xff0c;后期主人对它的维护也是决定它寿命的重要因素&#xff01; 一、我的电脑 系统制造商: ASUSTeK COMPUTER INC. 系统型号: ZenBook UX481FAY 1.1 如…...

以太坊硬分叉后的可重入漏洞攻击

以太坊硬分叉后的可重入漏洞攻击 以太坊君士坦丁堡升级将降低部分 SSTORE 指令的 gas 费用。然而&#xff0c;这次升级也有一个副作用&#xff0c;在 Solidity 语言编写的智能合约中调用 address.transfer()函数或 address.send()函数时存在可重入漏洞。在目前版本的以太坊网络…...

k8s 常用命令(三)

1、查看版本信息&#xff1a;kubectl version [rootmaster ~]# kubectl version [rootmaster ~]# kubectl version Client Version: version.Info{Major:"1", Minor:"21", GitVersion:"v1.21.3", GitCommit:"ca643a4d1f7bfe34773c74f7952…...

API 网关基础

目录 一、网关概述二、网关提供的功能三、常见网关系统3.1 Netflix Zuul3.2 Spring Cloud Gateway3.3 Kong3.4 APISIX3.5 Shenyu 一、网关概述 API网关是一个服务器&#xff0c;是系统的唯一入口。 从面向对象设计的角度看&#xff0c;它与外观模式类似。API网关封装了系统内部…...

【Linux】权限问题

Linux权限 一、Linux 权限的概念二、Linux 权限管理1. 文件访问者的分类2. 文件类型和访问权限&#xff08;事物属性&#xff09;3. 文件访问权限的相关设置方法 三、默认权限1. 对文件和目录进行操作需要的权限2. 文件和目录的默认权限3. 粘滞位 一、Linux 权限的概念 Linux …...

线性代数的学习和整理10:各种特殊类型的矩阵(草稿-----未完成 建设ing)

目录 1 图形化分类 1.1对称矩阵 1.2 梯形矩阵 1.3 三角矩阵 1.3.1 上三角矩阵 1.4 对角线矩阵 2 按各自功能分 2.1 等价矩阵 2.2 增广矩阵 2.3 伴随矩阵 2.4 正交矩阵 2.5 正交矩阵 2.6 相似矩阵 1 图形化分类 1.1对称矩阵 1.2 梯形矩阵 1.3 三角矩阵 1.3.1 上…...

Go 自学:变量、函数、结构体、接口、错误处理

1. 打印变量数据类型 package mainimport "fmt"func main() {penniesPerText : 2.0fmt.Printf("The type of penniesPerText is %T\n", penniesPerText) }输出为&#xff1a; The type of penniesPerText is float64 2. 同时给多个变量赋值 package mai…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)

🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

CVPR2025重磅突破:AnomalyAny框架实现单样本生成逼真异常数据,破解视觉检测瓶颈!

本文介绍了一种名为AnomalyAny的创新框架&#xff0c;该方法利用Stable Diffusion的强大生成能力&#xff0c;仅需单个正常样本和文本描述&#xff0c;即可生成逼真且多样化的异常样本&#xff0c;有效解决了视觉异常检测中异常样本稀缺的难题&#xff0c;为工业质检、医疗影像…...

鸿蒙HarmonyOS 5军旗小游戏实现指南

1. 项目概述 本军旗小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;采用DevEco Studio实现&#xff0c;包含完整的游戏逻辑和UI界面。 2. 项目结构 /src/main/java/com/example/militarychess/├── MainAbilitySlice.java // 主界面├── GameView.java // 游戏核…...

在RK3588上搭建ROS1环境:创建节点与数据可视化实战指南

在RK3588上搭建ROS1环境:创建节点与数据可视化实战指南 背景介绍完整操作步骤1. 创建Docker容器环境2. 验证GUI显示功能3. 安装ROS Noetic4. 配置环境变量5. 创建ROS节点(小球运动模拟)6. 配置RVIZ默认视图7. 创建启动脚本8. 运行可视化系统效果展示与交互技术解析ROS节点通…...

相关类相关的可视化图像总结

目录 一、散点图 二、气泡图 三、相关图 四、热力图 五、二维密度图 六、多模态二维密度图 七、雷达图 八、桑基图 九、总结 一、散点图 特点 通过点的位置展示两个连续变量之间的关系&#xff0c;可直观判断线性相关、非线性相关或无相关关系&#xff0c;点的分布密…...

SQL注入篇-sqlmap的配置和使用

在之前的皮卡丘靶场第五期SQL注入的内容中我们谈到了sqlmap&#xff0c;但是由于很多朋友看不了解命令行格式&#xff0c;所以是纯手动获取数据库信息的 接下来我们就用sqlmap来进行皮卡丘靶场的sql注入学习&#xff0c;链接&#xff1a;https://wwhc.lanzoue.com/ifJY32ybh6vc…...