vue3--生命周期

setup 函数是 Vue3 中新增的一个生命周期函数

• setup 函数会在 beforeCreate 之前调用，因为此时组件的 data 和 methods 还没有初始化，因此在 setup 中是不能使用 this 的。
• 所以 Vue 为了避免我们错误的使用，它直接将 setup 函数中的 this 修改成了undefined。
• setup函数，只能是同步的不能是异步的

vue2	vue3
beforeCreate	setup
created	setup
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
activated	onActivated
deactivated	onDeactivated
errorCaptured	onErrorCaptured
- -	onRenderTracked
- -	onRenderTriggered

<script>
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onRenderTracked, onRenderTriggered } from 'vue';

export default {
	setup () {
		console.log('setup');

		
		// 生命周期钩子(没有beforeCreate和created)
		onBeforeMount(() => { console.log('onBeforeMount'); })
		onMounted(() => { console.log('onMounted'); })
		onBeforeUpdate(() => { console.log('onBeforeUpdate'); })
		onUpdated(() => { console.log('onUpdated'); })
		onBeforeUnmount(() => { console.log('onBeforeUnmount'); })
		onUnmounted(() => { console.log('onUnmounted'); })

		// 新增的debug钩子  生产环境中会被忽略
		onRenderTracked(() => { console.log('onRenderTracked'); }) // 每次渲染后重新收集响应式依赖，在onMounted前触发，页面更新后也会触发
		onRenderTriggered(() => { console.log('onRenderTriggered'); }) // 每次触发页面重新渲染时的自动执行，在onBeforeUpdate之前触发
	},
	beforeCreate () {
		console.log('beforeCreate');
	},
	created () {
		console.log('created');
	},
  beforeMount(){
    console.log('beforeMount');
  },  
  mounted(){
    console.log("mounted");
  }
}

</script>

setup
beforeCreate
created
onBeforeMount
beforeMount
onMounted
mounted

加载顺序
setup => beforeCreate => created => onBeforeMount => beforeMount => onMounted => mounted