针对于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. mysql爱之深探测

    第一:函数 一:内置函数 MYSQL中提供了很多内置的函数,以下: CHAR_LENGTH(str) 返回值为字符串str 的长度,长度的单位为字符.一个多字节字符算作一个单字符. 对于一个包含五个二 ...

  2. Servlet 上传下载文件

    上传文件 1)在表单中使用表单元素 <input type=“file” />,浏览器在解析表单时,会自动生成一个输入框和一个按钮 2)表单需要上传文件时,需指定表单 enctype 的值 ...

  3. Python爬虫（2）：urllib库

    爬虫常用库urllib 注:运行环境为PyCharm urllib是Python3内置的HTTP请求库 urllib.request:请求模块 urllib.error:异常处理模块 urllib.p ...

  4. RHEL7 配置网络yum源

    redhat系统安装好尽管默认带有yum,但是redhat的更新包只对注册用户有效(收费).所以需要更换yum源. 基本的流程就是: 1.删除redhat7.0系统自带的yum软件包: 2.自行下载所 ...

  5. Vue 学习笔记 — css属性计算的问题

    简书 今天在使用Vue时遇到一个问题:在切换css内联属性时某些特殊属性的计算会有问题,无法得到预期的结果. 例子: https://jsfiddle.net/blqw/cLwau40z/ 上面的页面 ...

  6. 值得收藏！！javascript数组中多条对象去重方式，很实用！！！

    在数组中都是数字的时候很好去重,例如:var  arr=[1,2,2,2,3,4,5,4,5,3,6]:可以用两层for循环或者其他方式进行去重 我在这里也给出一个方法吧: Array.prototy ...

  7. HTML5调用手机摄像机、相册功能 <input>方法

    最近用MUI框架做webapp项目,在有PLUS环境的基础上能直接调用手机底层的API来使用拍照或从相册选择上传功能! 在查资料的时候,想起了另一种用input调用摄像和相册功能的方法,之前没有深入了 ...

  8. 基于Java的HashMap和HashSet实现

    一.Map接口类: import java.util.Iterator; public interface IMap<K, V> { /* 清除所有键值对 */ void clear(); ...

  9. 【DFS】数独游戏

    DFS(深度优先搜索): 深度优先搜索算法(英语:Depth-First-Search,简称DFS)是一种用于遍历或搜索树或图的算法. 沿着树的深度遍历树的节点,尽可能深的搜索树的分支.当节点v的所在 ...

  10. Java实现桶排序和基数排序

    桶排序代码: import java.util.Arrays; /** * 桶排序 * 工作的原理是将数组分到有限数量的桶里 * 每个桶再分别排序(有可能再使用别的排序算法或是以递归方式继续使用桶排序 ...