Vue3生命周期
1. Vue3的生命周期图
可见一共有8个生命周期钩子函数，分别是beforeCreate, created, beforeMount, mounted, beforeUpdate,update,beforeUnmount, unmounted
相比Vue2, 其中逻辑判断el判断直接在第一步就处理了，Vue2需要执行beforeCreate, created 完毕才到el判断, 需要注意的是unmounted 之前也是做了清除组件和自定义事件数据操作，只是文档上没提。另外Vue2中的beforeDestory改名为beforeUnmount, destoryed改名为unmounted
vue
<template>
<span>{{ count }}</span>
<br/>
<button @click="addCount">新增</button>
</template>
<script>
import { ref, reactive} from 'vue'
export default {
name: 'Test',
setup(){
console.log('------------setup-----------------')
let count = ref(0)
let addCount = ()=>{
count.value++
}
return {
count,
addCount
}
},
// 通过配置的形式使用生命周期钩子函数
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-----------------');
}
}
</script>
vue
<template>
<div>
<button @click="showComponent">显示/隐藏</button>
<Test v-if="isShow"></Test>
</div>
</template>
<script>
import { ref, reactive } from 'vue'
import Test from './components/Test.vue'
export default {
name: 'App',
components: { Test },
setup(props, context) {
let isShow = ref(true)
let showComponent = () => {
isShow.value = !isShow.value
}
return {
isShow,
showComponent
}
}
}
</script>
txt
评论