vue3中的生命周期函数vue2和vue3中的生命周期函数对比beforeMount=>onBeforeMountmou

vue2和vue3中的生命周期函数对比

beforeMount => onBeforeMount

mounted => onMounted

beforeUpdate => onBeforeUpdate

updated => onUpdated

beforeUnmount => onBeforeUnmount

unmount => onUnmounted

在comsition API 中不存在beforeCreate和created这两个生命周期函数因为setup函数的执行时间在beforeCreate和created之间，有需要执行的内容可以直接在setup函数中执行，没必要再写在beforeCreate和created中

vue3中新增了onRenderTracked生命周期函数指的是每次渲染之后收集页面响应式的依赖的时候会自动执行的函数

当页面渲染的时候，vue都会重新收集响应式的依赖，响应式的依赖一旦重新渲染需要重新收集的时候onRenderTracked便会自动执行一次页面首次渲染便会执行页面再次重新渲染也会执行与onRenderTracked对应的函数是onRenderTriggered 指每次重新渲染被触发的时候，首次页面加载不会触发，当数据改变，页面重新渲染的时候触发，onRenderTracked也会再次触发


import { onBeforeMount, onRenderTracked, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onRenderTriggered }
setup() {
	onBeforeMount(() => {
    	console.log('onBeforeMount')
    })
    onMounted(() => {
    	console.log('onMounted')
    })
    onBeforeMount(() => {
    	console.log('onBeforeMount')
    })
    onBeforeUpdate(() => {
    	console.log('onBeforeUpdate')
    })
    updated(() => {
    	console.log('updated')
    })
    beforeUnmount(() => {
    	console.log('beforeUnmount')
    })
    // 每次渲染后重新收集响应式依赖
    onRenderTracked(() => {
    	console.log('onRenderTracked')
    })
    // 每次触发页面重新渲染时自动执行
    onRenderTriggered(() => {
    	console.log('onRenderTriggered')
    })
}

vue3中的生命周期函数