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

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. 谷歌浏览器的各个版本对应的webdriver（chromedrive）-超级详细

    简介 近来看到各个测试群里的小伙伴由于安装的谷歌浏览器版本各不相同,有高有低,这可是难住愁坏了一大批人,所以都在要各种版本的谷歌浏览器相对应的chromedrive,为此找了一个淘宝镜像网址供大家下载 ...

  2. springboot~基于单元测试的mongodb

    添加对应版本的包 testCompile('de.flapdoodle.embed:de.flapdoodle.embed.mongo:1.46.0') 在测试之前,它会根据你的操作系统去下载当前的m ...

  3. Entity Framework 查漏补缺 （一）

    明确EF建立的数据库和对象之间的关系 EF也是一种ORM技术框架, 将对象模型和关系型数据库的数据结构对应起来,开发人员不在利用sql去操作数据相关结构和数据.以下是EF建立的数据库和对象之间关系 关 ...

  4. Flink从入门到放弃(入门篇4) DataStreamAPI

    戳更多文章: 1-Flink入门 2-本地环境搭建&构建第一个Flink应用 3-DataSet API 4-DataSteam API 5-集群部署 6-分布式缓存 7-重启策略 8-Fli ...

  5. Asp.NetCore轻松学-实现一个轻量级高可复用的RabbitMQ客户端

    前言 本示例通过对服务订阅的封装.隐藏细节实现.统一配置.自动重连.异常处理等各个方面来打造一个简单易用的 RabbitMQ 工厂:本文适合适合有一定 RabbitMQ 使用经验的读者阅读,如果你还没 ...

  6. centos7 安装 smplayer

    How to setup multimedia on CentOS 7 You will need to also install the EPEL repository as nux-dextop ...

  7. SpringCloud系列——Bus 消息总线

    前言 SpringCloud Bus使用轻量级消息代理将分布式系统的节点连接起来.然后可以使用此代理广播状态更改(例如配置更改)或其他管理指令.本文结合RabbitMQ+GitHub的Webhook实 ...

  8. git push提交报错，提示文件过大，且去掉大文件也报同样的错误

    错误原因: 大文件存在没有被提交的commit记录里面: 解决方案: 删除有大文件的commit记录即可 移除大文件的正确姿势 $ git rm --cached giant_file(文件名) # ...

  9. 为什么使用 Redis 及其产品定位

    一:传统 MySQL+ Memcached 架构遇到的问题 实际 MySQL 是适合进行海量数据存储的,通过 Memcached 将热点数据加载到 cache,加速访问,很多公司都曾经使用过这样的架构 ...

  10. C# 以函数Action/Func/Task作为方法参数

    以Action.Func.Task作为方法参数,mark一下 以Action为参数 public void TestAction() { //Action参数 ExecuteFunction(() = ...