从Vue2到Vue3【二】——Composition API（第二章）

news2024/11/29 21:42:57

系列文章目录

内容链接
从Vue2到Vue3【零】Vue3简介及创建
从Vue2到Vue3【一】Composition API（第一章）

文章目录

  • 系列文章目录
  • 前言
  • 一、 生命周期
  • 二、hook
  • 三、toRef以及toRefs
  • 总结

前言

Vue3作为Vue.js框架的最新版本，引入了许多令人激动的新特性和改进。其中，组合式API是Vue3最引人注目的特性之一。在本文中，我们将深入探讨Vue3的组合式API，并探索其在开发过程中的优势和用法。无论是新手还是有经验的Vue开发者，通过学习如何使用组合式API，我们都能更高效地构建复杂的应用程序，提高代码的可维护性和重用性。

一、 生命周期

说到生命周期，大家一定都不陌生，但是由于Vue 3引入了新的组合式API，因此在Vue 3中，生命周期钩子函数发生了一些变化。
vue2的生命周期图示
在这里插入图片描述

  • beforeCreate：在实例被创建之前被调用，此时组件的数据和方法尚未初始化。

  • created：在实例被创建之后立即调用，可以访问到数据和方法，但此时尚未挂载到DOM上。

  • beforeMount：在组件挂载到DOM之前被调用，此时模板已经编译完成，但尚未渲染到页面上。

  • mounted：在组件挂载到DOM之后调用，此时组件已经被渲染到页面上，可以进行DOM操作等操作。

  • beforeUpdate：在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。

  • updated：在数据更新之后调用，发生在虚拟DOM重新渲染和打补丁之后。

  • beforeDestroy：在实例销毁之前调用，可以在此进行一些清理工作，如清除定时器、解绑事件等。

  • destroyed：在实例销毁之后调用，此时组件已经从页面上移除，并且所有的事件监听和数据绑定都被自动清除。

  • activated（仅在keep-alive组件中可用）：在组件被激活时调用，仅适用于keep-alive组件。

  • deactivated（仅在keep-alive组件中可用）：在组件被停用时调用，仅适用于keep-alive组件。
    vue3的生命周期图示
    在这里插入图片描述
    从两幅图的对比不难看出，对于配置项形式的生命周期钩子函数并没有很大的变化，唯一要注意的点就是

  • beforeDestroy改名为 beforeUnmount

  • destroyed改名为 unmounted

在vue3中通过配置项形式使用生命周期钩子函数

<script>
	export default {
		name: 'Demo',
		setup(){
		},
		//通过配置项的形式使用生命周期钩子
		beforeCreate() {
			console.log('---beforeCreate---')
		},
		created() {
			console.log('---created---')
		},
		beforeMount() {
			console.log('---beforeMount---')
		},
		mounted() {
			console.log('---mounted---')
		},
		beforeUpdate(){
			console.log('---beforeUpdate---')
		},
		updated() {
			console.log('---updated---')
		},
		beforeUnmount() {
			console.log('---beforeUnmount---')
		},
		unmounted() {
			console.log('---unmounted---')
		}
	}
</script>

在vue3中通过组合式API形式使用生命周期钩子函数

<script>
	// 导入使用的钩子函数
	import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
	export default {
		name: 'Demo',
		setup(){
			let sum = ref(0)
			console.log('---setup---')
			//通过组合式API的形式去使用生命周期钩子
			onBeforeMount(()=>{
				console.log('---onBeforeMount---')
			})
			onMounted(()=>{
				console.log('---onMounted---')
			})
			onBeforeUpdate(()=>{
				console.log('---onBeforeUpdate---')
			})
			onUpdated(()=>{
				console.log('---onUpdated---')
			})
			onBeforeUnmount(()=>{
				console.log('---onBeforeUnmount---')
			})
			onUnmounted(()=>{
				console.log('---onUnmounted---')
			})
			return {sum}
		}
	}
</script>

  • Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：

    • beforeCreate===>setup()
    • created=======>setup()
    • beforeMount ===>onBeforeMount
    • mounted=======>onMounted
    • beforeUpdate===>onBeforeUpdate
    • updated =======>onUpdated
    • beforeUnmount ==>onBeforeUnmount
    • unmounted =====>onUnmounted

beforeCreate以及created，vue3并没有提供对应的钩子函数，被setup取代

二、hook

vue3中使用了hooks的概念，使得组件逻辑更加模块化、可复用————把setup函数中使用的Composition API进行了封装
在src目录下，新建一个hooks文件夹，把setup中能复用的逻辑代码抽离出来，封装进js/ts文件里
在这里插入图片描述
在需要使用该逻辑的组件中，导入此函数并使用

<script>
	import {ref} from 'vue'
	import usePoint from '../hooks/usePoint'
	export default {
		name: 'Demo',
		setup(){
			//数据
			let sum = ref(0)
			// 封装起来的hooks函数
			let point = usePoint()
			//返回一个对象（常用）
			return {sum,point}
		}
	}
</script>

usePoint.js代码

import {reactive,onMounted,onBeforeUnmount} from 'vue'
//需要导出该函数  默认导出、按需导出都可以
export default function (){
	//实现鼠标“打点”相关的数据
	let point = reactive({
		x:0,
		y:0
	})

	//实现鼠标“打点”相关的方法
	function savePoint(event){
		point.x = event.pageX
		point.y = event.pageY
		console.log(event.pageX,event.pageY)
	}

	//实现鼠标“打点”相关的生命周期钩子
	onMounted(()=>{
		window.addEventListener('click',savePoint)
	})

	onBeforeUnmount(()=>{
		window.removeEventListener('click',savePoint)
	})

	return point
}

三、toRef以及toRefs

  • toRef函数：

    • toRef函数可以将一个响应式对象的属性转换为一个单独的响应式引用。
    • 它接收两个参数：第一个参数是一个响应式对象，第二个参数是要引用的属性名。const name = toRef(person,'name')
    • toRef函数返回一个新的响应式引用，该引用会始终保持与对象属性的关联，即当对象属性发生变化时，引用也会跟着变化。
<script>
	import {ref,reactive,toRef} from 'vue'
	export default {
		name: 'Demo',
		setup(){
			//数据
			let person = reactive({
				name:'张三',
				age:18,
				job:{
					j1:{
						salary:20
					}
				}
			})

			return {
				name:toRef(person,'name'),
			    age:toRef(person,'age'),
			    salary:toRef(person.job.j1,'salary'),
			}
		}
	}
</script>

  • toRefs函数：

    • toRefs函数可以将一个响应式对象转换为一个由属性名作为键、属性值作为值的普通对象，其中每个属性值都是一个单独的响应式引用。
    • 它接收一个响应式对象作为参数。
    • toRefs函数返回一个新的普通对象，该对象中的每个属性值都是一个新的响应式引用，与原始响应式对象的属性保持关联。
    • 使用toRefs可以在组件中方便地将一个响应式对象转换为多个单独的响应式引用，以便更灵活地使用和更新其中的属性。
<script>
	import {reactive,toRefs} from 'vue'
	export default {
		name: 'Demo',
		setup(){
			//数据
			let person = reactive({
				name:'张三',
				age:18,
				job:{
					j1:{
						salary:20
					}
				}
			})
			
			return {
			// toRefs会将person里面的所有属性转换为多个响应式引用 只转换出来一层 想解多层的还是去使用toRef吧
				...toRefs(person)
			}
		}
	}
</script>

使用toRef和toRefs可以在组件中更灵活地操作响应式数据例如，您可以使用toRef创建一个引用特定属性的响应式引用，然后在模板中直接使用它；或者您可以使用toRefs将整个响应式对象的属性转换为多个响应式引用，并在组件中分别访问和更新这些引用。这些函数可以帮助简化代码逻辑，提供更好的可读性和可维护性。

总结

本系列讲解到这，已经完成了vue3中常用的组合式api讲解，后续的文章将给大家带来其他的组合式api，以及vue3中新增的组件和一些小的变化，感谢大家的支持~欢迎订阅本系列文章！

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

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

相关文章

vue项目部署自动检测更新

vue项目部署自动检测更新

前言 当我们重新部署前端项目的时候&#xff0c;如果用户一直停留在页面上并未刷新使用&#xff0c;会存在功能使用差异性的问题&#xff0c;因此&#xff0c;当前端部署项目后&#xff0c;需要提醒用户有去重新加载页面。 在以往解决方案中&#xff0c;不少人会使用websocke…
阅读更多...
C#基础--委托

C#基础--委托

C#基础–委托 C#基础–委托 简单说它就是一个能把方法当参数传递的对象，而且还知道怎么调用这个方法，同时也是粒度更小的“接口”（约束了指向方法的签名） 一、什么是委托，委托的本质是什么？ 跟方法有点类似，有参数，返回值，访问修饰符+ delegate public delegate void …
阅读更多...
Python 算法基础篇：哈希表与散列函数

Python 算法基础篇：哈希表与散列函数

Python 算法基础篇&#xff1a;哈希表与散列函数 引用 1. 哈希表的概念2. 散列函数的概念 a ) 一致性 b ) 均匀性 c ) 高效性 3. 散列函数的实现4. 哈希表的实现5. 哈希表的冲突解决 a ) 链地址法 b ) 开放地址法 6. 实例演示实例&#xff1a;电话簿 总结 引用 哈希表是一种高…
阅读更多...
[计算机入门] 文件夹(目录)及路径

[计算机入门] 文件夹(目录)及路径

2.7 文件夹(目录)及路径 文件夹&#xff08;folder、目录&#xff09;是一种用于存储和组织文件和其他文件夹的容器。它可以包含任意数量的文件和子文件夹&#xff0c;并且可以通过拖放、复制和粘贴等操作来移动、复制和管理这些文件和子文件夹。 Windows文件夹可以帮助用户更…
阅读更多...
spring复习：（43）使用TransactionProxyFactoryBean来实现事务时，事务是怎么开启的？

spring复习：（43）使用TransactionProxyFactoryBean来实现事务时，事务是怎么开启的？

一、配置文件&#xff1a; <bean id"myFactoryBean"class"org.springframework.transaction.interceptor.TransactionProxyFactoryBean"><property name"transactionManager" ref"transactionManager" /><property nam…
阅读更多...
可以替代微软 Exchange 的 几个开源软件分享给你

可以替代微软 Exchange 的 几个开源软件分享给你

微软Exchange是一个功能强大的邮件和群件解决方案&#xff0c;但对于一些用户来说&#xff0c;寻找替代方案可能是必要的。幸运的是&#xff0c;有几个开源软件提供了可靠而且功能丰富的替代选项。这些开源软件不仅可以满足组织和个人的邮件和协作需求&#xff0c;还具有灵活性…
阅读更多...
quartus18.0如何下载安装Cyclone V器件库

quartus18.0如何下载安装Cyclone V器件库

文章目录 前言一、下载流程二、添加步骤三、总结四、参考资料 前言 在我们使用不同版本的板子的时候&#xff0c;我们需要在quartus下安装不同型号的器件库才能对板子进行选型并进行下一步操作。 一、下载流程 官网下载地址 这里我们点击支持选中下载中心&#xff1a; 选择FPGA…
阅读更多...
reggie优化04-Nginx

reggie优化04-Nginx

官方网站下载&#xff1a;http://nginx.org/en/download.html 1、Nginx安装 这里需要在Linux系统下&#xff1a; 安装wget工具&#xff1a;yum install wget&#xff08;或者官网下载直接上传到Linux&#xff09; 安装树形结构tree&#xff1a;yum install tree 2、Nginx命令 …
阅读更多...
在云计算环境中，保护Java应用程序可用的有效措施和工具

在云计算环境中，保护Java应用程序可用的有效措施和工具

云计算&#xff08;Cloud&#xff09;技术是近年来计算机科学的一个重要突破。大多数组织已经通过将自己的应用程序移入云平台而获益。不过&#xff0c;如何保证应用程序在第三方服务器上的安全性&#xff0c;是一项艰巨的挑战。 在本文中&#xff0c;我们将重点讨论Java&…
阅读更多...
Notepad++ 配置python虚拟环境（Anaconda）

Notepad++ 配置python虚拟环境（Anaconda）

Notepad配置python运行环境步骤&#xff1a; 打开Notepad ->”运行”菜单->”运行”按钮在弹出的窗口内输入以下命令&#xff1a; 我的conda中存在虚拟环境 (1) base (2) pytorch_gpu 添加base环境至Notepad中 cmd /k chdir /d $(CURRENT_DIRECTORY) & call cond…
阅读更多...
《零基础入门学习Python》第036讲：类和对象：给大家介绍对象

《零基础入门学习Python》第036讲：类和对象：给大家介绍对象

0. 请写下这一节课你学习到的内容&#xff1a;格式不限&#xff0c;回忆并复述是加强记忆的好方式&#xff01; &#xff08;一&#xff09;对象 这节课给大家介绍对象。我们之前说过Python无处不对象&#xff0c;Python到处都是对象&#xff0c;然而我们很多人不理解对象到底…
阅读更多...
NB！更方便Xshell本地密码破解工具

NB！更方便Xshell本地密码破解工具

工具介绍 XshellCrack是基于SharpXDecrypt的二次开发&#xff0c;用go语言重写&#xff0c;增加了注册表查询设置&#xff0c;更方便xshell本地密码破解。 关注【Hack分享吧】公众号&#xff0c;回复关键字【230717】获取下载链接 工具使用 Usage:root SshCrack [flags]Flags…
阅读更多...
在线看板工具Restyaboard

在线看板工具Restyaboard

本文软件由网友 yf33 推荐&#xff1b; 什么 Restyaboard &#xff1f; Restyaboard 是一款类 Trello 应用&#xff0c;支持看板、任务、待办事项、聊天等。Restyaboard 的面板能为您提供项目当前状态的视觉概览&#xff0c;并通过让您专注于最重要的几个项目来提高您的工作效率…
阅读更多...
FiddlerScript修改指定参数的返回值

FiddlerScript修改指定参数的返回值

FiddlerScript修改指定参数的返回值 使用场景&#xff1a; api/Live/GetLiveList接口&#xff1a; &#xff08;1&#xff09;Type为1&#xff0c;接口返回直播列表 &#xff08;2&#xff09;Type为2&#xff0c;接口返回回放列表 现在想修改直播列表的返回值 思路&#…
阅读更多...
【Redis】6、Redisson 分布式锁的简单使用（可重入、重试机制...）

【Redis】6、Redisson 分布式锁的简单使用（可重入、重试机制...）

目录 零、自己通过 set nx ex 实现的分布式锁存在的问题一、Redisson 介绍二、Redisson 基本使用&#xff08;改造业务&#xff09;(1) 依赖(2) 配置 Redisson 客户端(3) 使用 Redisson 的可重入锁 三、Redisson 可重入锁原理四、Redisson 可重试原理五、Redisson 超时释放&…
阅读更多...
线数据的按节点打断

线数据的按节点打断

思想&#xff1a;运行要素转线工具箱 原始数据 运行完数据 数量由7变成27
阅读更多...
Springboot + Vue 下载Word、PDF文档并保留内部格式

Springboot + Vue 下载Word、PDF文档并保留内部格式

相对于上传&#xff0c;下载时复杂的地方就是文件中文名称乱码 前端 <el-button click"clickCall(handleExport, scope,index)">导出</el-button>// 文件下载操作handleExport(row) {axios.get(**********master/proj/exportContract?id" row.id,…
阅读更多...
前端node.js入门

前端node.js入门

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 目录 Node.js 入门 什么是 Node.js&#xff1f; 什么是前端工程化&#xff1f; Node.js 为何能执行 JS&…
阅读更多...
netty组件详解-上

netty组件详解-上

netty服务端示例: private void doStart() throws InterruptedException {System.out.println("netty服务已启动");// 线程组EventLoopGroup group new NioEventLoopGroup();try {// 创建服务器端引导类ServerBootstrap server new ServerBootstrap();// 初始化服…
阅读更多...
CDHD高创驱动器通过ServoStudio备份和恢复参数的具体方法步骤

CDHD高创驱动器通过ServoStudio备份和恢复参数的具体方法步骤

CDHD高创驱动器通过ServoStudio备份和恢复参数的具体方法步骤 硬件连接： 如下图所示，通过通信线缆将伺服驱动器和电脑进行连接，一端为RJ11，一端为USB， 软件连接： 打开伺服调试软件ServoStudio，在驱动器配置中找到连接—自动连接，点击搜索&连接，此时软件会自动搜索…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023