Vue3学习-生命周期、自定义hook

Vue2基础全套教程合集：点击跳转        Vue2高级全套教程合集：点击跳转

---

一、生命周期

1. vue2.x的生命周期

2. vue3.0的生命周期

• Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：
  • beforeDestroy改名为 beforeUnmount
  • destroyed改名为 unmounted
• Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：

  • beforeCreate===>setup()

  • created=======>setup()

  • beforeMount ===>onBeforeMount

  • mounted=======>onMounted

  • beforeUpdate===>onBeforeUpdate

  • updated =======>onUpdated

  • beforeUnmount ==>onBeforeUnmount

  • unmounted =====>onUnmounted

    具体编码：

    <template>
    	<h2>当前求和为：{{sum}}</h2>
    	<button @click="sum++">点我+1</button>
    </template>
    
    <script>
    	import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
    	export default {
    		name: 'Demo',
    		
    		setup(){
    			console.log('---setup---')
    			//数据
    			let sum = ref(0)
    
    			//通过组合式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>
    

二、自定义hook函数

• 什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。

• 类似于vue2.x中的mixin。

• 自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。

使用方法：新建文件夹 src/hooks/，在该文件夹下写js的功能代码，命名大多数使用use开头，方便识别。

具体编码： Test.vue

<template>
	<h2>我是Test组件</h2>
	<h2>当前点击时鼠标的坐标为：x：{{point.x}}，y：{{point.y}}</h2>
</template>

<script>
	import usePoint from '../hooks/usePoint'
	export default {
		name:'Test',
		setup(){
			const point = usePoint()
			return {point}
		}
	}
</script>

hooks/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
}

源代码出处：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通