针对于Vue的生命周期进行详细的说明，方面加深对各个方法的引用。

引言：

　　前几天重新回顾vue官网时，看到vue的生命周期，想着自己用vue开发了快一年了，就总结总结vue知识，再次加深自己对vue的理解。

正文：

       首先上初始化代码（代码不完整，完整代码在下面的github里），然后在控制台打印并查看结果（console.group()表示该范围内是一个组，方便查看一组）
<!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">

    <h1>{{message}}</h1>

  </div>

</body>

<script>

  var vm = new Vue({

    el: '#app',

    data: {

      message: 'Vue'

    },

    beforeCreate: function() {

      console.group('------beforeCreate创建前状态------');

      console.log(this.$el);

      console.log(this.$data);

      console.log(this.message)

    },

    created: function() {

      console.group('------created创建完毕状态------');

      console.log(this.$el);

      console.log(this.$data);

      console.log(this.message);

    },

    beforeMount: function() {

      console.group('------beforeMount挂载前状态------');

      console.log(this.$el);

      console.log(this.$data);

      console.log(this.message);

    },

    mounted: function() {

      console.group('------mounted 挂载结束状态------');

      console.log(this.$el);

      console.log(this.$data);

      console.log(this.message);

    },

    beforeUpdate: function () {

      console.group('beforeUpdate 更新前状态===============》');

      console.log(this.$el);

      console.log(this.$data);

      console.log(this.message);

    },

    updated: function () {

      console.group('updated 更新完成状态===============》');

      console.log(this.$el);

      console.log(this.$data);

      console.log(this.message);

    },

    beforeDestroy: function () {

      console.group('beforeDestroy 销毁前状态===============》');

      console.log(this.$el);

      console.log(this.$data);

      console.log(this.message);

    },

    destroyed: function () {

      console.group('destroyed 销毁完成状态===============》');

      console.log(this.$el);

      console.log(this.$data);

      console.log(this.message)

    }

  })

</script>

</html>

　　结果显示如下：

　　

　　ps：因为没有更新数据和销毁数据，所以beforeUpdate，updated，beforeDestroy和destroyed等钩子函数没有触发，只打印出beforeCreate，created，beforeMount和mounted的钩子函数情况。

　　在vue生命周期图例中可知，可以分为以下几个步骤：

　　一 beforeCreate—created间的生命周期 

 
                           
 
　　这一步从图中可知：是初始化data和事件，注册和反映（这个翻译感觉不太对劲，说白了就是初始化）。
　　打印结果如下：
　　
　　通过代码结果可知：$el，$data以及message都为undefined，说明是处于初始化状态。 
 

　　二 created—beforeMount间的生命周期

 　　　　　　　　　　
　　
　　　　这一步，会进行两次判断：
　　　　* 判断对象是否有el选项。
　　　　　　如果有的话就继续向下编译，
　　　　　　如果没有el选项，则停止编译。也就意味着停止了生命周期，直到在该vue实例上再次调用vm.$mount(el)才会继续往下编译。
 　　　　　代码结果演示如下：
　　　　　　1 当$el不挂载到vue时（注释掉new Vue()里的el）
　　　　　　结果如下：
 
　　　　　　
 
　　　　　　通过以下代码可知：当$el不挂载到vue时，只会进行beforeCreated和created这两个钩子函数，不会进行beforeMounted和mounted钩子函数。
　　　　　　
　　　　　　2 当重新调用时（输入vm.$mount(el)）；
 
 　　　　　
　　　　　　　　
　　　　　　通过打印结果可知：在输入vm.$mount('#app')时，发现这四个钩子函数都实行了。可以推断，mount这一环节是保证$el已经挂载，且可以进行任何数据操作。
　　　　　　
　　　　** 判断el是否有template模板：
　　　　　　如果有的话直接通过渲染函数渲染出来。
　　　　　　如果没有的话，就直接调用$el的外部html进行渲染。
　　　　　ps：所谓的template的就是vm对象里的template属性的值，如果template没有值，则会调用外部的html。
　　　　以下demo实现，结论和打印结果：
　　　　  1 当有template时：
var vm = new Vue({

    el: '#app',

    template:'<h1 style="color:red">{{message}}</h1>',

    data: {

      message: 'Vue'

    }

  })

　　　　

　　　

　　　　2 当无template时：

<body>

  <div id="app">

    <h1>{{message}}</h1>

  </div>

</body>

　　　　

　　　　3 当两者存在时，会优先选择template渲染函数。

<body>

  <div id="app">

    <h1>{{message}}</h1>

  </div>

</body>

<script>

  var vm = new Vue({

    el: '#app',

    template:'<h1 style="color:red">{{message}}</h1>',

    data: {

      message: 'Vue'

    }

  })

</script>

　　　　

　　　　4 两者不存在时，则不渲染也不报错。

　　　　ps：另外，Vue对象中也有render函数，和template一样，render可以返回一个createElement参数，进行渲染。
<body>

  <div id="app">

    <h1>{{message}}</h1>

  </div>

</body>

<script>

  var vm = new Vue({

    el: '#app',

    template:'<h1 style="color:red">{{message}}</h1>',

    render: function (createElement, context) {

        return createElement('h1',`${this.message}1111`)

    },

    data: {

      message: 'Vue'

    },

  })

</script>

　　　　

　　　　通过演示可知：发现render比template优先级高一些。
　　　　　　　　　　　所以三个渲染的优先级是：render函数选项  > template参数  > 外部HTML

　　　　

　　三 beforeMount—mounted钩子函数的生命周期

　　　　　　　　　　

　　　　
　　　　这一步的生命周期在于虚拟dom树的渲染。
　　　　
　　　　

　　　　通过打印结果可知：

　　　　　　在beforeMounted钩子函数中，挂载了$el，但只拿到{{message}}，没有完成渲染，
　　　　　　而mounted钩子函数是已经完成了整个流程。
　　　　　　所以Vue生命周期图例的意思应该是：给vue实例挂载$el，并且挂载到虚拟dom元素上。（一开始没明白这一步，现在才恍然大悟）。

　　四 beforeUpdate—updated间的生命周期

　　　　　　　　　　

　　　　　　这一步是当vue的data数据发生改变，就会触发对应组件的重新渲染。然后依次触发beforeUpdate和update钩子函数。

　　　　ps：看到有位博主说到一个重点！这俩个钩子函数只能在已渲染到模板里的数据发生改变后才能触发，否则不触发。例子如下：
<body>

  <div id="app">

    <!-- <h1>{{message}}</h1> -->

  </div>

</body>

<script>

  var vm = new Vue({

    el: '#app',

    // template:'<h1 style="color:red">{{message}}</h1>',

    data: {

      message: 'Vue'

    },

    beforeUpdate: function () {

      console.group('beforeUpdate 更新前状态===============》');

      console.log(this.$el);

      console.log(this.$data);

      console.log(this.message);

    },

    updated: function () {

      console.group('updated 更新完成状态===============》');

      console.log(this.$el);

      console.log(this.$data);

      console.log(this.message);

    },

  })

  vm.message = 'aaaa';

</script>

　　结果可知：没有触发钩子函数。

　　

　　当把template的注释去掉，结果如下：触发了更新前后的钩子函数。

　　

　　　五 beforeDestroy—destroyed间的生命周期

　　　　　　　　

　　　　beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。
　　　　destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
　　　　实例如下：<script>
  var vm = new Vue({

    el: '#app',

    template:'<h1 style="color:red">{{message}}</h1>',

    data: {

      message: 'Vue'

    },

    beforeDestroy: function () {

      console.group('beforeDestroy 销毁前状态===============》');

      console.log(this.$el);

      console.log(this.$data);

      console.log(this.message);

    },

    destroyed: function () {

      console.group('destroyed 销毁完成状态===============》');

      console.log(this.$el);

      console.log(this.$data);

      console.log(this.message)

    }

  })

  vm.$destroy();

  vm.message='11111'

</script>

　　

　　ps：因为只有$destroy()方法，所以没法判断beforeDestroy和destroyed的区别

　　结果如下：发现销毁之后，再重新给message赋值，没效果。可见destroyed钩子函数在$destroy()方法实行后会销毁和当前实例有关的东西，不会再次对该实例进行操作。

结尾：

　　   

　　以上都是自己对vue的生命周期的理解，从一开始懵懂，到依次开发vue项目，回头再看这生命周期，就有一种“原来如此”的感觉，感到vue强大之处。

　　我是17号小白，我把完整代码放到gitHub里了，有需要实践的请前往clone。地址：https://github.com/sqh17/notes/blob/master/ways/vueLifecycle.html。

　　以上若有不对的地方，请大家能及时私信我或者下方评论，我们一起加油进步。

参考文献：

【Vue笔记】-- 详解vue生命周期的更多相关文章

  1. Vue 实例详解与生命周期

    Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...

  2. 05-Vue入门系列之Vue实例详解与生命周期

    Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...

  3. Vue入门系列（五）Vue实例详解与生命周期

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  4. Vue实例详解与生命周期

    http://www.jianshu.com/p/b5858f1e6e76 Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己 ...

  5. 【05】Vue 之 实例详解与生命周期

    Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...

  6. 【Vue】详解Vue生命周期

    Vue实例的生命周期全过程(图) (这里的红边圆角矩形内的都是对应的Vue实例的钩子函数) 在beforeCreate和created钩子函数间的生命周期 在beforeCreate和created之 ...

  7. maven详解之生命周期与插件

    Maven是一个优秀的项目管理工具,它能够帮你管理编译.报告.文档等. Maven的生命周期: maven的生命周期是抽象的,它本身并不做任何的工作.实际的工作都交由"插件"来完成 ...

  8. 【Vue】详解Vue组件系统

    Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...

  9. 自学vue笔记 (二) : 实例与生命周期

    一: 什么是实例 我们说了,Vue 应用都应该从构建一个 Vue 实例开始.它管理着挂载在它身上的所有内容,因此实例是一个根实例, 所有的组件都应该挂载在根实例上面.创建一个 Vue 实例,需要通过 ...

  10. 详解Vue.js 技术

    本文主要从8个章节详解vue技术揭秘,小编觉得挺有用的,分享给大家. 为了把 Vue.js 的源码讲明白,课程设计成由浅入深,分为核心.编译.扩展.生态四个方面去讲,并拆成了八个章节,如下: 准备工作 ...

随机推荐

  1. 组合 数论 莫比乌斯反演 hdu1695

    题解:https://blog.csdn.net/lixuepeng_001/article/details/50577932 题意:给定范围1-b和1-d求(i,j)=k的数对的数量 #includ ...

  2. 微信小程序 + nodeJs（loopback） 实现支付

    实现小程序的支付,首先需要去微信官网先了解一下微信小程序支付相关接口文档:https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter= ...

  3. DCDC设计指南1

    DC/DC电源设计指导:一 在设计电源模块的时候,第一时间要把该电源IC的datasheet资料下载好,查看里面的说明: 下面以一款DC/DC转换IC为例: 开始布局前先看下IC的特性说明,图1: 图 ...

  4. 对Jpa中Entity关系映射中mappedBy的理解

    mappedBy 单向关系不需要设置该属性,双向关系必须设置,避免双方都建立外键字段数据库中1对多的关系,关联关系总是被多方维护的即外键建在多方,我们在单方对象的@OneToMany(mappedby ...

  5. LeetCode 80 Remove Duplicates from Sorted Array II [Array/auto] <c++>

    LeetCode 80 Remove Duplicates from Sorted Array II [Array/auto] <c++> 给出排序好的一维数组,如果一个元素重复出现的次数 ...

  6. 《SpringMVC从入门到放肆》八、SpringMVC注解式开发（基本配置）

    上一篇我们结束了配置式开发,配置式开发目前在企业中用的并不是很多,大部分企业都在使用注解式开发,所以今天我们就来学习注解式开发.所谓SpringMVC注解式开发是指,处理器是基于注解的类的开发方式.对 ...

  7. 数据安全存放，全民搭建kodexplorer私有云存储

    数据安全存放可以说越来的重要,新闻上也经常报道出关于个人信息泄露的事件,不仅泄露,还有一些进行个人隐私买卖,之前报道出facebook便是如此.数字信息存放好比存钱一样,存在别人那里总会不放心.不如自 ...

  8. 自行搭建私有云kodexplorer

    kodexplorer是一款开源的私有云框架,可以通过它实现个人网盘的功能,如果拥有一个性能不错的VPS,那么就可以摆脱奇慢无比的百度云等网盘啦!最近百度网盘还发出申明,说要限制使用空间.用别人的东西 ...

  9. hy这个破项目

    最近部署hy记事 这段时间摊上了个挺恶心的项目,叫什么hy鞋同平台..前后左右整的人挺难受的.学到的东西特别少,而且比较浪费时间.不过,还是总结一下吧,好歹花了这么久的时间了 Doc管理xi tong ...

  10. django+javascrpt+python实现私有云盘代码

    丁丁:由于篇幅有限,这里暂时只展示python后端代码,前端js代码后面上传,有需要的也可以留言私信我. 1.view.py 使用用户.部门.公司等相关账号的创建,已经个人,部门账号的冻结,删除,相关 ...