什么是Vue的生命周期?
Vue组件实例被创建后都会经过一系列初始化步骤,比如数据检测、模板编译和挂载实例到Dom。这个过程中就会涉及到一系列叫做生命周期钩子的函数,以便在特定阶段可以添加业务代码完成需求。
那么生命周期钩子函数有哪些呢?
有创建前后、挂载前后、更新前后和销毁前后,这里销毁前后函数从Vue3起,从destroy变成了unmounted,即不挂载的意思。
那么在这些生命周期钩子函数中,我经常会用到onMounted,在该函数中可以在Dom载入后开始实现里面的业务代码,比如我初始化页面的时候要加载出来页面的数据,我就会在onMounted函数中去调用请求数据的函数,把请求到的数据渲染在对应的Dom位置上。
代码实现:
onMounted(()=>{
//查询所有分类
handleQueryCategory();
})
//获取level1数据
const handleQueryCategory = () => {
axios.get("/category/all").then((response) => {
const data = response.data;
if (data.success) {
categorys = data.content;
level1.value = [];
//将扁平数据转换为树结构
level1.value = Tool.array2Tree(categorys, 0);
} else {
message.error(data.message);
}
});
};
.......