第四讲 vue生命周期

目录

一、概念

二、作用

三、分类

四、Vue生命周期之初始化阶段

 五、Vue生命周期之挂载阶段 

六、Vue生命周期之更新阶段

七、Vue生命周期之更新阶段

八、生命周期完整版

---

一、概念

每个组件从创建到销毁都会经历一系列特定的过程,称为生命周期，把过程执行的回调函数称为生命周期钩子函数

二、作用

创建后发起ajax请求挂载后操作dom添加事件监听，销毁前移除间隔调用,事件监听

注意：并不是每个生命周期都必须使用

三、分类

四、Vue生命周期之初始化阶段

【图示】：

• new Vue()： _var vm = new vue(份表示开始创建—个vue的实例对象
• Init Events & Lifecycle：表示,刚初始化了一个vue空的实例对象,这时候这个对象的身上,只有默认的一些生命周期函数和默认事件,其他的东西都未创建
• beforeCreate：注意:在beforeCreate生命周期函数执行的时候,data和methods中的数据都还没有被初始化 注意:在在创建生命周期函数执行的时候之前，数据和方法中的数据都还没有被初始化
• Init injections&reactivity：表示data和methods都已经初始化好了

• created：如果要调用methods中的方法,或者操作data中的数据最早在created中操作.
• Has el option? ：是否有el选项 – 检查要挂到哪里。1、没有. 调用$mount()方法2、有, 继续检查template选项

【代码演示】：

 

【效果图】：

---

 五、Vue生命周期之挂载阶段 

【图解】：

 

• template选项检查:

有：编译template返回render渲染函数
无：编译el选项对应标签作为template(要渲染的模板）vue工程项目不支持

• 虚拟DOM挂载成真实DOM之前:
• beforeMount ：此函数在内存中编译好了模版字符串,但并未渲染到真正的页面中去例:{msg}
• Create： 把虚拟DOM和渲染的数据一并挂到真实DOM上
• 挂载完毕，mounted：生命周期钩子函数被执行
• outerHTML是把当前标签的全部内容包括标签本身也全部取出来了，编译el的outerHTML编译为模版
   

【代码演示】：

【 效果图】：

---

六、Vue生命周期之更新阶段

【图解】：

• 当data里数据改变, 更新DOM之前，beforeUpdate – 生命周期钩子函数被执行此时获取不到更新的真实dom
• Virtual DOM：虚拟DOM重新渲染, 打补丁到真实DOM
• updated事件执行的时候,页面和data数活已经保持同步了,都是最新的数据,并且已经局部更新到页面中去了
• 当有data数据改变 – 重复这个循环

 【代码演示】：

 【效果图】：

---

七、Vue生命周期之更新阶段

【图解】：

1. 当$destroy()被调用：比如组件DOM被移除(例v-if)
2. beforeDestroy：当执行到beforeDestroy钩子函数的时候,e实例就已经从运行阶段进入到了销毁阶段，当执行beforeDestroy的时候,实例身上的data和所有的methods 以及过滤器,指令都是处于可用状态,此时还没有真正执行销毁的过程
3. 拆卸数据监视器、子组件和事件侦听器
4. 实例销毁后, 最后触发一个钩子函数
5. destroyed：当执行到destroyed函数的时候,组件已经被完全销毁了,此时,组件中所有的数据,方法,指令过滤器...都已经完全不可用了
   -

【代码演示】：

【效果图】：

---

八、生命周期完整版

<template>
	<div>
		生命周期
		<button id="btn" @click='num++'>{{num}}button>
	div>
template>
 
<script>
	export default {
		data() {
			return {
				num: 5,
				stopId: null
			}
		},
		methods: {
			showWin() {
				console.log(window.innnerWidth)
			}
		},
		// 创建前后
		beforeCreate() {
			// 创建前有this,没有data,methods dom节点
			console.log('beforeCreate',this.num,this)
		},
		created() {
			// 创建完毕后,有data,没有el
			console.log('created',this.num,this.$el)
			//作用:发起ajax请求,开启定时器,监听事件(window)
			//开始定时器
			// this.stopId =setInterval(()=>{
			// 	this.num++;
			// 	console.log('滴答')
			// },1000)
			// 监听事件
			// window.addEventListener("resize", this.showWin)
 
		},
		// 挂载前后
		beforeMount() {
			// 挂载前,有$el,没有渲染数据
			// 使用脚手架,动态更新造成的(在非脚手架状态下可以)
			 // console.log('beforeMount', this, document.querySelector("#btn"))
		},
		// 挂载后
		mounted() {
			 // console.log('mounted', this.$el, document.querySelector("#btn"))
			// this当前组件的实例
			// this.$el当前组件的dom节点
			// this.num·当前组件的·属性
			// console.log(this,this.$el,'组件实例this')
			//作用:发起ajax请求,开启定时器,监听事件--操作dom节点
 
		},
		// 更新前后
		beforeUpdate() {
			// 组件的更新前,数据更新,视图没有更新
			 // console.log('beforeUpdate', this.num, document.querySelector("#btn").innerText)
		},
 
		updated() {
			//组件更新后,数据更新,视图已经更新
			 // console.log("updated", this.num, document.querySelector("#btn").innerText)
		},
		// 卸载前
		beforeDestroy() {
			// 结束定时器
			// clearInterval(this.stopId)
			// 移除监听事件
			// window.removeEventListener("resize", this.showWin)
			// 数据可以更新,视图已经不响应
			// this.num++;
			// console.log("卸载前", 'beforeDestroy')
			// alert('卸载前')
		},
		// 卸载后
		destroyed() {
			// 切断视图与vue实例的联系
			// console.log("卸载后", 'destroyed')
		},
	}
script>
 
<style>
style>

<template>
	<div>
		<h1>生命周期的创建阶段h1>
		<button @click="flag=!flag">切换button>
		<LifeTime v-if='flag'>LifeTime>
 
	div>
template>
 
<script type="text/javascript">
	// 1.导入SwiperCom组件
	import LifeTime from './components/LifeTime.vue'
	export default {
		// 2.注册 LifeTime
		components: {
			LifeTime
		},
		data(){
			return {
				flag:true
			}
		}
		
	}
script>
<style>
style>