Vue的生命周期

38 阅读1分钟

什么是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);
    }
  });
};
.......