图解vue生命周期

学习vue时搞清楚生命周期可以帮助你知道什么时候在什么地方执行该执行的方法,话不多说上图:

复制下面代码可以在控制台更详细展示各个钩子的状态

<!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 : "小李同学就是我" 
      },
       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 组件创建完毕,属性已经绑定但dom还未生成的状态===============》');
            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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏枕边书

PHP中的数据库四、mongodb

传统数据库中,我们要操作数据库数据都要书写大量的sql语句,而且在进行无规则数据的存储时,传统关系型数据库建表时对不同字段的处理也显得有些乏力,mongo应运而...

1918
来自专栏腾讯IVWEB团队的专栏

React 学习:setState 源码浅析

本文通过例子分析setState的实现原理,从中解读 React 中的 setState 源码。

2780
来自专栏Java技术

MySQL到底有多少种日志类型需要我们记住的!

MySQL中有六种日志文件,分别是:重做日志(redo log)、回滚日志(undo log)、二进制日志(binlog)、错误日志(errorlog)、慢查询...

591
来自专栏后端之路

sql导出excel丢失精度

目前数据库大量使用了uuid_short导致导出excel丢失精度。默认情况下excel会自动识别数字,超过15位即末尾为0。 因此需要采用文本格式存储 首先...

1907
来自专栏JetpropelledSnake

Python入门之os.walk()方法

os.walk方法,主要用来遍历一个目录内各个子目录和子文件。 os.walk(top, topdown=True, onerror=None, followl...

2056
来自专栏前端杂货铺

js的并行加载以及顺序执行

重新温习了下这段内容,发现各个浏览器的兼容性真的是搞大了头,处理起来很是麻烦。 现在现总结下并行加载多个js的方法:   1,对于动态createElement...

2868
来自专栏运维技术迷

PHP-魔术变量

在PHP中一共提供了8个魔术变量,八个魔术常量它们的值随着它们在代码中的位置改变而改变。 1.显示文件中的当前行号 echo '这是第 " ' .__LINE_...

4007
来自专栏开发 & 算法杂谈

django 实现未经登录验证的url过滤

本人在做一个基于sae的在线学习系统,语言使用的python,web框架用的是django1.4。

644
来自专栏小尘哥的专栏

springboot中junit回滚

可以看出code=001001的数据没有更改,而code=001003的数据修改成功。回头看代码:

713
来自专栏维C果糖

史上最简单的 MySQL 教程(三十九)「事务(下)」

事务原理:在事务开启之后,所有的操作都会被临时存储到事务日志,事务日志只有在收到commit命令之后,才会将操作同步到数据表,其他任何情况都会清空事务日志,例如...

39310

扫描关注云+社区