VUE L 生命周期 ⑩①

SYFStrive

已于 2023-06-24 12:01:37 修改

阅读量699

点赞数

分类专栏： VUEJS 文章标签： vue.js javascript 前端

于 2023-06-23 23:40:36 首次发布

本文链接：https://blog.csdn.net/m0_61490399/article/details/129953695

版权

VUEJS 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

文章有误请指正，如果觉得对你有用，请点三连一波，蟹蟹支持✨

                    ⡖⠒⠒⠒⠤⢄⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸   ⠀⠀⠀⡼⠀⠀⠀⠀ ⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢶⣲⡴⣗⣲⡦⢤⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠋⠉⠉⠓⠛⠿⢷⣶⣦⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠇⠀⠀⠀⠀⠀⠀⠘⡇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡞⠀⠀⠀⠀⠀⠀⠀⢰⠇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡴⠊⠉⠳⡄⠀⢀⣀⣀⡀⠀⣸⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠰⠆⣿⡞⠉⠀⠀⠉⠲⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠈⢧⡀⣀⡴⠛⡇⠀⠈⠃⠀⠀⡗⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣱⠃⡴⠙⠢⠤⣀⠤⡾⠁⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⢀⡇⣇⡼⠁⠀⠀⠀⠀⢰⠃⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⣸⢠⣉⣀⡴⠙⠀⠀⠀⣼⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡏⠀⠈⠁⠀⠀⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠀⠀⠀⠀⠀⠀⡼⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠀⠀⠀⠀⠀⣰⠃⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⣀⠤⠚⣶⡀⢠⠄⡰⠃⣠⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⢀⣠⠔⣋⣷⣠⡞⠀⠉⠙⠛⠋⢩⡀⠈⠳⣄⠀⠀⠀⠀⠀⠀⠀
⠀⡏⢴⠋⠁⠀⣸⠁⠀⠀⠀⠀⠀ ⠀⣹⢦⣶⡛⠳⣄⠀⠀⠀⠀⠀
⠀⠙⣌⠳⣄⠀⡇   不能   ⡏⠀⠀  ⠈⠳⡌⣦⠀⠀⠀⠀
⠀⠀⠈⢳⣈⣻⡇   白嫖 ⢰⣇⣀⡠⠴⢊⡡⠋⠀⠀⠀⠀
⠀⠀⠀⠀⠳⢿⡇⠀⠀⠀⠀⠀⠀⢸⣻⣶⡶⠊⠁⠀⠀
⠀⠀⠀⠀⠀⢠⠟⠙⠓⠒⠒⠒⠒⢾⡛⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⣠⠏⠀⣸⠏⠉⠉⠳⣄⠀⠙⢆⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⡰⠃⠀⡴⠃⠀⠀⠀⠀⠈⢦⡀⠈⠳⡄⠀⠀⠀⠀⠀⠀⠀
⠀⠀⣸⠳⣤⠎⠀⠀⠀⠀⠀⠀⠀⠀⠙⢄⡤⢯⡀⠀⠀⠀⠀⠀⠀
⠀⠐⡇⠸⡅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⡆⢳⠀⠀⠀⠀⠀⠀
⠀⠀⠹⡄⠹⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣇⠸⡆⠀⠀⠀⠀⠀
⠀⠀⠀⠹⡄⢳⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢹⡀⣧⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢹⡤⠳⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣷⠚⣆⠀⠀⠀⠀
⠀⠀⠀⡠⠊⠉⠉⢹⡀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡎⠉⠀⠙⢦⡀⠀
⠀⠀⠾⠤⠤⠶⠒⠊⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠙⠒⠲⠤⠽

提示：以下是本篇文章正文内容

$V u e j s$

简介： Vue 是一套用于构建用户界面的 渐进式 框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

官方

中文： https://cn.vuejs.org/
英文： https://vuejs.org/
Vue2API : https://v2.cn.vuejs.org/
Vue2 相关包： https://github.com/vuejs/awesome-vue
Vue2 入门安装官方：https://v2.cn.vuejs.org/v2/guide/installation.html
Vue 相关插件： https://awesomejs.dev/for/vue/

初见生面周期

— 代码演示 🎊

<!-- 
	生命周期：Mounted → 初始
	1.又名：生命周期回调函数、生命周期函数、生命周期钩子。
	2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
	3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
	4.生命周期函数中的this指向是vm 或 组件实例对象。
-->

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>引出生命周期</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<h2 v-if="a">你好啊</h2>
		<h2 :style="{opacity}">欢迎学习Vue</h2>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	new Vue({
		el: '#root',
		data: {
			a: false,
			opacity: 1
		},
		methods: {
			//指数大爆炸
		},
		//Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用Mounted 不推荐外部使用Mounted
		mounted() {
			console.log('mounted', this)
			setInterval(() => {
				this.opacity -= 0.01
				if (this.opacity <= 0) this.opacity = 1
			}, 16)
		},
	})

</script>

</html>

分析生命周期

— 代码演示 🎊

<!-- 
	生命周期：beforeCreate、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed
	1.又名：生命周期回调函数、生命周期函数、生命周期钩子。
	2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
	3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
	4.生命周期函数中的this指向是vm 或 组件实例对象。
-->

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>分析生命周期</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 准备好一个容器-->
	<div id="root" :x="n">
		<h2 v-text="n"></h2>
		<h2>当前的n值是：{{n}}</h2>
		<button @click="add">点我n+1</button>
		<button @click="bye">点我销毁vm</button>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	new Vue({
		el: '#root',
		// template:`
		// 	<div>
		// 		<h2>当前的n值是：{{n}}</h2>
		// 		<button @click="add">点我n+1</button>
		// 	</div>
		// `,
		data: {
			n: 1
		},
		methods: {
			add() {
				console.log('add')
				this.n++
			},
			bye() {
				console.log('bye')
				this.$destroy()
			}
		},
		watch: {
			n() {
				console.log('n变了')
			}
		},
		beforeCreate() {
			console.log('beforeCreate')
		},
		created() {
			console.log('created')
		},
		beforeMount() {
			console.log('beforeMount')
		},
		mounted() {
			console.log('mounted')
		},
		beforeUpdate() {
			console.log('beforeUpdate')
		},
		updated() {
			console.log('updated')
		},
		beforeDestroy() {
			console.log('beforeDestroy')
		},
		destroyed() {
			console.log('destroyed')
		},
	})
</script>

</html>

生命周期总结

— 代码演示 🎊

	<!-- 
			常用的生命周期钩子：
				1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
				2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

			关于销毁Vue实例
				0.vm.$destory()
				1.销毁后借助Vue开发者工具看不到任何信息。
				2.销毁后自定义事件会失效，但原生DOM事件依然有效。
				3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。
	-->

vue生命周期分析

理解：生命周期就是人从出生到死亡了过程

图示 ↓

在这里插入图片描述

初始化显示

beforeCreate (创建之前)无法通过vm访问到data中的数据，methods方法等等.
created() 数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且 $el property 配置对象目前尚不可用。可以通过vm访问到data中的数据，methods方法等等；
1. 没有配有 $El ，执行 v m .$ $ $m o u n t (e l)$
2. 如果没有摸版直接解析Template配置的内容；
3. 创建之前之后指的是（ $数据代理以及数据检测$ ）

–

beforeMount() 页面呈现是未经解析的dom结构、这里对dom进行操作最终都不奏效
mounted() 页面呈现是经Vue解析过的dom结构（尽可能不在这里操作dom）、这里可以开启定时器、发送网络请求、订阅消息、绑定事件、等初始化操作！

–

更新状态: this.xxx = value

beforeUpdate() 此时 数据是新的，但页面是旧的 ，未保持同步！
updated() 此时数据是新的，但页面也是新的，保持同步！

–

销毁vue实例: vm.$destory()

beforeDestory() 这里可以关闭定时器、发送网络请求、订阅消息、绑定事件、等初始化操作！销毁收尾操作。
destoryed() 彻底销毁

–

常用的生命周期方法

mounted(): 发送ajax请求, 启动定时器等异步任务
beforeDestory(): 做收尾工作, 如: 清除定时器

总结

以上是个人学习Vue的相关知识点，一点一滴的记录了下来，有问题请评论区指正，共同进步，这才是我写文章的原因之，如果这篇文章对您有帮助请三连支持一波

SYFStrive

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
VUE L 生命周期 ⑩①

代码演示 🎊--常用的生命周期钩子：1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。关于销毁Vue实例1.销毁后借助Vue开发者工具看不到任何信息。2.销毁后自定义事件会失效，但原生DOM事件依然有效。3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。-->vue生命周期分析。
复制链接

扫一扫