Vue入门实战教程（七）—— 生命周期概述

最新推荐文章于 2020-06-04 11:25:42 发布

厚嘴猴

最新推荐文章于 2020-06-04 11:25:42 发布

阅读量187

点赞数

分类专栏： vue学习文章标签： vue vue.js

本文链接：https://blog.csdn.net/jcyka/article/details/106123643

版权

vue学习专栏收录该内容

16 篇文章 1 订阅

订阅专栏

此学习教程是对官方教程的解析，

本章节主要涉及到的官方教程地址：

生命周期图示 — Vue.js

上一章：Vue入门实战教程（六）—— 组件基础

参考文档：
vue 生命周期深入
 详解vue生命周期

生命周期

生命周期阶段

生命周期主要分为创建、挂载、更新、销毁四个阶段，每个阶段分为前和后两个钩子:
创建阶段: beforeCreate，created
挂载阶段: beforeMount，mounted
更新阶段: beforeUpdate，updated
销毁阶段: beforeDestroy，destroyed

生命周期钩子列表

生命周期钩子	组件状态	新增可访问	最佳实践
【初始化Vue实例时调用，仅且执行一次】
beforeCreate	已初始化事件和生命周期，this指向创建的实例	this.$root、this.$parent、this.options等	常用于初始化非响应式变量
created	已将数据、方法等注入并校验实例创建完成，未挂载到DOM	data、computed、watch、methods中的数据和方法	常用于简单的ajax请求，页面的初始化
beforeMount	已将template编译成render函数虚拟DOM初次渲染(使用render函数)并将实例挂载到DOM之前	this.$options.render(编译好的render函数)、this.$el（未渲染的dom元素）	–
虚拟DOM初次渲染(使用render函数)并将实例挂载到DOM 若有非异步子组件，此时初始化非异步子组件，会调用子组件的beforeCreate, created, beforeMount, mounted生命周期钩子
mounted	虚拟DOM初次渲染(使用render函数)并将实例挂载到DOM之后调用，此时可以通过DOM API获取到DOM节点	this.$el（已渲染的dom元素）、 this.$refs(DOM 元素或子组件实例的引用对象）、this.$childrens(非异步子组件数组）	常用于获取VNode信息和操作，ajax请求
【以下情况调用，可执行多次】 1.在created, beforeMount生命周期钩子中异步方式更改响应式变量时 2.不在created, beforeMount生命周期钩子中更改响应式变量时 3.若有异步子组件，则在异步子组件初始化、渲染、挂载前后
beforeUpdate	响应式数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前	-	适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器
虚拟 DOM 重新渲染和打补丁若有子组件 1.更改父组件的data值，则仅父组件执行beforeUpdate, updated 2.更改子组件的data或props的值，则仅子组件执行beforeUpdate, updated 3.若子组件是异步子组件，则此时初始化异步子组件，会调用子组件的beforeCreate, created, beforeMount, mounted生命周期钩子
updated	虚拟 DOM 重新渲染和打补丁之后调用，组件DOM已经更新，可执行依赖于DOM的操作	-	避免在这个钩子函数中操作数据，可能陷入死循环
【销毁组件时调用（一般在切换未缓存的组件时），仅且执行一次】
beforeDestroy	实例销毁之前调用。这一步，实例仍然完全可用，this仍能获取到实例	-	常用于销毁定时器、解绑全局事件、销毁插件对象等操作
若有子组件，则此时销毁子组件, 子组件执行beforeDestroy, destroyed
destroyed	所有子实例和事件监听器已移除实例已解绑定并销毁	-	-

例子：

<!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("%c%s", "color:red" , "this     : " + this); 
	  console.log("%c%s", "color:red" , "options     : " + this.$options);  
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message); 
	  console.log("%c%s", "color:red","el     : " + this.$el);
    },
    created: function() {
      console.group('------created创建完毕状态------');
	  console.log("%c%s", "color:red" , "this     : " + this); 
	  console.log("%c%s", "color:red" , "options     : " + this.$options);  
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message); 
	  console.log("%c%s", "color:red","el     : " + this.$el);
    },
    beforeMount: function() {	
      console.group('------beforeMount挂载前状态------');
	  console.log("%c%s", "color:red" , "this     : " + this); 
	  console.log("%c%s", "color:red" , "options     : " + this.$options);  
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message); 
	  console.log("%c%s", "color:red","el     : " + this.$el);
	  console.log(this.$el);
    },
    mounted: function() {
      console.group('------mounted 挂载结束状态------');
      console.log("%c%s", "color:red" , "this     : " + this); 
	  console.log("%c%s", "color:red" , "options     : " + this.$options);  
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message); 
	  console.log("%c%s", "color:red","el     : " + this.$el);
	  console.log(this.$el); 
    },
    beforeUpdate: function () {
      console.group('beforeUpdate 更新前状态===============》');
      console.log("%c%s", "color:red" , "this     : " + this); 
	  console.log("%c%s", "color:red" , "options     : " + this.$options);  
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message); 
	  console.log("%c%s", "color:red","el     : " + this.$el);
	  console.log(this.$el); 
    },
    updated: function () {
      console.group('updated 更新完成状态===============》');
      console.log("%c%s", "color:red" , "this     : " + this); 
	  console.log("%c%s", "color:red" , "options     : " + this.$options);  
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message); 
	  console.log("%c%s", "color:red","el     : " + this.$el);
	  console.log(this.$el);
    },
    beforeDestroy: function () {
      console.group('beforeDestroy 销毁前状态===============》');
      console.log("%c%s", "color:red" , "this     : " + this); 
	  console.log("%c%s", "color:red" , "options     : " + this.$options);  
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message); 
	  console.log("%c%s", "color:red","el     : " + this.$el);
	  console.log(this.$el); 
    },
    destroyed: function () {
      console.group('destroyed 销毁完成状态===============》');
      console.log("%c%s", "color:red" , "this     : " + this); 
	  console.log("%c%s", "color:red" , "options     : " + this.$options);  
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message); 
	  console.log("%c%s", "color:red","el     : " + this.$el);
	  console.log(this.$el);
    }
  })
</script>
</html>

运行结果：
在这里插入图片描述
更新和销毁后运行结果：

通过上面例子的调试和运行结果，可以罗列以下数据和结论:

生命周期钩子	this	this.$options	this.$data	this.message	this.$el	结论
beforeCreate	object	object	undefined	undefined	undefined	可获取this和$options
created	object	object	object	Vue的生命周期	undefined	可获取数据，不可获取dom
beforeMount	object	object	object	Vue的生命周期	`<div id="app"><h1>{{message}}</h1></div>`	可获取dom, 但未渲染
mounted	object	object	object	Vue的生命周期	`<div id="app"><h1>Vue的生命周期</h1></div>`	可获取dom,且已渲染
beforeUpdate	object	object	object	Vue的生命周期	`<div id="app"><h1>Vue的生命周期</h1></div>`	未重新渲染
updated	object	object	object	abc	`<div id="app"><h1>abc</h1></div>`	已重新渲染
beforeDestroy	object	object	object	abc	`<div id="app"><h1>abc</h1></div>`	能访问所有
destroyed	object	object	object	abc	`<div id="app"><h1>abc</h1></div>`	能访问所有

本章节教程结束。

全部教程地址：Vue入门实战教程 | 寒于水学习网

vue生命周期实战系列：

vue生命周期实战（一）—— 实例创建

vue生命周期实战（二）——实例挂载

vue生命周期实战（三）—— 实例更新并深刻理解nextTick、watch和生命周期的关系

vue生命周期实战（四）——实例销毁

厚嘴猴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门实战教程（七）—— 生命周期概述

vue官方教程实战（六）—— 生命周期updated，watch和nextTick区别updated对所有数据的变化进行统一处理watch对具体某个数据变化做统一处理nextTick是对某个数据的某一次变化进行处理对数据变化进行处理的三种方式哪些数据哪种变化updated所有数据每次变化watch某个数据每次变化nextTick某个数据某一次变化...
复制链接

扫一扫