前端学习-vue视频学习010-生命周期
组件的生命周期
- 创建
- 挂载
- 更新
- 销毁
在特定的时期调用特定的函数，即生命周期
vue2的生命周期
4个周期，对应8个钩子（生命周期函数）
- 创建：创建前、创建完毕
- 挂载：挂载前、挂载完毕
- 更新：更新前、更新完毕
- 销毁：销毁前、销毁完毕
<script>
export default {
// eslint-disable-next-line
name: 'Person',
data(){
return {
sum:1
}
},
methods:{
changeSum(){
this.sum += 1
}
},
beforeCreate(){
console.log('创建前');
},
created(){
console.log('创建完毕');
},
beforeMount(){
console.log('挂载前');
},
mounted(){
console.log('挂载完毕');
},
beforeUpdate(){
console.log('更新前');
},
updated(){
console.log('更新完毕');
},
beforeDestroy(){
console.log('销毁前');
},
destroyed(){
console.log('销毁完毕');
},
}
</script>
创建、挂载仅产生一次
更新可多次
销毁：当不使用该组件时，组件销毁
如何销毁组件
<template>
<Person v-if="flag"/>
</template>
<script>
// import { Person } from './components/Person.vue'
export default {
name: 'App',
components:{
Person: ()=> import ('./components/Person.vue')
},
data(){
return{
flag:false
}
}
}
</script>
vue2的生命周期
4个周期，对应6个钩子（生命周期函数）
- 创建：集成在setup中
- 挂载：挂载前、挂载完毕
- 更新：更新前、更新完毕
- 卸载：卸载前、卸载完毕
<script lang="ts" setup name="Person">
import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
let sum = ref(0)
function changeSum() {
sum.value += 1
}
// vue3中创建集成在setup里
console.log('子--创建');
onBeforeMount(()=>{
console.log('子--挂载前');
})
onMounted(()=>{
console.log('子--挂载完毕');
})
onBeforeUpdate(()=>{
console.log('子--更新前');
})
onUpdated(()=>{
console.log('子--更新完毕');
})
onBeforeUnmount(()=>{
console.log('子--卸载前');
})
onUnmounted(()=>{
console.log('子--卸载完毕');
})
</script>
根组件最后才挂载
