针对于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. 如何在电脑上配置两个tomcat

    问题 准备逐渐转向idea的怀抱了,每次部署项目时和eclipse使用的都是同一个tomcat,这是很大的隐患,并且非常的不方便,遂再配置一个tomcat 1.下载tomcat和配置系统变量 CATA ...

  2. 2019北航oo课程第二单元作业总结..#_#..

    学习了之前在写代码是从来没有见过的多线程之后,便迎来了此次电梯作业.说实话,这次作业做得十分的辛苦,虽然在前三次作业中领悟到了java面向对象的精髓,但是再加上了多线程之后,又开始理不清思路,对自己的 ...

  3. mpvue中使用wxParse，解析a标签跳转问题

    安装:npm i mpvue-wxparse js:import wxparse from "mpvue-wxparse"; css:@import url('~mpvue-wxp ...

  4. 【转】 web前端开发分享-目录

    http://www.cnblogs.com/jikey/p/3613082.html 1. web前端开发分享-css,js入门篇 2. web前端开发分享-css,js进阶篇 3. web前端开发 ...

  5. REM——适合移动开发的自适应方案

    文章目录 1.什么是REM 2.REM和EM的区别 3.手机端方案的特点 4.使用JS动态调整REM 5.REM与其他单位同时存在 1.什么是REM 先来认识几个常见单位: px:像素,这个大家都知道 ...

  6. kettle web化

    kettle web化 通过Java API调用kettle核心代码,并基于Spring Boot提供简易的Web管理界面. 背景 在工作中,通过kettle这款ETL产品进行数据处理时,是通过kit ...

  7. css实用属性

    background-size: 100% 100%;            背景通过拉伸实现填充 自适应 overflow: hidden;                              ...

  8. 配置 RIPv1 和 RIPv2

    拓扑图 场景您是公司的网络管理员.您所管理的小型网络中包含三台路由器,并规划了五个网络.您需要在网络中配置RIP路由协议来实现路由信息的相互传输.最初使用的是RIPv1,后来发现RIPv2更有优势,于 ...

  9. WPF:How to display a Bitmap on Image control

    一个Bitmap文件,叫做screenShotFile, 你可以这样显示到Image控件上. BitmapImage bi = new BitmapImage();            bi.Beg ...

  10. WinRAR存在严重的安全漏洞影响5亿用户

    WinRAR可能是目前全球用户最多的解压缩软件,近日安全团队发现并公布了WinRAR中存在长达19年的严重安全漏洞,这意味着有可能超过5亿用户面临安全风险. 该漏洞存在于所有WinRAR版本中包含的U ...