Vue生命周期钩子函数

最新推荐文章于 2024-05-01 07:22:22 发布

疆~

最新推荐文章于 2024-05-01 07:22:22 发布

阅读量387

点赞数

分类专栏： Vue2 文章标签： Vue

本文链接：https://blog.csdn.net/qq_40323256/article/details/100849654

版权

Vue2 专栏收录该内容

196 篇文章 58 订阅

订阅专栏

Vue生命周期：Vue实例从创建到销毁的过程，称为Vue的生命周期；

Vue生命周期示意图：点击前往

Vue钩子函数官方文档：点击前往

Vue生命周期钩子：又称为Vue生命周期钩子方法/函数，是Vue为开发者提供的方法，我们可以通过这些方法在Vue实例创建、挂载、数据更新、销毁等阶段做一些事情；

Vue的生命周期钩子方法：

beforeCreate：还没有进行数据监视和事件初始化。可以在这加个loading事件
created：组件示例创建完成。进行了数据监视，事件已被初始化。$el属性还不存在。在这结束loading
beforeMount：编译了模板，但vue示例并未被挂载，因此不能进行dom操作
mounted：vue示例已被挂载，可以进行dom操作。可以在这发起后端请求
beforeUpdate：组件更新前调用
updated:组件更新后调用
beforeDestroy：vue实例删除前调用。你确认删除XX吗、点击下一步的时候、清除定时器等等
destroyed：vue实例删除后调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>01_lifeCycle-hook</title>
		<script type="text/javascript" src="../js/vue.js" ></script>
		<script>
			window.onload = () => {
				new Vue({
					el : 'div',
					data : {
						msg : '欢迎来到siki学院'
					},
					beforeCreate(){
						alert("1 beforeCreate 创建Vue实例，但是未进行数据观测 " + this.msg);
					},
					created(){
						alert("2 created 创建Vue实例，进行数据观测了 " + this.msg);
					},
					beforeMount(){
						alert("3 beforeMount 挂载Vue实例 前 " + this.msg + this.$refs.msgText.innerText);
					},
					mounted(){
						alert("4 mounted 已经挂载Vue实例了 " + this.msg + this.$refs.msgText.innerText);
					},
					beforeUpdate(){
						alert("5 beforeUpdate 数据 更新前"  + this.$refs.msgText.innerText);
					},
					updated(){
						alert("6 updated 数据 更新后 "  + this.$refs.msgText.innerText);
					},
					beforeDestroy(){
						alert("6 beforeDestroy vue对象销毁 前 ");
					},
					destroyed(){
						alert("6 updated vue对象销毁 后");
					},
					methods: {
						onDestroy(){
							this.$destroy();
						}
					}
				});
			}
		</script>
	</head>
	<body>
		<div>
			<input type="text" v-model="msg" /><br />
			<h1 ref="msgText">{{msg}}</h1>
			<button @click="onDestroy">销毁</button>
		</div>
	</body>
</html>

例2 created和mounted的区别

created:

html加载完成之前执行。即通常初始化某些属性值，然后再渲染成视图。

也就是说当created调用的时候，此时页面还没有被渲染成html，然后这时候通过id什么的去查找页面元素是找不到的

mounted:

html加载完成后执行。通常是初始化页面完成后，再对html的dom元素进行一些需要的操作。

此错误证明找不到id为msg的Dom元素。即模板还未渲染成html。所以，一般creadted钩子函数主要是用来初始化数据。

输出了hello，这说明这时候vue模板已经渲染完毕。

因此，Dom操作一般是在mounted钩子函数中进行的

疆~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue生命周期钩子函数

Vue生命周期：Vue实例从创建到销毁的过程，称为Vue的生命周期；Vue生命周期示意图：点击前往Vue钩子函数官方文档：点击前往Vue生命周期钩子：又称为Vue生命周期钩子方法/函数，是Vue为开发者提供的方法，我们可以通过这些方法在Vue实例创建、挂载、数据更新、销毁等阶段做一些事情；Vue的生命周期钩子方法：beforeCreate created beforeMou...
复制链接

扫一扫