vue2和vue3生命周期钩子函数区别

vue2.x生命周期钩子函数（8个）

• beforeCreate （创建前） ：vue实例初始化之前调用
• created （创建后）：vue实例初始化之后调用
• beforeMount （载入前）：挂载到DOM树之前调用
• mounted （载入后）：挂载到DOM树之后调用
• beforeUpdate （更新前）：数据更新之前调用
• updated （更新后）：数据更新之后调用
• beforeDestroy （销毁前）：vue实例销毁之前调用
• destroyed （销毁后）：vue实例销毁之后调用

vue3.0生命周期钩子函数（7个）

• setup 创建实例前
• onBeforeMount 挂载DOM前
• onMounted 挂载DOM后
• onBeforeUpdate 更新组件前
• onUpdated 更新组件后
• onBeforeUnmount 卸载销毁前
• onUnmounted 卸载销毁后

在vue3中，setup的执行顺序早于 beforeCreate；
在vue2中同一个生命周期只能写一个，但是vue3可以写多个。

代码演示1：

<template>
  <div>我是setup</div>
</template>

<script>
export default {
    // vue2
    beforeCreate() {
        console.log('我是beforeCreate');
    },
    created() {
        console.log('我是created');
    },
    // vue3
    setup() {
        console.log('我是setup');
        return {
        }
    }
}
</script>

代码演示2：

<template>
	<div class="box">我是box</div>
</template>
<script>
import {onBeforeMount,onMounted} form 'vue'
export default {
	setup(){
		onBeforeMount(()=>{
			console.log('DOM渲染前',document.querySelector('.box'))
		})
		onMounted(()=>{
			console.log('DOM渲染后1',document.querySelector('.box'))
		})
		onMounted(()=>{
			console.log('DOM渲染后2',document.querySelector('.box'))
		})
	}
}
</script>