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

相关文章

来自专栏丑胖侠

《Drools7.0.0.Final规则引擎教程》第4章 4.3 定时器

定时器 规则用基于 interval(间隔)和cron的定时器(timer),替代了被标注过时的duration 属性。timer属性的使用示例: time...

2069
来自专栏java初学

unix网络编程——TCP套接字编程

  TCP客户端和服务端所需的基本套接字。服务器先启动,之后的某个时刻客户端启动并试图连接到服务器。之后客户端向服务器发送请求,服务器处理请求,并给客户端一个响...

391
来自专栏Albert陈凯

Hadoop数据分析平台实战——180Oozie工作流使用介绍离线数据分析平台实战——180Oozie工作流使用介绍

离线数据分析平台实战——180Oozie工作流使用介绍 Oozie工作流介绍 Oozie的四大组件服务分别是: workflow, coordinator, b...

3815
来自专栏JMCui

Netty 系列九(支持UDP协议).

1、无连接协议,没有持久化连接; 2、每个 UDP 数据报都是一个单独的传输单元; 3、一定的数据报丢失; 4、没有重传机制,也不管数据报是否可达; 5、速度比...

1164
来自专栏枕边书

初探PHP多进程

准备 我们都知道PHP是单进程执行的,PHP处理多并发主要是依赖服务器或PHP-FPM的多进程及它们进程的复用,但PHP实现多进程也意义重大,尤其是在后台Cli...

1998
来自专栏程序员宝库

单点登录系统实现

单点登录系统实现基于SpringBoot 今天的干货有点湿,里面夹杂着我的泪水。可能也只有代码才能让我暂时的平静。通过本章内容你将学到单点登录系统和传统登录系统...

71312
来自专栏坚毅的PHP

mc参数备忘&java-json备忘

mc参数(摘自 http://www.blogjava.net/jzone/articles/302991.html) 查看方法 telnet进去 或 ech...

3444
来自专栏java 成神之路

HTTP 方法

3788
来自专栏cnblogs

vue + socket.io实现一个简易聊天室

     vue + vuex + elementUi + socket.io实现一个简易的在线聊天室,提高自己在对vue系列在项目中应用的深度。因为学会一个库...

3818
来自专栏小古哥的博客园

PHP中的会话控制

了解HTTP(超文本传输协议)可以知道,它采用请求与响应的模式,最大的特点就是无连接无状态。 无连接:每次连接仅处理一个客户端的请求,得到服务器响应后,连接就结...

2583

扫码关注云+社区