vue的生命周期函数介绍及使用方法简介

最新推荐文章于 2024-05-11 22:56:23 发布

Jumbuck_10

最新推荐文章于 2024-05-11 22:56:23 发布

阅读量1k

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/weixin_46221106/article/details/106376257

版权

生命周期函数

（上边为概念，下边有示例代码）

生命周期函数 = 生命周期钩子 = 生命周期事件

创建阶段：BeforeCreate、created、BeforeMount、mounted
（1） BeforeCreate ： data、methods 初始化之前调用
（2）created ： data、methods 成功初始化调用
（3）BeforeMount ：挂载到 div 之前调用
（4） mounted ：成功挂载之后调用

（所以如果要通过某些插件操作页面上的DOM节点，最早要在 mounted 中进行）

（只要执行完了mounted，就表示整个 Vue 实例已经初始化完成了；此时已经从创建阶段，进入到了运行阶段）

运行阶段：beforeUpdate 和 updated
（1） beforeUpdate ：还未同步
（2） updated ：执行的时候，页面和data数据已经保持同步了

（这俩事件，会根据 data 数据的变化，有选择性地触发 0 次到多次）

销毁阶段：beforeDestroy 和 destroyed
（1） beforeDestroy ：实例身上所有的 data 和所有的methods 以及过滤器、指令等，都处于可用状态
（2） destroyed ：上述都已经不可用

示例代码：

<html>
	<head>
		<meta charset="utf-8">
		<title>生命周期</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p id="pbq">{{message}}</p>
			<input type="button" value="改变" @click="change" >
		</div>
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					message:"data中数据"
				},
				methods:{
					change(){
						this.message = 'no'
					}
				},
				beforeCreate() {
					console.log("beforeCreate-" + this.message)
				},
				created() {
					console.log("created-" + this.message)
				},
				beforeMount() {
					console.log("beforeMount-" + document.getElementById('pbq').textContent)
				},
				mounted() {
					console.log("mounted-" + document.getElementById('pbq').textContent)
				},
				beforeUpdate() {
					console.log("beforeUpdate Data中 -" + this.message)
					console.log("beforeUpdate 页面中 -" +  document.getElementById('pbq').textContent)
				},
				updated() {
					console.log("updated Data中 -" + this.message)
					console.log("updated 页面中 -" +  document.getElementById('pbq').textContent)
				}
			})
		</script>
	</body>
</html>

运行结果如下：
初始界面点击改变后：
页面中有数据发生改变后

Jumbuck_10

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue的生命周期函数介绍及使用方法简介

生命周期函数（上边为概念，下边有示例代码）生命周期函数 = 生命周期钩子 = 生命周期事件创建阶段：BeforeCreate、created、BeforeMount、mountedBeforeCreate ： data、methods 初始化之前调用created ： data、methods 成功初始化调用BeforeMount ：挂载到 div 之前调用mounted ：成功挂载之后调用（所以如果要通过某些插件操作页面上的DOM节点，最早要在 mounted 中进行
复制链接

扫一扫