官网给出的实例的生命周期图如下：

beforeCreate（页面创建前）,
created（页面创建后）,
beforeMount(页面载入前),
mounted（页面载入后）,
beforeUpdate（页面更新前）,
updated（页面更新后）,
beforeDestroy（页面销毁前）,
destroyed（页面销毁后）

调试代码：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>vue生命周期学习</title>

  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>

</head>

<body>

  <div id="app">

    <!--html中修改的-->

    <h1>{{message + '这是在outer HTML中的'}}</h1>

  </div>

</body>

<script>

  var vm = new Vue({

    el: '#app',

    template: "<h1>{{message +'这是在template中的'}}</h1>", //在vue配置项中修改的

    data: {

      message: 'Vue的生命周期'

    },

    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>

</html>

调试结果如下：

由上图清晰可见：

beforeMount(页面载入前),展示的仅为定义的变量
mounted（页面载入后）,方可展示真正的数据

关于vue生命周期的更多相关文章

  1. vue生命周期的介绍

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. vue 生命周期

    一 vue的生命周期如下图所示(很清晰) 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <h ...

  3. 详解vue生命周期

    vue生命周期 @(vue)[生命周期] 前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周 ...

  4. vue生命周期的理解

    我从官网上下载了一张vue生命周期的图,接下来实际分析一波vue到底执行了什么东西. 1.我们在使用vue时必不可少的操作就是 var vm = new Vue({}),这样我们就创建了一个vue的实 ...

  5. Vue生命周期，面试常见问题

    一.对于MVVM的理解? MVVM 是 Model-View-ViewModel 的缩写.Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑.View 代表UI 组件,它负责将数 ...

  6. 【Vue笔记】-- 详解vue生命周期

    针对于Vue的生命周期进行详细的说明,方面加深对各个方法的引用. 引言: 前几天重新回顾vue官网时,看到vue的生命周期,想着自己用vue开发了快一年了,就总结总结vue知识,再次加深自己对vue的 ...

  7. 面试题之（vue生命周期）

    在面试的时候,vue生命周期被考察的很频繁. 什么是vue生命周期呢? Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这 ...

  8. [转] Vue生命周期

    Vue生命周期 这是Vue文档里关于实例生命周期的解释图 那么下面我们来进行测试一下 <section id="app-8"> {{data}} </sectio ...

  9. vue生命周期、钩子函数

    https://segmentfault.com/a/1190000011381906    详解生命周期和钩子函数 每个vue实例再被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期 ...

随机推荐

  1. .NetCore 使用Cookie

    1.首先我们在Startup下面的ConfigureServices中注册授权认证服务以及AddCookie services.AddAuthentication(CookieAuthenticati ...

  2. Java进阶篇设计模式之三 ----- 建造者模式和原型模式

    前言 在上一篇中我们学习了工厂模式,介绍了简单工厂模式.工厂方法和抽象工厂模式.本篇则介绍设计模式中属于创建型模式的建造者模式和原型模式. 建造者模式 简介 建造者模式是属于创建型模式.建造者模式使用 ...

  3. JSP 状态管理 -- Session 和 Cookie

    Http 协议的无状态性 无状态是指,当浏览器发送请求给服务器的时候,服务器响应客户端请求.但是同一个浏览器再次发送请求给服务器的时候,服务器并不知道它就是刚才那个浏览器 session sessio ...

  4. Spring Boot 2.x基础教程：工程结构推荐

    Spring Boot框架本身并没有对工程结构有特别的要求,但是按照最佳实践的工程结构可以帮助我们减少可能会遇见的坑,尤其是Spring包扫描机制的存在,如果您使用最佳实践的工程结构,可以免去不少特殊 ...

  5. 《C#并发编程经典实例》学习笔记—2.6 任务完成时的处理

    问题 正在 await 一批任务,希望在每个任务完成时对它做一些处理.另外,希望在任务一完成就立即进行处理,而不需要等待其他任务. 问题的重点在于希望任务完成之后立即进行处理,而不去等待其他任务. 这 ...

  6. 从0开始用U盘制作启动盘装Windows10系统(联想R720笔记本)并永久激活方法

    一,制作U盘启动盘 随着个人电脑的“飞入寻常百姓家”,喜欢DIY电脑的发烧友们也越来越多. 安装系统是DIY最基本的要求,很容易做到: 那么如果要求用U盘装系统呢,你可能会说简单,直接下载个老毛桃或是 ...

  7. SpringCloud-sleuth-zipkin链路追踪

    什么是Zipkin? 它是一个分布式链路跟踪系统它可以帮助收集时间数据,每个应用程序向Zipkin报告定时数据,Zipkin UI呈现了一个依赖图表来展示多少跟踪请求经过了每个应用程序:如果想解决延迟 ...

  8. Poj1477

    Box of Bricks Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 24101   Accepted: 9378 De ...

  9. Springboot2注解使用Mybatis动态SQL

    1.简单SQL使用 //从***数据表获取统计数据 @Select("select count(*) from issues where issue_type = #{type}" ...

  10. 20190423-Vscode与Sass不得不说的秘密(>^ω^<)

    这是乱七八糟的前言:emmm,今天倔强的点,是关于Vscode使用easySass插件时,不安装ruby环境,直接使用插件编译时,不进行设置,分音是会转译为Css文件的= =,神坑的后知后觉才发现是因 ...