你不会还没了解过生命周期吧~~~

最新推荐文章于 2024-07-20 18:05:54 发布

小xxxzZz童学

最新推荐文章于 2024-07-20 18:05:54 发布

阅读量87

点赞数 4

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_71423241/article/details/125012480

版权

在这里插入图片描述

vue 实例从创建到销毁的过程就是生命周期。

也就是从开始创建、初始化数据、编译模板、挂在 dom -> 渲染、更新 -> 渲染、准备销毁、销毁在等一系列过程

vue的声明周期常见的主要分为4大阶段8大钩子函数

另外三个生命周期函数不常用

keep-alive 主要用于保留组件状态或避免重新渲染。

activated只有在keep-alive 组件激活时调用。

deactivated只有在keep-alive 组件停用时调用。

在这里插入图片描述

1.beforeCreate ：创建前

 beforeCreate() {

     // data和method 还没有初始化

  },

2.created ：创建后

 	created() {

     //   data和method已经初始化完成
     
     },

3.beforeMount ：渲染前

  .beforeMount() {

     //   已经编译好了模版字符串、但还没有真正渲染到页面中去

    },

4.mounted ：渲染后

  mounted() {

         // 已经渲染完，可以看到页面

    },

5.beforeUpdate ：数据更新前

    beforeUpdate() {

     //    此时数据已更新，但页面还是旧的

      //    数据与页面不一致

    },

6.updated ：数据更新后

     updated() {

     //    已经把更新后的数据渲染到视图中去了

    },

7.beforeDestroy ：销毁前

 beforeDestroy() {
 
      //    实例进入准备销毁的阶段、此时data 、methods 、指令等还是可用状态

     //     在此阶段一般进行：关闭定时器，解除自定义事件等操作

    },

8.destroyed ：销毁后

 destroyed() {

     //   实例已经完成销毁、此时data 、methods 、指令等都不可用

    },

关注