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

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. mysql的学习笔记(八)

    1.存储引擎(表类型) mysql将数据以不同的技术存储在文件(内存)中,这种技术称为存储引擎.每一种存储引擎使用不同的存储机制,索引技巧,锁定水平,提供广泛且不同的功能. mysql支持的存储引擎 ...

  2. 基于mapreduce实现图的三角形计数

    源代码放在我的github上,想细致了解的可以访问:TriangleCount on github 一.实验要求 1.1 实验背景         图的三角形计数问题是一个基本的图计算问题,是很多复杂 ...

  3. 2018~第三届南宁市网络安全技术大赛~nnctf~write-up

    Web 1.超简单 分值:100 类型:WEB 已解决 题目:超简单的web题  http://gxnnctf.gxsosec.cn:12311/ 代码审计 <?php $white_list ...

  4. 把项目中那些恶心的无处存储的大块数据都丢到FastDFS之快速搭建

        在我们开发项目的时候,经常会遇到大块数据的问题(2M-100M),比如说保存报表中1w个人的ID号,他就像一个肿瘤一样,存储在服务器哪里都 觉得恶心,放在redis,mongodb中吧,一下子 ...

  5. GoLang simple-project-demo-01

    Hello world 经典例子: package main import "fmt" func main(){ fmt.Println("hello world&quo ...

  6. Springboot 系列（九）使用 Spring JDBC 和 Druid 数据源监控

    前言 作为一名 Java 开发者,相信对 JDBC(Java Data Base Connectivity)是不会陌生的,JDBC作为 Java 基础内容,它提供了一种基准,据此可以构建更高级的工具和 ...

  7. TensorFlow实现XOR

    TensorFlow基础 1.概念 TF使用图表示计算任务,图包括数据(Data).流(Flow).图(Graph) 图中节点称为op,一个op获得多个Tensor Tensor为张量,TF中用到的数 ...

  8. mysql判断条件不存在插入存在更新某字段

    insert into mst_sequence(seq_type, seq_desc, seq_date, seq_no, create_time) VALUES('CK', 'XXX', NOW( ...

  9. 【设计模式】适配器模式 Adapter Pattern

    适配器模式在软件开发界使用及其广泛,在工业界,现实中也是屡见不鲜.比如手机充电器,笔记本充电器,广播接收器,电视接收器等等.都是适配器. 适配器主要作用是让本来不兼容的两个事物兼容和谐的一起工作.比如 ...

  10. 瓦片切图工具gdal2tiles.py改写为纯c++版本

    gdal2tiles.py是GDAL库中用于生成TMS瓦片的python代码,支持谷歌墨卡托EPSG:3857与经纬度EPSG:4326两种瓦片,输出png格式图像. gdal2tiles.py Mo ...