第四讲 vue生命周期

最新推荐文章于 2022-11-21 14:58:31 发布

Fiki515

最新推荐文章于 2022-11-21 14:58:31 发布

阅读量429

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Fiki515/article/details/126020005

版权

一、概念

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

二、作用

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

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

三、分类

四大阶段、八大方法
阶段	方法名	方法名
创建（前、后）	beforeCreate	created
挂载（前、后）	beforeMount	mounted
更新（前、后）	beforeUpdate	updated
销毁（前、后）	beforeDestroy	destroyed

四、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生命周期之更新阶段

【图解】：

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