针对于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. ubuntu频繁出现　安装包依赖关系

    折腾了一下午,还差点重装一次,最后记下解决办法,引以为戒! 第一步,备份官方的默认源 避免自己手贱操作失误,重装系统太费时间 cp /etc/apt/sources.list /etc/apt/sou ...

  2. 短网址API

    http://tao.tf/open/ API简介 API允许第三方自由调用URL缩短,基于text/json/jsonp/js模式,支持post.get提交. 支持缩短网址: 淘宝网(*.taoba ...

  3. NOIP2000普及组 T1计算器的改良

    主要考字符串处理,把等式从等号中间断开,左边的区域为left,右边的区域为right. 开四个数组分别用来存储区域left和right中未知数的系数,区域left和right中的常数 先处理区域lef ...

  4. 编程菜鸟的日记-初学尝试编程-C++ Primer Plus 第6章编程练习9

    #include <iostream> #include <fstream> #include <cstdlib> #include <string> ...

  5. React修改state(非redux)中数组和对象里边的某一个属性的值

    在使用React时,会经常需要处理state里边设置的初始值以达到我们的实际需求,比如从接口获取到列表数据后要赋值给定义的列表初始值,然后数据驱动view视图进而呈现在我们眼前,这种最简单的赋值方式实 ...

  6. 自己封装element-ui树组件的过滤

    前言:vue开发项目时用到了element-ui的树组件,但是发现一执行过滤事件,树就全部都展开了,为了解决这个问题,只能自己先过滤数剧,再赋值给树组件的data,就避免了一上来全部展开的尴尬. 一. ...

  7. jsp页面的地址

    1. ${pageContext.request.contextPath}是JSP取得绝对路径的方法,等价于<%=request.getContextPath()%> . 也就是取出部署的 ...

  8. 深入分析volatile的实现原理

    synchronized是一个重量级的锁,虽然JVM对它做了很多优化,而下面介绍的volatile则是轻量级的synchronized.如果一个变量使用volatile,则它比使用synchroniz ...

  9. win7系统下dos界面无法自由调整大小

    刚开始在win7系统,在dos界面下做MySQL的实验,很多数据不能显示界面上,只能显示固定的大小,以为这是系统的原因,后来在网上查找了一些资料.终于发现可以自由调节dos界面大小的方法.下面给出截图 ...

  10. [Swift]LeetCode307. 区域和检索 - 数组可修改 | Range Sum Query - Mutable

    Given an integer array nums, find the sum of the elements between indices i and j (i ≤ j), inclusive ...