这篇博客将会从下面四个常见的应用诠释组件的生命周期，以及各个生命周期应该干什么事

  1. 单组件的生命周期

  2. 父子组件的生命周期

  3. 兄弟组件的生命周期

  4. 宏mixin的生命周期

生命周期：Vue 实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期，各个阶段有相对应的事件钩子

1. 生命周期钩子函数

下面这张图是vue生命周期各个阶段的执行情况：

注意：

  1. created阶段的ajax请求与mounted请求的区别：前者页面视图未出现，如果请求信息过多，页面会长时间处于白屏状态

  2. mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染

完毕，可以用 vm.$nextTick

vue2.0之后主动调用$destroy()不会移除dom节点，作者不推荐直接destroy这种做法，如果实在需要这样用可以在这个生命周期钩子中手动移除dom节点

2. 单个组件的生命周期

现根据实际代码执行情况分析：

  1. <template>
  2.  
  3.     <div>
  4.  
  5.         <h3>单组件</h3>
  6.  
  7.         <el-button @click="dataVar += 1">更新 {{dataVar}}</el-button>
  8.  
  9.         <el-button @click="handleDestroy">销毁</el-button>
  10.  
  11.     </div>
  12.  
  13. </template>
  14.  
  15. export default {
  16.  
  17.     data() {
  18.  
  19.         return {
  20.  
  21.             dataVar: 1
  22.  
  23.         }
  24.  
  25.     },
  26.  
  27.     beforeCreate() {
  28.  
  29.         this.compName = 'single'
  30.  
  31.         console.log(`--${this.compName}--beforeCreate`)
  32.  
  33.     },
  34.  
  35.     created() {
  36.  
  37.         console.log(`--${this.compName}--created`)
  38.  
  39.     },
  40.  
  41.     beforeMount() {
  42.  
  43.         console.log(`--${this.compName}--beforeMount`)
  44.  
  45.     },
  46.  
  47.     mounted() {
  48.  
  49.         console.log(`--${this.compName}--mounted`)
  50.  
  51.     },
  52.  
  53.     beforeUpdate() {
  54.  
  55.         console.log(`--${this.compName}--beforeUpdate`)
  56.  
  57.     },
  58.  
  59.     updated() {
  60.  
  61.         console.log(`--${this.compName}--updated`)
  62.  
  63.     },
  64.  
  65.     beforeDestroy() {
  66.  
  67.         console.log(`--${this.compName}--beforeDestroy`)
  68.  
  69.     },
  70.  
  71.     destroyed() {
  72.  
  73.         console.log(`--${this.compName}--destroyed`)
  74.  
  75.     },
  76.  
  77.     methods: {
  78.  
  79.         handleDestroy() {
  80.  
  81.             this.$destroy()
  82.  
  83.         }
  84.  
  85.     }
  86.  
  87. }

初始化组件时，打印：

当data中的值变化时，打印：

当组件销毁时，打印：

从打印结果可以看出:

  1. 初始化组件时，仅执行了beforeCreate/Created/beforeMount/mounted四个钩子函数

  2. 当改变data中定义的变量（响应式变量）时，会执行beforeUpdate/updated钩子函数

  3. 当切换组件（当前组件未缓存）时，会执行beforeDestory/destroyed钩子函数

  4. 初始化和销毁时的生命钩子函数均只会执行一次，beforeUpdate/updated可多次执行

3. 父子组件的生命周期

将单组件作为基础组件（由于props在beforeCreate()中未初始化），需要做如下更改：

  1. props: {
  2.  
  3.     compName: {
  4.  
  5.         type: String,
  6.  
  7.         default: 'single'
  8.  
  9.     }
  10.  
  11. },
  12.  
  13. beforeCreate() {
  14.  
  15.     // this.compName = 'single'
  16.  
  17.     // console.log(`--${this.compName}--beforeCreate`)
  18.  
  19.     console.log(` --data未初始化--beforeCreate`)
  20.  
  21. },

父组件代码如下：

  1. <template>
  2.  
  3.     <div class="complex">
  4.  
  5.         <h3>复杂组件</h3>
  6.  
  7.         <lifecycle-single compName="child"></lifecycle-single>
  8.  
  9.     </div>
  10.  
  11. </template>
  12.  
  13. const COMPONENT_NAME = 'complex'
  14.  
  15. import LifecycleSingle from './LifeCycleSingle'
  16.  
  17. export default {
  18.  
  19.     beforeCreate() {
  20.  
  21.         console.log(`--${COMPONENT_NAME}--beforeCreate`)
  22.  
  23.     },
  24.  
  25.     created() {
  26.  
  27.         console.log(`--${COMPONENT_NAME}--created`)
  28.  
  29.     },
  30.  
  31.     beforeMount() {
  32.  
  33.         console.log(`--${COMPONENT_NAME}--beforeMount`)
  34.  
  35.     },
  36.  
  37.     mounted() {
  38.  
  39.         console.log(`--${COMPONENT_NAME}--mounted`)
  40.  
  41.     },
  42.  
  43.     beforeUpdate() {
  44.  
  45.         console.log(`--${COMPONENT_NAME}--beforeUpdate`)
  46.  
  47.     },
  48.  
  49.     updated() {
  50.  
  51.         console.log(`--${COMPONENT_NAME}--updated`)
  52.  
  53.     },
  54.  
  55.     beforeDestroy() {
  56.  
  57.         console.log(`--${COMPONENT_NAME}--beforeDestroy`)
  58.  
  59.     },
  60.  
  61.     destroyed() {
  62.  
  63.         console.log(`--${COMPONENT_NAME}--destroyed`)
  64.  
  65.     },
  66.  
  67.     components: {
  68.  
  69.         LifecycleSingle
  70.  
  71.     }
  72.  
  73. }

初始化组件时，打印：

当子组件data中的值变化时，打印：

当父组件data中的值变化时，打印：

当props改变时，打印：

当子组件销毁时，打印：

当父组件销毁时，打印：

从打印结果可以看出:

  1. 仅当子组件完成挂载后，父组件才会挂载

  2. 当子组件完成挂载后，父组件会主动执行一次beforeUpdate/updated钩子函数（仅首次）

  3. 父子组件在data变化中是分别监控的，但是在更新props中的数据是关联的（可实践）

  4. 销毁父组件时，先将子组件销毁后才会销毁父组件

4. 兄弟组件的生命周期

在上面的基础上，复杂组件做如下更改

  1. <template>
  2.  
  3.     <div class="complex">
  4.  
  5.         <h3>复杂组件</h3>
  6.  
  7.         <lifecycle-single compName="cihld1"></lifecycle-single>
  8.  
  9.         <lifecycle-single compName="child2"></lifecycle-single>
  10.  
  11.         <el-button @click="dataVar += 1">complex更新 {{dataVar}}</el-button>
  12.  
  13.         <el-button @click="handleDestroy">complex销毁</el-button>
  14.  
  15.     </div>
  16.  
  17. </template>

初始化组件时，打印：

当child1更新和销毁时，打印：

当child2更新和销毁时，打印：

当父组件销毁时，打印

从打印结果可以看出:

  1. 组件的初始化（mounted之前）分开进行，挂载是从上到下依次进行

  2. 当没有数据关联时，兄弟组件之间的更新和销毁是互不关联的

5. 宏mixin的生命周期

在上面的基础上，添加一个mixin.js文件，内容如下：

  1. const COMPONENT_NAME = 'lifecycleMixin'
  2.  
  3. export default {
  4.  
  5.     name: COMPONENT_NAME,
  6.  
  7.     beforeCreate() {
  8.  
  9.         console.log(`--${COMPONENT_NAME}--beforeCreate`)
  10.  
  11.     },
  12.  
  13.     created() {
  14.  
  15.         console.log(`--${COMPONENT_NAME}--created`)
  16.  
  17.     },
  18.  
  19.     beforeMount() {
  20.  
  21.         console.log(`--${COMPONENT_NAME}--beforeMount`)
  22.  
  23.     },
  24.  
  25.     mounted() {
  26.  
  27.         console.log(`--${COMPONENT_NAME}--mounted`)
  28.  
  29.     },
  30.  
  31.     beforeUpdate() {
  32.  
  33.         console.log(`--${COMPONENT_NAME}--beforeUpdate`)
  34.  
  35.     },
  36.  
  37.     updated() {
  38.  
  39.         console.log(`--${COMPONENT_NAME}--updated`)
  40.  
  41.     },
  42.  
  43.     beforeDestroy() {
  44.  
  45.         console.log(`--${COMPONENT_NAME}--beforeDestroy`)
  46.  
  47.     },
  48.  
  49.     destroyed() {
  50.  
  51.         console.log(`--${COMPONENT_NAME}--destroyed`)
  52.  
  53.     }
  54.  
  55. }

同样的，复杂组件做如下更改：

  1. import lifecycleMixin from './mixin'
  2.  
  3. export default {
  4.  
  5.     mixins: [lifecycleMixin],
  6.  
  7.     // ...
  8.  
  9. }

组件初始化时，打印：

组件销毁时，打印：

从打印结果可以看出:

mixin中的生命周期与引入该组件的生命周期是仅仅关联的，且mixin的生命周期优先执行

参考：

  1. vue官网教程

  2. vue官网API

  3. Vue2.0生命周期（组件钩子函数与路由守卫）

Vue生命周期整理的更多相关文章

  1. Vue ---- 项目与环境搭建 初始项目结构 Vue生命周期

    目录 1. vue环境搭建 2. Vue项目搭建 pycharm配置并启动vue项目 3 . 认识项目 1. vue项目目录结构 2. 配置文件:vue.config.js 3. main.js 4. ...

  2. vue生命周期的介绍

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. vue 生命周期

    一 vue的生命周期如下图所示(很清晰) 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <h ...

  4. 详解vue生命周期

    vue生命周期 @(vue)[生命周期] 前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周 ...

  5. 关于vue生命周期

    官网给出的实例的生命周期图如下: beforeCreate(页面创建前),created(页面创建后),beforeMount(页面载入前),mounted(页面载入后),beforeUpdate(页 ...

  6. vue生命周期的理解

    我从官网上下载了一张vue生命周期的图,接下来实际分析一波vue到底执行了什么东西. 1.我们在使用vue时必不可少的操作就是 var vm = new Vue({}),这样我们就创建了一个vue的实 ...

  7. Vue生命周期，面试常见问题

    一.对于MVVM的理解? MVVM 是 Model-View-ViewModel 的缩写.Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑.View 代表UI 组件,它负责将数 ...

  8. 【Vue笔记】-- 详解vue生命周期

    针对于Vue的生命周期进行详细的说明,方面加深对各个方法的引用. 引言: 前几天重新回顾vue官网时,看到vue的生命周期,想着自己用vue开发了快一年了,就总结总结vue知识,再次加深自己对vue的 ...

  9. 面试题之（vue生命周期）

    在面试的时候,vue生命周期被考察的很频繁. 什么是vue生命周期呢? Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这 ...

随机推荐

  1. vector妙用轻松水过平衡树？？？

    极短代码预警 今天听身边的神仙说,可以用vector来写平衡树,代码极短. 然后去网上搜了一下,看到了attack dalao的这篇文章. 蒟蒻表示ssfd 赶紧膜拜了一波,并发表了一篇博客表示纪念. ...

  2. nowcoder(牛客网)OI测试赛3 解题报告

    昨天因为胡搞了一会儿社团的事情,所以错过(逃过)了nowcoder的测试赛..... 以上,听说还是普及组难度qwq,而且还有很多大佬AK(然而我这么蒻肯定还是觉得有点难度的吧qwq) 不过我还是日常 ...

  3. Python编程中 re正则表达式模块 介绍与使用教程

    Python编程中 re正则表达式模块 介绍与使用教程 一.前言: 这篇文章是因为昨天写了一篇 shell script 的文章,在文章中俺大量调用多媒体素材与网址引用.这样就会有一个问题就是:随着俺 ...

  4. Jupyter Notebook远程服务器配置[转]

    首先要生成密码,打开python终端. In [1]: from IPython.lib import passwd In [2]: passwd() Enter password: Verify p ...

  5. Python多继承的C3算法

    C3算法 一.知识点补充: 拓扑排序:在图论中,拓扑排序(Topological Sorting) 是一个 有向无环图(DAG,Directed Acyclic Graph) 的所有顶点的线性序列.且 ...

  6. Docker部署常见问题

    一.删除容器和镜像 在删除镜像之前要先用 docker rm 删掉依赖于这个镜像的所有容器(哪怕是已经停止的容器),否则无法删除该镜像. 停止容器 # docker stop $(docker ps ...

  7. 游戏1：HTML5制作网页游戏围住神经猫--createjs

    游戏简介:点击小圆圈,是蓝色的小圆圈不跑出圆圈外,跑出则结束游戏 准备工作: 下载easejs  :下载地址:http://www.createjs.cc/easeljs    中文网站 效果: in ...

  8. python lambda匿名函数 用法

    语法 lambda argument_list: expression argument_list是参数列表 expression是一个关于参数的表达式.表达式中出现的参数需要在argument_li ...

  9. python3 md5

    参考: https://docs.python.org/3/library/hashlib.html?highlight=hashlib#credits https://blog.csdn.net/w ...

  10. linux 内存介绍

    linux用free -m 查看linux内存使用情况 具体参数如下: Mem:内存的使用情况总览表. totel:机器总的物理内存 单位为:M used:用掉的内存. free:空闲的物理内存. 物 ...