【vue3之组合式API】

组合式API

  • 一、setup
    • 1.写法
    • 2.如何访问
    • 3.语法糖
    • 4.同步返回对象
  • 二、reactive()和ref()
    • 1.reactive()
    • 2.ref()
  • 三、computed
  • 四、watch函数
  • 1侦听单个数据
    • 2.侦听多个数据
    • 3. immediate
    • 4. deep
    • 5.精确侦听对象的某个属性
  • 五、生命周期函数
  • 六、组件通信
    • 1.父传子
    • 2. 子传父
  • 七、模版引用
    • 1. 基本使用
    • 2. defineExpose
  • 八、provide和inject
    • 1. 作用和场景
    • 2. 跨层传递普通数据
    • 3. 跨层传递响应式数据
    • 4. 跨层传递方法

注:在Vue 3中,采用了组合式 API 的编码风格,它允许将数据和方法进行组合,以提供更灵活和可复用的逻辑代码。通过 <script> 标签,我们可以在最前面编写逻辑代码,然后再定义组件的结构和样式。此外,Vue 3还支持多个根节点的模板结构,进一步增强了组件的可扩展性和可维护性。

一、setup

1.写法

组合式API的入口函数。写法与生命周期钩子函数的写法相同

<script.
export default{setup(){},beforeCreate(){}
}

但setup的执行时机要比beforeCreate钩子函数还快,所以在setup函数中是不能获取到this的值的,此时的this是undefined

2.如何访问

下面给出一个例子

<script>
export default {setup() {const message = 'Hello,vue3';const logMessage = () => {console.log(message);};return {message,logMessage};}
}
<template><div><p>{{ message }}</p><button @click="logMessage">Log Message</button></div>
</template>
</script>

注:数据和函数需要在setup最后return一下才是能在模板和其他API钩子中使用

3.语法糖

每次都要return一下太麻烦了,vue3提供了更简洁的语法糖写法:
只需在script标签中加上setup就不需要return了

<script setup>const message = 'Hello, World!'const logMessage = ()=>{console.log(message)}
</script>

4.同步返回对象

setup()应该同步地返回一个对象,这是因为 setup 函数的返回值被用于组件实例的配置项,它需要立即返回一个对象或者 undefined,而不是一个 Promise。被声明为一个async函数返回的是promise对象,模板中无法在访问到return对象的属性。官网给出唯一可以使用async setup()的情况是该组件为Suspense组件的后裔。

二、reactive()和ref()

1.reactive()

接受对象类型数据的参数传入并返回一个响应式的对象
基本语法:

<script setup>import { reactive } from 'vue'const state =reactive(对象类型数据)

例子:

<script setup>import { reactive } from 'vue'const state = reactive({msg:'this is msg'})const setSate = ()=>{state.msg = 'this is new msg'}
</script><template>{{ state.msg }}<button @click="setState">change msg</button>
</template>

2.ref()

接收简单类型或者对象类型的数据传入并返回一个响应式的对象
基本语法:

<script setup>
import { ref } from 'vue'
const count =ref(简单类型或复杂类型的数据)
<script>

例子:

<script setup>// 导入import { ref } from 'vue'// 执行函数 传入参数 变量接收const count = ref(0)const setCount = ()=>{// 修改数据更新视图必须加上.valuecount.value++}
</script><template><button @click="setCount">{{count}}</button>
</template>

能接收简单类型的本质:在原有传入数据的基础上,在外层包了一层对象,变成复杂类型的数据,实际上在底层还是依靠reactive实现的响应式
注:因为包了一层,所以在script脚本中访问数据要靠.value,但是在template模板中不需要,因为已经帮我们扒了一层,在后续的开发过程中,更推荐统一用ref,因为支持的数据类型更广泛,唯一不足就是在脚本中需要.value访问

三、computed

计算属性基本思想和Vue2的完全一致,组合式API下的计算属性只是修改了写法,计算属性中只包含计算的功能,不应该有异步请求/修改dom

<script setup>
// 导入
import {ref, computed } from 'vue'
// 原始数据
const count = ref(0)
// 计算属性
const doubleCount = computed(()=>count.value * 2)// 原始数据
const list = ref([1,2,3,4,5,6,7,8])
// 计算属性list
const filterList = computed(item=>item > 2)
</script>

当然computed属性也支持get和set写法,平常要避免修改计算属性的值、:
来自vue3官网:
在这里插入图片描述

四、watch函数

作用: 侦听一个或者多个数据的变化,数据变化时执行回调函数
俩个额外参数:1. immediate(立即执行) 2. deep(深度侦听)

1侦听单个数据

watch函数的第一个参数就是传的ref对象,不需要加.value

<script setup>// 1. 导入watchimport { ref, watch } from 'vue'const count = ref(0)// 2. 调用watch 侦听变化watch(count, (newValue, oldValue)=>{console.log(`count发生了变化,老值为${oldValue},新值为${newValue}`)})
</script>

2.侦听多个数据

侦听多个数据,第一个参数可以改写成数组的写法

<script setup>// 1. 导入watchimport { ref, watch } from 'vue'const count = ref(0)const name = ref('cp')// 2. 调用watch 侦听变化watch([count, name], ([newCount, newName],[oldCount,oldName])=>{console.log(`count或者name变化了,[newCount, newName],[oldCount,oldName])})
</script>

3. immediate

在侦听器创建时立即出发回调,响应式数据变化之后继续执行回调

<script setup>// 1. 导入watchimport { ref, watch } from 'vue'const count = ref(0)// 2. 调用watch 侦听变化watch(count, (newValue, oldValue)=>{console.log(`count发生了变化,老值为${oldValue},新值为${newValue}`)},{immediate: true})
</script>

4. deep

通过watch监听的ref对象默认是浅层侦听的,直接修改嵌套的对象属性不会触发回调执行,需要开启deep

<script setup>// 1. 导入watchimport { ref, watch } from 'vue'const state = ref({ count: 0 })// 2. 监听对象statewatch(state, ()=>{console.log('数据变化了')})const changeStateByCount = ()=>{// 直接修改不会引发回调执行state.value.count++}
</script><script setup>// 1. 导入watchimport { ref, watch } from 'vue'const state = ref({ count: 0 })// 2. 监听对象state 并开启deepwatch(state, ()=>{console.log('数据变化了')},{deep:true})const changeStateByCount = ()=>{// 此时修改可以触发回调state.value.count++}
</script>

5.精确侦听对象的某个属性

需求:在不开启deep的前提下,侦听age的变化,只有age变化时才执行回调

const info =ref({name:"cp",age:18
})
watch(()=>info.value.age()=>console.log('age变化了“)

五、生命周期函数

在这里插入图片描述
选项式API里的钩子函数代码可以都放在后面的组合式API钩子函数中执行
注:将钩子函数写成函数的调用方式,可以调用多次,并且不会冲突,按照顺序依次执行,在vue3中销毁不再是destroyed,而是unmounted

六、组件通信

1.父传子

基本思想

  1. 父组件中给子组件绑定属性
  2. 子组件内部通过props选项接收数据

在这里插入图片描述

2. 子传父

基本思想

  1. 父组件中给子组件标签通过@绑定事件
  2. 子组件内部通过 emit 方法触发事件
    在这里插入图片描述

七、模版引用

概念:通过 ref标识 获取真实的 dom对象或者组件实例对象

1. 基本使用

实现步骤:

  1. 调用ref函数生成一个ref对象
  2. 通过ref标识绑定ref对象到标签

在这里插入图片描述

2. defineExpose

默认情况下在 <script setup>语法糖下组件内部的属性和方法是不开放给父组件访问的,可以通过defineExpose编译宏指定哪些
属性和方法容许访问 说明:指定testMessage属性可以被访问到

在这里插入图片描述

八、provide和inject

1. 作用和场景

顶层组件向任意的底层组件传递数据和方法,实现跨层组件通信

2. 跨层传递普通数据

实现步骤

  1. 顶层组件通过 provide 函数提供数据
  2. 底层组件通过 inject 函数提供数据

在这里插入图片描述

3. 跨层传递响应式数据

在调用provide函数时,第二个参数设置为ref对象

在这里插入图片描述

4. 跨层传递方法

顶层组件可以向底层组件传递方法,底层组件调用方法修改顶层组件的数据

在这里插入图片描述

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

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

相关文章

shell脚本一键部署docker

Docker介绍 Docker 是一个开源的平台&#xff0c;用于开发、交付和运行应用程序。它利用容器化技术&#xff0c;可以帮助开发人员更轻松地打包应用程序及其依赖项&#xff0c;并将其部署到任何环境中&#xff0c;无论是开发工作站、数据中心还是云中。以下是 Docker 的一些关键…

declare module ‘global‘

在 TypeScript 中&#xff0c;declare module global 是一个特殊的模块声明&#xff0c;用于扩展全局作用域中的对象或接口。这通常用于为浏览器环境中的全局对象&#xff08;如 window&#xff09;或 Node.js 环境中的全局对象&#xff08;如 global&#xff09;添加类型声明。…

vue模拟数据mock放哪

在Vue中进行模拟数据的mock可以放在多个地方&#xff0c;具体取决于需求和个人偏好。以下是几种常见的方式&#xff1a; 在组件内部&#xff1a;可以在Vue组件的methods中编写模拟数据的逻辑。这种方式适用于只在当前组件中需要使用模拟数据的情况。 使用Mock.js库&#xff1a…

【Linux】软件包管理器yum

目录 一、yum是什么&#xff1f; 二、查看软件包 三、安装与卸载软件 1、如何安装软件 2、如何卸载软件 四、yum源的配置 一、yum是什么&#xff1f; 在Linux下安装软件, 一个通常的办法是下载到程序的源代码, 并进行编译, 得到可执行程序. 但是这样太麻烦了, 于是有些人…

Webserve(4): HTTP解析

// 写HTTP响应 bool http_conn::write() {int temp 0;if ( bytes_to_send 0 ) {// 将要发送的字节为0&#xff0c;这一次响应结束。modfd( m_epollfd, m_sockfd, EPOLLIN ); init();return true;}while(1) {// 分散写temp writev(m_sockfd, m_iv, m_iv_count);if ( temp <…

如何在华为云服务器部署安防监控EasyCVR平台?

随着视频技术的快速发展&#xff0c;安防视频汇聚平台EasyCVR可支持的协议也在不断拓展&#xff0c;平台兼容多类型的协议接入&#xff0c;包括&#xff1a;国标GB28181、RTSP/Onvif、RTMP&#xff0c;以及厂家的私有协议与SDK&#xff0c;如&#xff1a;海康ehome、海康sdk、大…

YOLOv7创新改进:SPPF创新涨点篇 | SPPELAN:SPP创新结合ELAN ,效果优于SPP、SPPF| YOLOv9

💡💡💡本文独家改进:新颖SPPF创新涨点改进,SPP创新结合ELAN,来自于YOLOv9,助力YOLOv7,将SPPELAN代替原始的SPPF 💡💡💡在多个私有数据集和公开数据集VisDrone2019、PASCAL VOC实现涨点 收录 YOLOv7原创自研 https://blog.csdn.net/m0_63774211/category…

C语言常见关键字:一文打尽

关键字 1. 前言2. 什么是关键字3. extern-声明外部符号4. auto-自动5. typedef-类型重定义&#xff08;类型重命名&#xff09;6. register-寄存器6.1 存储器6.2 register关键字的作用 7. static-静态7.1 static修饰局部变量7.1.1 代码对比7.1.2 原理分析 7.2 static修饰全局变…

Java中常见延时队列的实现方案总结

&#x1f3f7;️个人主页&#xff1a;牵着猫散步的鼠鼠 &#x1f3f7;️系列专栏&#xff1a;Java全栈-专栏 &#x1f3f7;️个人学习笔记&#xff0c;若有缺误&#xff0c;欢迎评论区指正 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&…

41. 【Linux教程】日志文件系统

前小节介绍了早期的 Linux 文件系统&#xff0c;本小节介绍 Linux 日志文件系统&#xff0c;日志文件系统是给 Linux 操作系统增加了一些安全相关能力&#xff0c;日志文件系统和早期的文件系统相比&#xff0c;它并不是先把数据写到中间存储设备&#xff0c;然后再写到存储设备…

2024/3/6打卡最短编辑距离---线性DP

题目&#xff1a; 给定两个字符串 A 和 B&#xff0c;现在要将 A 经过若干操作变为 B&#xff0c;可进行的操作有&#xff1a; 删除–将字符串 A 中的某个字符删除。插入–在字符串 A 的某个位置插入某个字符。替换–将字符串 A 中的某个字符替换为另一个字符。 现在请你求出&a…

springboot基于java的中医院门诊挂号诊断就诊系统ssm+jsp

主要研究内容&#xff1a; 医院门诊挂号系统分为护士&#xff0c;医生&#xff0c;药房&#xff0c;收费&#xff0c;管理员等权限。 护士&#xff1a;挂号、退号、查询病人。挂号——就诊科室(发热门诊、骨科、妇科等等)&#xff0c;就诊医生数据库获取&#xff0c;挂号类型—…

测试遍历1e5,1e8数组耗时

1e8大概0.38秒&#xff0c;即380ms 1e5耗时1ms左右&#xff1a; 代码使用方式来自&#xff1a;clock - C Reference (cplusplus.com)

Java 与 JavaScript 区别

Java 与 JavaScript 区别 制造商不同 Java 是 SUN Microsystems 公司推出的新一代面向对象的程序设计语言。javascript 是 Netscape 公司的产品&#xff0c;其目的是为了扩展 Netscape Navigator 功能&#xff0c;而开发的一种可以嵌入 Web 页面中的基于对象和事件驱动的解释…

python_读取txt文件绘制多条曲线III

先把文件中指定列&#xff0c;去重提取出来&#xff0c;然后根据指定列去匹配数据&#xff0c;最后完成多条数据的绘图&#xff1b; import matplotlib.pyplot as plt import re from datetime import datetime from pylab import mplmpl.rcParams["font.sans-serif"…

【python 1】----Pytest基础知识

定义 用于编写和执行Python测试全功能测试框架&#xff08;工具&#xff09;&#xff0c;是一个第三方库 安装 pip insatll pytest 安装pytest --version 校验 pytest的组成构成 不写调用语句也可以执行函数内容 在用例运行语句里面&#xff1a; -s:指的是开启与终端的…

vue3 setup函数与setup语法糖之间的区别

普通setup函数构建的组件 import {ref} from vueexport default {setup(){const countref(0)const handleUpdate()>{count.value}return{count,handleUpdate}}} </script>使用setup语法糖构建的组件 <script setup>import {ref} from vueconst countref(0)con…

devc++小游戏3.8.5

导航&#xff1a; Dev-c跑酷小游戏 1.0.0 devc跑酷小游戏1.2.5 devc跑酷游戏1.2.6 devc跑酷游戏2.0.0 devc跑酷游戏2.0.1 devc跑酷游戏2.4.0 devc跑酷小游戏3.5.0 更新内容 重磅回归&#xff0c;存档搞定&#xff01;&#xff01;&#xff01; 每一关需要前一关已…

C#日志记录:实现应用程序的监控与调试

日志记录是软件开发中不可或缺的功能&#xff0c;它能帮助开发者在应用程序运行时记录重要信息&#xff0c;便于调试和监控。本文将详细介绍C#中的常用日志记录功能以及常用的日志库&#xff0c;包括日志级别控制、日志输出格式、自定义日志目标、结构化日志和异步日志记录。同…

【Linux】常见指令1(ls指令、pwd指令、cd指令、touch指令、mkdir指令、rmdir指令、man指令、cp指令、mv指令、cat指令)

目录 01.ls指令与ll指令 02.pwd指令 03.cd指令 04.touch指令 05.mkdir指令 06.rmdir指令&&rm指令 07.man指令 08.cp指令 09.mv指令 10.cat指令 01.ls指令与ll指令 ls指令&#xff1a; 原型&#xff1a;list directory contents 语法&#xff1a;ls[选项][目录…