vue3中CompositionApi理解与使用

CompositionApi,组合式API,相当于react中hooks,函数式。

优势:1,增加了代码的复用性(类似mixin,slot,高阶组件功能)

           2,代码可读性更好。可以将处理逻辑和视图层分开,组件只留视图展示的代码。

1、reactive

setup()相当于beforeCreate()和Created()两个生命周期,可以在里面定义属性和方法

 2、ref

2-1,获取dom元素

ref获取dom以前的版本写法在vue3使用中,只要不写在hooks中,还是生效的。在hooks中我们应按照如下写法获取dom。注意:ref.value只是获取dom,并不是获取的dom里面的值

 2-2,拦截字符串

我们知道reactive方法只能拦截对象,所以我们只能传对象或数组,那么我们要想拦截字符串怎么办,这是就可以使用ref了

 原理就是利用ref中的value进行拦截的,所以要更改这个值的话,必须通过value更改,如下:

 

 2-3,toRefs 

从上面写法我们可以看出,在使用reactive方法在组件中,要通过对象.属性才能获取值,为了简写,我们可以使用toRefs进行转换,如下

3、props&&emit 父子组件传值

vue2版本父子组件传值方式只要不在hooks中写在vue3仍适用。

3-1、父传子

 3-2 子传父

 3-3 祖辈传孙辈

祖先组件:

 孙子组件

 4、生命周期

2套生命周期

第一套

beforeCreate 、created 、beforeMount 、mounted 、beforeUpdate 、updated 、beforeUnmount、unmounted

第二套(hooks)

setup 、onBeforeMount、 onMounted(一般在这周期发送请求)、 onBeforeUpdate、 onUpdated、 onBeforeUnmount、 onUnmounted(都写在setup()里

5、computed计算属性  要return返回值

 6、watch 监听

 9、自定义hooks

为了让组件代码更加清晰,我们可以将组件中处理逻辑封装成一个函数,只留视图逻辑,然后再将封装的文件引入到该组件。

 注意:如果使用hooks后,该组件在hooks中再也没有this概念,如this.$route.push、this.$router.query、this.$store就再也不能用了,针对这官方提供对应的api方法,如图:

 以上就是compoistion组合式api(hooks)的用法

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Elasticsearch:语义搜索 - Semantic Search in python

当 OpenAI 于 2022 年 11 月发布 ChatGPT 时,引发了人们对人工智能和机器学习的新一波兴趣。 尽管必要的技术创新已经出现了近十年,而且基本原理的历史甚至更早,但这种巨大的转变引发了各种发展的“寒武纪大爆炸”,特别是在大型语…

数字孪生的「三张皮」问题:数据隐私、安全与伦理挑战

引言 随着数字化时代的来临,数据成为了当今社会的宝贵资源。然而,数据的广泛使用也带来了一系列隐私、安全与伦理挑战。数字孪生作为一种虚拟的数字化实体,通过收集和分析大量数据,模拟和预测现实世界中的各种情境,为…

【云原生|Docker系列第3篇】Docker镜像的入门实践

欢迎来到Docker入门系列的第三篇博客!在前两篇博客中,我们已经了解了什么是Docker以及如何安装和配置它。本篇博客将重点介绍Docker镜像的概念,以及它们之间的关系。我们还将学习如何拉取、创建、管理和分享Docker镜像,这是使用Do…

循环结构进阶

二重循环 import java.util.Scanner;public class Demo01 {public static void main(String[] args) {Scanner scanner new Scanner(System.in);// 二重循环 外循环班级 内循环学生for (int i1; i<3; i) { // 外循环班级System.out.println("请输入第" i "…

Leetcode-每日一题【剑指 Offer 17. 打印从1到最大的n位数】

题目 一只青蛙一次可以跳上1级台阶&#xff0c;也可以跳上2级台阶。求该青蛙跳上一个 n 级的台阶总共有多少种跳法。 答案需要取模 1e97&#xff08;1000000007&#xff09;&#xff0c;如计算初始结果为&#xff1a;1000000008&#xff0c;请返回 1。 示例 1&#xff1a; 输…

机器学习、人工智能、深度学习三者的区别

目录 1、三者的关系 2、能做些什么 3、阶段性目标 1、三者的关系 机器学习、人工智能&#xff08;AI&#xff09;和深度学习之间有密切的关系&#xff0c;它们可以被看作是一种从不同层面理解和实现智能的方法。 人工智能&#xff08;AI&#xff09;&#xff1a;人工智能是一…

什么是serialVersionUID?

serialVersionUID是干啥的&#xff1f; Java的序列化机制是通过在运行时判断类的serialVersionUID来验证版本一致性的。 在进行反序列化时&#xff0c;JVM会把传来的字节流中的serialVersionUID与本地相应实体&#xff08;类&#xff09;的serialVersionUID进行比较&#xff0…

结构体和 Json 相互转换(序列化反序列化)

关于 JSON 数据 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也 易于机器解析和生成。RESTfull Api 接口中返回的数据都是 json 数据。 Json 的基本格式如下&#xff1a; { "a": "Hello", "b": "…

如何申请中国境内提供金融信息服务业务许可

依据《外国机构在中国境内提供金融信息服务管理规定》《外国机构在中国境内提供金融信息服务申请许可说明》等政策&#xff0c;外国机构在中国境内提供金融信息服务业务许可要求如下&#xff1a; 金融信息服务定义 所称的外国机构&#xff0c;是指外国金融信息服务提供者。 …

java环境搭建 Ubuntu Linux

jdk的安装和配置环境变量 使用apt sudo apt install default-jdk若是安装成功了在终端输入java -version来查看是否安装成功 使用官网下载的jdk包 直接在百度上搜索jdk&#xff0c;选择图片这个 网址:jdk下载网址 若是arm就选择带有arm的&#xff0c;反之选择x64的&#…

go逆向符号恢复

前言 之前一直没怎么重视&#xff0c;结果发现每次遇到go的题都是一筹莫展&#xff0c;刷几道题练习一下吧 准备 go语言写的程序一般都被strip去掉符号了&#xff0c;而且ida没有相关的签名文件&#xff0c;没办法完成函数名的识别与字符串的定位&#xff0c;所以第一步通常…

【web逆向】全报文加密及其登录流程的分析案例

aHR0cHM6Ly9oZWFsdGguZWxkZXIuY2NiLmNvbS9zaWduX2luLw 涉及加密库jsencrypt 定位加密点 先看加密的请求和响应&#xff1a; 全局搜索加密字段jsondata&#xff0c;这种非特定参数的一般一搜一个准&#xff0c;搜到就是断点。起初下的断点没停住&#xff0c;转而从调用栈单步…

【机器学习1】什么是机器学习机器学习的重要性

什么是机器学习? 简而言之&#xff0c;机器学习就是训练机器去学习。 机器学习作为人工智能(Artificial Intelligence,AI)的一个分支&#xff0c;以其最基本的形式来使用算法通过从数据中获取知识来进行预测。 不同于人类通过分析大量数据手动推导规则和模型&#xff0c;机…

关系型数据库的设计

范式 关系 注意&#xff1a;根据阿里开发规范&#xff0c;不再设置数据库的外键&#xff0c;在应用层保证外键逻辑即可 数据库设计 1:1 1:n 设想学生-班级案例&#xff0c;若在班级中保存所有学生的主键&#xff0c;则表长不好预测&#xff0c;表的数据亢余。 所以是在多的…

【SCSS】网格布局中的动画

效果 index.html <!DOCTYPE html> <html><head><title> Document </title><link type"text/css" rel"styleSheet" href"index.css" /></head><body><div class"container">&l…

BigDecimal

文章目录 BigDecimal 的用处BigDecimal 的大小比较BigDecimal 保留几位小数BigDecimal 的使用注意事项总结 BigDecimal 的用处 《阿里巴巴Java开发手册》中提到&#xff1a;浮点数之间的等值判断&#xff0c;基本数据类型不能用来比较&#xff0c;包装数据类型不能用 equals 来…

机器学习04-数据理解之数据可视化-(基于Pima数据集)

什么是数据可视化? 数据可视化是指通过图表、图形、地图等视觉元素将数据呈现出来的过程。它是将抽象的、复杂的数据转化为直观、易于理解的视觉表达的一种方法。数据可视化的目的是帮助人们更好地理解数据&#xff0c;从中发现模式、趋势、关联和异常&#xff0c;从而作出更明…

Jmeter-获取接口响应头(Response headers)信息进行关联

文章目录 Jmeter-获取接口响应头&#xff08;Response headers&#xff09;信息进行关联使用正则表达式提取器将Set-Cookie的值提取出来在其余接口中关联该提取信息运行查看关联是否成功 Jmeter-获取接口响应头&#xff08;Response headers&#xff09;信息进行关联 获取某一…

MATLAB | 如何绘制这样的描边散点图?

part.-1 前前言 最近略忙可能更新的内容会比较简单&#xff0c;见谅哇&#xff0c;今日更新内容&#xff1a; part.0 前言 看到gzhBYtools科研笔记(推荐大家可以去瞅瞅&#xff0c;有很多有意思的图形的R语言复现&#xff01;&#xff01;)做了这样一张图&#xff1a; 感觉很…

【网络基础实战之路】设计网络划分的实战详解

系列文章传送门&#xff1a; 【网络基础实战之路】设计网络划分的实战详解 【网络基础实战之路】一文弄懂TCP的三次握手与四次断开 【网络基础实战之路】基于MGRE多点协议的实战详解 【网络基础实战之路】基于OSPF协议建立两个MGRE网络的实验详解 PS&#xff1a;本要求基于…