vue知识点(一）—— 生命周期和钩子函数

最新推荐文章于 2021-05-28 14:16:20 发布

前端前端

最新推荐文章于 2021-05-28 14:16:20 发布

阅读量186

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_36736346/article/details/89281576

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

vue刚接触时写了个博客网站放github上，顺便让优秀的学长面试了一波，了解到好多知识漏洞。补当时笔记：

A.生命周期和钩子函数

经典图如下：

从vue2.0钩子函数回忆：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app">
     <p>{{ message }}</p>
</div>

<script type="text/javascript">
    
  var app = new Vue({
      el: '#app',
      data: {
          message : "xuxiao is boy" 
      },
       beforeCreate: function () {
                console.group('beforeCreate 创建前状态===============》');
               console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
               console.log("%c%s", "color:red","message: " + this.message)  
        },
        created: function () {
            console.group('created 创建完毕状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeMount: function () {
            console.group('beforeMount 挂载前状态===============》');
            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
        },
        mounted: function () {
            console.group('mounted 挂载结束状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);   
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el); 
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);  
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message)
        }
    })
</script>
</body>
</html>

beforeCreated：此时 el 和 data 都没开始加载

created: el没开始加载，data加载完毕

beforMount: el加载，data加载完毕，但标签内应用数据为成功加载

mounted: 全部加载完毕

beforeUpdate: 数据发生改变，还没渲染之前，控制台输入信息修改message，beforeUpdate和updated显示同样的message改变后的值和标签内改变后的值

updated: 数据发生改变，还没渲染之后，控制台输入信息修改message，beforeUpdate和updated显示同样的message改变后的值和标签内改变后的值

正常调用时是看不到页面摧毁事件钩子执行的，这时手动输入

app.$destroy();

beforeDestroyed: 摧毁事件中值和mouted钩子里的el data 值一样，但是进行页面摧毁后再次改变页面值，页面不会再次响应

destroyed: 摧毁事件中值和mouted钩子里的el data 值一样，但是进行页面摧毁后再次改变页面值，页面不会再次响应，原来dom结构保留。

keep-alive 独有的生命周期

vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗

activated配合keep-alive才可实现从其他页面跳转到某个页面时会请求数据，当从下级页面返回这个页面时不会重新请求数据

activated: <keep-alive>组件被激活调用。

deactivated:<keep-alive>组件被移除时调用。

用 keep-alive 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 deactivated 钩子函数，命中缓存渲染后会执行 actived 钩子函数。

思否里大佬总结的具体使用总结，蛮实用的，记一下：

beforecreate : 可以在这加个loading事件
created ：在这结束loading，还做一些初始化，实现函数自执行
mounted ：在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestroy：你确认删除XX吗？移除事件、定时器，防止内存泄漏以及各种组件销毁操作

destroyed ：当前组件已被删除，清空相关内容后会调用改钩子函数。

补图：

前端前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue知识点(一）—— 生命周期和钩子函数

vue刚接触时写了个博客网站放github上，顺便让优秀的学长面试了一波，了解到好多知识漏洞。补当时笔记：A.生命周期和钩子函数经典图如下：从vue2.0钩子函数回忆：<!DOCTYPE html><html><head> <title></title> <script type="text...
复制链接

扫一扫