Vue95 vue3 生命周期

笔记

• 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

代码

Demo.vue

<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}
		},
		//通过配置项的形式使用生命周期钩子
		//#region 
		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---')
		},
		//#endregion
	}
</script>

App.vue

<template>
	<button @click="isShowDemo = !isShowDemo">切换隐藏/显示</button>
	<Demo v-if="isShowDemo"/>
</template>

<script>
	import {
      
      ref} from 'vue'
	import Demo from './components/Demo'
	export default {
      
      
		name: 'App',
		components:{
      
      Demo},
		setup() {
      
      
			let isShowDemo = ref(true)
			return {
      
      isShowDemo}
		}
	}
</script>