针对于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. 2018年多校第三场第一题 A. Ascending Rating hdu6319

    比赛地址:http://acm.hdu.edu.cn/contests/contest_show.php?cid=804 题目编号:第一题 A. Ascending Rating  hdu6319 题 ...

  2. WinCC OA基本概念

    WinCC OA 是一个模块化软件架构的系统.所需的功能由不同任务创建的特定单元处理.在WinCC OA中,这些单元称为管理器 - 管理器是软件自身的一些独立的处理过程. 图:WinCC OA系统由功 ...

  3. 第六章 对象-javaScript权威指南第六版

    什么是对象? 对象是一种复合值,每一个属性都是都是一个名/值对.原型式继承是javaScript的核心特征. 对象常见的用法有,create\set\query\delete\test\enumera ...

  4. BZOJ5316 : [Jsoi2018]绝地反击

    若$R=0$,那么显然答案为离原点最远的点到原点的距离. 否则若所有点都在原点,那么显然答案为$R$. 否则考虑二分答案$mid$,检查$mid$是否可行. 那么每个点根据对应圆交,可以覆盖圆上的一部 ...

  5. 常用的Tensor操作

    常用的Tensor操作 1.通过tensor.view方法可以调整tensor的形状,但必须保证调整去前后元素总数一致.view不会修改自身的数据,返回新的tensor与原tensor共享内存,即更改 ...

  6. python学习：字符串

    字符串 #字符串操作# 对应操作:# 1.重复输出字符串# print('hello'*2)# 2.[],[:]通过索引获取字符串中字符,这里和列表的切片操作是相同的,具体内容见列表#print('h ...

  7. react-quill 富文本编辑器 ---- 图片处理

    import React,{Component} from 'react'; import ReactQuill,{ Quill } from 'react-quill'; import 'react ...

  8. vs2013新建asp.net web 项目报错，此模板尝试加载组件程序集NuGet Package Manage

    打开vs2013,工具->扩展和更新->联机->找到NuGet Package Manager->安装->重新启动vs2013

  9. 【常用指令】git+服务器+数据库

    git日程操作 服务器常用操作 ①同步master git pull origin master ②创建分支 git checkout -b 分支名 ③常规操作 git diff git add 文件 ...

  10. 用Vue2仿京东省市区三级联动效果

    三级联动,随着越来越多的审美,出现了很多种,好多公司都仿着淘宝的三级联动 ,好看时尚,so我们公司也一样……为了贴代码方便,我把写在data里面省市区的json独立了出来,下载贴进去即可用,链接如下 ...