图解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 条评论
登录 后参与评论

相关文章

来自专栏逆向技术

32位汇编第六讲,OllyDbg逆向植物大战僵尸,快速定位阳光基址

      32位汇编第六讲,OllyDbg逆向植物大战僵尸,快速定位阳光基址 一丶基址,随机基址的理解 首先,全局变量的地址,我们都知道是固定的,是在PE文件...

3277
来自专栏Java成神之路

Java企业微信开发_15_查询企业微信域名对应的所有ip

751
来自专栏Java帮帮-微信公众号-技术文章全总结

RabbitMQ详解解答【面试+工作】

如果安装rabbitMQ首先安装基于erlang语言支持的OTP软件,然后在下载rabbitMQ软件进行安装(安装过程都是下一步,在此不在说了)

2521
来自专栏cloudskyme

虚拟化平台cloudstack(4)——几个异常

cloudstack主机添加不成功 CloudStack正常启动,添加区域、提供点和群集都正常,但是添加主机时提示添加不成功。 先添加主机: ? 然后出现提示:...

3278
来自专栏Django Scrapy

mac python3 安装 mysqlclient包失败如何解救

安装命令 pip3 install mysqlclient 报错信息1 Collecting mysqlclient Retrying (Retry(t...

34412
来自专栏spring源码深度学习

重拾python爬虫之urllib3

Urllib3是一个功能强大,条理清晰,用于HTTP客户端的Python库。许多Python的原生系统已经开始使用urllib3。Urllib3提供了很多pyt...

1112
来自专栏Java后端技术

解决Java程序连接mysql数据库出现CommunicationsException: Communications link failure错误的问题

  最近在家里捣鼓一个公司自己搭建的demo的时候,发现程序一启动就会出现CommunicationsException: Communications lin...

1181
来自专栏北京马哥教育

27个Linux文档编辑命令

? 文 | 豌豆 来源 | 菜鸟教程 ? 豌豆贴心提醒,本文阅读时间5分钟,文末有秘密! Linux col命令 Linux col命令用于过滤控制字...

4686
来自专栏jmeter高手高高手

Jmeter(十九)_ForEach控制器实现网页爬虫

一直以来,爬虫似乎都是写代码去实现的,今天像大家介绍一下Jmeter如何实现一个网页爬虫! 龙渊阁测试开发家园 317765580

3173
来自专栏代码GG之家

SDL系列讲解(九) 异常退出分析

SDL系列讲解(一) 简介 SDL系列讲解(二) 环境搭建 SDL系列讲解(三) 工具安装 SDL是什么,能干什么,为什么我们要学习它? SDL系列讲解(四)...

1946

扫码关注云+社区