生命周期的基本概念
生命周期,其实就是一个组件从 创建(出生) 到 销毁(死亡) 的过程,在这个过程中的不同阶段,会触发不同的函数,也叫,生命周期钩子函数。
我们可以在这些函数中,完成我们想要完成的逻辑,如:在虚拟dom挂载真实dom之前,获取服务器数据,然后再渲染到页面、或者在离开一个组件之前,停止此组件的所有计时器等等……
这里先给大家放一张图片,大家可以先简单了解一下,后面会详细讲解
语法
选项式api的语法:
export default {
data() {
return {
text: '这是一个选项式api下的数据'
};
},
beforeCreate(){
console.log( '组件实例创建之前' );
},
created(){
console.log( '组件实例创建完毕' );
},
beforeMount(){
console.log( '虚拟dom挂载真实dom之前' );
},
mounted(){
console.log( '虚拟dom挂载真实dom完毕' );
},
};
组合式api的语法:(这里直接写的 setup语法糖,因为这种写法更主流一点 )
<script setup>
import { onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue';
let text = ref(' 这是一个语法糖下的数据 ');
onBeforeMount(() => {
console.log('虚拟dom挂载真实dom之前');
});
onMounted(() => {
console.log('虚拟dom挂载真实dom之后');
});
onBeforeUpdate(() => {
console.log('数据更新,但未渲染到真实dom');
});
onUpdated(() => {
console.log('数据更新,已经渲染到真实dom');
});
onBeforeUnmount(() => {
console.log('组件销毁之前');
});
onUnmounted(() => {
console.log('组件销毁完毕');
});
</script>
在setup语法糖中,是没有created和beforeCreate 这两个钩子函数的!要注意!
而且在组合式api的语法下,要在这些钩子函数前边加 on ,并且执行逻辑是,在写一个回调函数!
总结
vue生命周期这些知识点很简单,不过却很好用,比如我们在做一些页面初始化的时候,就可以利用这些钩子函数来完成我们想要的逻辑。
本人只是一个学生,如果有不足的地方,请大家多多指正!O(∩_∩)O