代码：

 <body>

    <div id="app">

      {{message}}

    </div>

    <script type="text/javascript" src="../js/vue.js"></script>

    <script>

      var testVue = new Vue({

        el: "#app",

        data: {

          message: "this is a 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 创建完毕状态===============》');

          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>

在chrome运行：

beforeCreate

dom、data数据初始化之前

created

data数据初始化完成，dom没有初始化

beforeMount

dom初始化完成

mounted

data数据挂载到dom上

在浏览器中运行testVue.message="zhaobao";

在浏览器中运行testVue.$destroy();

参考地址：https://segmentfault.com/a/1190000008010666

vue系列之生命周期的更多相关文章

  1. Vue.js-07：第七章 - Vue 实例的生命周期

    一.前言  在之前的 Vue 学习中,我们在使用 Vue 时,都会创建一个 Vue 的实例,而每个 Vue 实例在被创建时都要经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 D ...

  2. 从零开始学 Web 之 Vue.js（三）Vue实例的生命周期

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  3. Vue js 的生命周期详解

    Vue 实例的生命周期 Vue 实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列 过程,我们称这是 Vue 的生命周期.通俗说就是 Vue ...

  4. Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖

    1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...

  5. vue组件的生命周期

    先来张组件生命周期的示意图: 文档里是这样描述的:你不需要立马弄明白所有的东西,不过以后它会有帮助.传送门. Vue2.0的生命周期钩子一共有10个,同样结合官方文档作出了下表 生命周期钩子 详细 b ...

  6. vue实例的生命周期

    Vue实例的生命周期也就是这个实例从出生到死亡的过程,所以我在文档原图上把这个周期大致分为创建过程 | 运行过程 | 销毁过程三个阶段,不同结果或又分为一些小的阶段 在第一个阶段,创建阶段,会完成Vu ...

  7. vue 项目实战 (生命周期钩子)

    开篇先来一张图 下图是官方展示的生命周期图 Vue实例的生命周期钩子函数(8个)        1. beforeCreate             刚 new了一个组件,无法访问到数据和真实的do ...

  8. vue学习之生命周期和钩子函数

    参考文章:Vue2.0 探索之路——生命周期和钩子函数的一些理解 抛出问题: 我们有时候会在几个钩子函数里做一些事情,那么什么时候做,该在哪个函数里做? 生命周期简介 结合代码看el 和 data以及 ...

  9. 浅析vue实例的生命周期（生命周期钩子）

    “每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等” ,在不同的生命周期内会经历不同的钩子函数(生命周期 ...

随机推荐

  1. random模块（十九）

    1 ).random() 返回0<=n<1之间的随机实数n: 2 ).choice(seq) 从序列seq中返回随机的元素: 3 ).getrandbits(n) 以长整型形式返回n个随机 ...

  2. poj 2785(折半枚举+二分搜索)

    传送门:Problem 2785 题意: 给定 n 行数,每行都有 4 个数A,B,C,D. 要从每列中各抽取出一个数,问使四个数的和为0的所有方案数. 相同数字不同位置当作不同数字对待. 题解: 如 ...

  3. 20145215《网络对抗》Exp3 免杀原理与实践

    20145215<网络对抗>Exp3 免杀原理与实践 基础问题回答 杀软是如何检测出恶意代码的? 基于特征来检测:恶意代码中一般会有一段有较明显特征的代码也就是特征码,如果杀毒软件检测到有 ...

  4. Scala进阶之路-Scala中的枚举用法案例展示

    Scala进阶之路-Scala中的枚举用法案例展示 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. Scala中的枚举值和Java中的枚举值有点差别,不过使用起来也都差大同小异,我这 ...

  5. IP基本原理

    IP基本原理 一.IP基本原理 IP是网络层协议,也是当今应用最广泛的网络协议之一 IP协议规定了数据的封装方式,网络节点的标识方法,用于网络上数据的端到端的传递. 1.IP及其相关协议 2.IP的主 ...

  6. springSession框架来实现sso单点登陆

    介绍一下springsession这个框架,其实springsession框架默认的是使用redis来实现单点登陆的,但是不支持redis集群,这个框架的特点是无侵入的实现单点登陆,就是说我们之前获取 ...

  7. minio上传大于30M文件失败

    minio上传30M文件失败.提示失败或者进度不动.翻查手册发现并未限速.原因是使用了nginx做代理.上传超过30M大的客户端文件无法正常上传,修改了下nginx的配置,就可以了. 加上client ...

  8. bzoj千题计划300：bzoj4823: [Cqoi2017]老C的方块

    http://www.lydsy.com/JudgeOnline/problem.php?id=4823 讨厌的形状就是四联通图 且左右各连一个方块 那么破坏所有满足条件的四联通就好了 按上图方式染色 ...

  9. C语言上机复习（一）文件操作

    C语言—文件操作 1.1 fgetc() + fputc(): 以 字符 形式存取数据定义文件指针 #define _CRT_SECURE_NO_WARNINGS #include <cstdi ...

  10. 10-SQL Server 2008 R2安装步骤

    一.  软件和环境 1.  软件 : SQL Server 2008 R2 企业版     软件下载地址:XXXX 2.  环境要求: .Net FrameWork 3.5 以上 (windows 7 ...