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

這篇具有很好參考價值的文章主要介紹了從Vue2到Vue3【二】——Composition API（第二章）。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

系列文章目錄

內(nèi)容	鏈接
從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，并探索其在開發(fā)過程中的優(yōu)勢和用法。無論是新手還是有經(jīng)驗的Vue開發(fā)者，通過學習如何使用組合式API，我們都能更高效地構建復雜的應用程序，提高代碼的可維護性和重用性。

一、生命周期

說到生命周期，大家一定都不陌生，但是由于Vue 3引入了新的組合式API，因此在Vue 3中，生命周期鉤子函數(shù)發(fā)生了一些變化。
vue2的生命周期圖示
從Vue2到Vue3【二】——Composition API（第二章）,從Vue2到Vue3,vue.js,前端,javascript

beforeCreate：在實例被創(chuàng)建之前被調(diào)用，此時組件的數(shù)據(jù)和方法尚未初始化。
created：在實例被創(chuàng)建之后立即調(diào)用，可以訪問到數(shù)據(jù)和方法，但此時尚未掛載到DOM上。
beforeMount：在組件掛載到DOM之前被調(diào)用，此時模板已經(jīng)編譯完成，但尚未渲染到頁面上。
mounted：在組件掛載到DOM之后調(diào)用，此時組件已經(jīng)被渲染到頁面上，可以進行DOM操作等操作。
beforeUpdate：在數(shù)據(jù)更新之前調(diào)用，發(fā)生在虛擬DOM重新渲染和打補丁之前。
updated：在數(shù)據(jù)更新之后調(diào)用，發(fā)生在虛擬DOM重新渲染和打補丁之后。
beforeDestroy：在實例銷毀之前調(diào)用，可以在此進行一些清理工作，如清除定時器、解綁事件等。
destroyed：在實例銷毀之后調(diào)用，此時組件已經(jīng)從頁面上移除，并且所有的事件監(jiān)聽和數(shù)據(jù)綁定都被自動清除。
activated（僅在keep-alive組件中可用）：在組件被激活時調(diào)用，僅適用于keep-alive組件。
deactivated（僅在keep-alive組件中可用）：在組件被停用時調(diào)用，僅適用于keep-alive組件。
vue3的生命周期圖示

從兩幅圖的對比不難看出，對于配置項形式的生命周期鉤子函數(shù)并沒有很大的變化，唯一要注意的點就是
beforeDestroy改名為 beforeUnmount
destroyed改名為 unmounted

在vue3中通過配置項形式使用生命周期鉤子函數(shù)

<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形式使用生命周期鉤子函數(shù)

<script>
	// 導入使用的鉤子函數(shù)
	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并沒有提供對應的鉤子函數(shù)，被setup取代

二、hook

vue3中使用了hooks的概念，使得組件邏輯更加模塊化、可復用————把setup函數(shù)中使用的Composition API進行了封裝
在src目錄下，新建一個hooks文件夾，把setup中能復用的邏輯代碼抽離出來，封裝進js/ts文件里
從Vue2到Vue3【二】——Composition API（第二章）,從Vue2到Vue3,vue.js,前端,javascript
在需要使用該邏輯的組件中，導入此函數(shù)并使用

<script>
	import {ref} from 'vue'
	import usePoint from '../hooks/usePoint'
	export default {
		name: 'Demo',
		setup(){
			//數(shù)據(jù)
			let sum = ref(0)
			// 封裝起來的hooks函數(shù)
			let point = usePoint()
			//返回一個對象（常用）
			return {sum,point}
		}
	}
</script>

usePoint.js代碼

import {reactive,onMounted,onBeforeUnmount} from 'vue'
//需要導出該函數(shù)  默認導出、按需導出都可以
export default function (){
	//實現(xiàn)鼠標“打點”相關的數(shù)據(jù)
	let point = reactive({
		x:0,
		y:0
	})

	//實現(xiàn)鼠標“打點”相關的方法
	function savePoint(event){
		point.x = event.pageX
		point.y = event.pageY
		console.log(event.pageX,event.pageY)
	}

	//實現(xiàn)鼠標“打點”相關的生命周期鉤子
	onMounted(()=>{
		window.addEventListener('click',savePoint)
	})

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

	return point
}

三、toRef以及toRefs

toRef函數(shù)：
- toRef函數(shù)可以將一個響應式對象的屬性轉(zhuǎn)換為一個單獨的響應式引用。
- 它接收兩個參數(shù)：第一個參數(shù)是一個響應式對象，第二個參數(shù)是要引用的屬性名。const name = toRef(person,'name')
- toRef函數(shù)返回一個新的響應式引用，該引用會始終保持與對象屬性的關聯(lián)，即當對象屬性發(fā)生變化時，引用也會跟著變化。

<script>
	import {ref,reactive,toRef} from 'vue'
	export default {
		name: 'Demo',
		setup(){
			//數(shù)據(jù)
			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函數(shù)：
- toRefs函數(shù)可以將一個響應式對象轉(zhuǎn)換為一個由屬性名作為鍵、屬性值作為值的普通對象，其中每個屬性值都是一個單獨的響應式引用。
- 它接收一個響應式對象作為參數(shù)。
- toRefs函數(shù)返回一個新的普通對象，該對象中的每個屬性值都是一個新的響應式引用，與原始響應式對象的屬性保持關聯(lián)。
- 使用toRefs可以在組件中方便地將一個響應式對象轉(zhuǎn)換為多個單獨的響應式引用，以便更靈活地使用和更新其中的屬性。

<script>
	import {reactive,toRefs} from 'vue'
	export default {
		name: 'Demo',
		setup(){
			//數(shù)據(jù)
			let person = reactive({
				name:'張三',
				age:18,
				job:{
					j1:{
						salary:20
					}
				}
			})
			
			return {
			// toRefs會將person里面的所有屬性轉(zhuǎn)換為多個響應式引用 只轉(zhuǎn)換出來一層 想解多層的還是去使用toRef吧
				...toRefs(person)
			}
		}
	}
</script>

使用toRef和toRefs可以在組件中更靈活地操作響應式數(shù)據(jù)例如，您可以使用toRef創(chuàng)建一個引用特定屬性的響應式引用，然后在模板中直接使用它；或者您可以使用toRefs將整個響應式對象的屬性轉(zhuǎn)換為多個響應式引用，并在組件中分別訪問和更新這些引用。這些函數(shù)可以幫助簡化代碼邏輯，提供更好的可讀性和可維護性。

總結

本系列講解到這，已經(jīng)完成了vue3中常用的組合式api講解，后續(xù)的文章將給大家?guī)?strong>其他的組合式api，以及vue3中新增的組件和一些小的變化，感謝大家的支持~歡迎訂閱本系列文章！文章來源地址http://www.zghlxwxcb.cn/news/detail-582044.html

到了這里，關于從Vue2到Vue3【二】——Composition API（第二章）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！