从Vue2到Vue3【二】——Composition API(第二章)

这篇具有很好参考价值的文章主要介绍了从Vue2到Vue3【二】——Composition API(第二章)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

系列文章目录

内容 链接
从Vue2到Vue3【零】 Vue3简介
从Vue2到Vue3【一】 Composition API(第一章)
从Vue2到Vue3【二】 Composition API(第二章)
从Vue2到Vue3【三】 Composition API(第三章)
从Vue2到Vue3【四】 Composition API(第四章)


前言

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

一、 生命周期

说到生命周期,大家一定都不陌生,但是由于Vue 3引入了新的组合式API,因此在Vue 3中,生命周期钩子函数发生了一些变化
vue2的生命周期图示
从Vue2到Vue3【二】——Composition API(第二章),从Vue2到Vue3,vue.js,前端,javascript

  • 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的生命周期图示
    从Vue2到Vue3【二】——Composition API(第二章),从Vue2到Vue3,vue.js,前端,javascript
    从两幅图的对比不难看出,对于配置项形式的生命周期钩子函数并没有很大的变化,唯一要注意的点就是

  • 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文件里
从Vue2到Vue3【二】——Composition API(第二章),从Vue2到Vue3,vue.js,前端,javascript
在需要使用该逻辑的组件中,导入此函数并使用

<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中新增的组件一些小的变化,感谢大家的支持~欢迎订阅本系列文章!文章来源地址https://www.toymoban.com/news/detail-582044.html

到了这里,关于从Vue2到Vue3【二】——Composition API(第二章)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【vue3】11-Vue 3中的Composition Api(一)

    在Vue2中,我们编写组件的方式是Options APl: Options API的一大特点就是在 对应的属性 中编写 对应的功能模块 ; 比如 data定义数据 、 methods中定义方法 、 computed中定义计算属性 、 watch中监听属性改变 ,也包括 生命周期钩子 ; 但是这种代码有一个很大的弊端: 当我们 实现某一个功

    2024年02月08日
    浏览(41)
  • 探究Vue3中的Composition API:优化组件逻辑的新利器

    在 Vue 3.0 中,引入了一种新的响应式 API,即 toRef 。 toRef 函数可以将一个普通值转换为响应式引用类型,这样就可以在模板中直接使用这个响应式引用类型的属性,并且当该属性发生变化时,视图会自动更新。 通过控制台打印输出的内容和页面的变化,我们可以观察到,age的

    2024年02月10日
    浏览(37)
  • Composition API 的优势、新的组件(Fragment,Teleport,Suspense)【Vue3】

    使用传统OptionsAPI中,新增或者修改一个需求,就需要分别在data,methods,computed里修改。 我们可以更加优雅的组织我们的代码,函数。让相关功能的代码更加有序的组织在一起。 在Vue2中:组件必须有一个根标签 在Vue3中:组件可以没有根标签,内部会将多个标签包含在一个

    2024年02月02日
    浏览(42)
  • vue3前端开发,感受一下组合式api和VUE2选项式的差异

    vue3前端开发,感受一下组合式api和VUE2选项式的差异!今天开始,正式开始,进入学习Vue3的内容。以后代码,案例分享,都会采用组合式api的模式为大家做展示。 今天是第一节,带大家感受一下,Vue3的组合式api和之前传统的vue2版本选项式api的差别。 首先,大家需要提前使用

    2024年01月19日
    浏览(38)
  • Vue 3 Composition API 详解

    在Vue 3中,引入了一个新的Composition API,旨在提供一种更灵活和可重用的方式来组织组件代码。Composition API基于函数式编程思想,允许开发者将逻辑和状态管理逻辑分离,使代码更加清晰和可维护。 响应式数据 在Vue 3中,响应式数据是组件状态的重要组成部分。通过使用 re

    2024年01月21日
    浏览(41)
  • 详解Vue 3 的 Composition API

    Vue 3 的 Composition API 是一种新的组合式 API 风格,它可以更好地组织和复用组件逻辑。相比于 Vue 2 的 Options API,Composition API 提供了更灵活和可组合的方式来编写组件。 下面是 Composition API 的一些特点和优势: 函数式组件:Composition API 支持使用函数式组件的方式来编写组件。

    2024年02月10日
    浏览(37)
  • vue/composition-api 的使用

    最近我们项目是 vue2,但是要使用 jsx + composition ,所以来学习一下这个 vue/composition-api (一)安装 (二)注册 在 main.ts 中 (三)使用 最基本的组件: defineComponent 本身的功能很简单,但是最主要的功能是为了 ts 下的类型推导~ 1. setup 函数 setup 在 create 实例在初始化之前调

    2024年02月05日
    浏览(41)
  • 第二章(第二节):无穷小量和函数

    若 lim f(x) = 0 , 则称函数 f(x) 当 x → x 0 时是无穷小量,简称: 无穷小 。      x→ x 0 定理1. 有限多个 无穷小量的代数和仍是无穷小量 定理2. 有限多个 无穷小量的积也是无穷小量 定理3.常数与无穷小量的积也是无穷小量 定理4.有界变量与无穷小量的积是无穷小量 当 x→

    2024年02月08日
    浏览(53)
  • Vue Composition API之侦听器watch/watchEffect

    在日常的开发中,很多时候我们需要去对一些状态进行监听,比如当显示学生的成绩列表时,我们使用一个学生的学号student_num作为请求成绩的参数,如果没有监听机制,当学号student_num改变时,我们需要依赖用户的操作去刷新成绩。但是有了侦听器,我们可以通过侦听器去监

    2024年02月08日
    浏览(48)
  • 556、Vue 3 学习笔记 -【常用Composition API(五)】 2023.08.25

    Vue3中可以继续使用Vue2中的生命周期钩子,但有两个被更名: beforeDestroy改名为beforeUnmount destroy改名为unmounted Vue3也提供了组合式API形式的生命周期钩子,与Vue2中钩子对应关系如下: beforeCreate === setup() created === setup() beforeMount === onBeforeMount mounted === onMounted beforeUpdate === onBefor

    2024年02月11日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包