Vue中的生命周期（钩子函数）

最新推荐文章于 2023-08-09 10:07:46 发布

不染126

最新推荐文章于 2023-08-09 10:07:46 发布

阅读量379

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_59541478/article/details/126998164

版权

定义：生命周期指的是vue实例创建到虚拟DOM产生再到数据绑定、监听数据渲染，最后再销毁的过程。

下面通过代码来描述它的过程：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>

</head>

<body>
	<div id="app">
		<div ref="container"></div>
		{{msg}}
	</div>
	<script>
		let vm=new Vue({
			el: '#app',
			data: {
				msg: 'hello Vue'
			},
			template:'<h1>{{msg}}</h1>',
			// 生命周期
			beforeCreate() {
				console.log('实例初始化之前', this.msg);
			},
			created(){
				console.log('实例初始化完成 访问data和methods',this.msg);
			},
			beforeMount(){
				console.log('实例挂载到页面之前',this.$refs['container']);
			},
			render(h){
				return h('h2',{},this.msg)
			},
			mounted(){
				console.log('实例挂载到页面上 可以访问dom元素 异步请求',this.$refs['container']);
			},
			beforeUpdate(){
				console.log('实例更新之前');
			},
			updated(){
				console.log('实例更新完毕');
			},
			beforeDestroy(){
				console.log('实例销毁之前',this.msg);
			},
			destroyed(){
				console.log('实例销毁完成',this.msg);
			}
		});
	</script>
</body>

</html>

1.beforeCreate,指的是实例化初始之前，就完成了一些事件和默认生命周期

2.created,指的是实例初始化完成，这时就可以访问data中的数据和methods中的方法，还可以发送异步请求

3.beforeMount,指的是实例挂载到模板之前，属于编译模板阶段，这个阶段还会判断是否存在‘el’选项，存在的话继续执行template选项，然后指定el外部的html模板，创建$el代替真实的el。

4.mounted,指的是将实例挂载到模板上，这时就可以访问dom节点，还可以发送异步请求，图表联动等。

5.beforeUpdate,指的是更新虚拟dom节点，使用diff算法更新视图

6.updated,指的是数据已经更新，视图已经渲染完成，这是实例数据变化触发的生命周期

7.beforeDestroy,指的是实例销毁之前，在这里依旧可以访问到vue实例

8.destroyed,指的是vue实例已经销毁，清除监听器、子组件。

可以发现，created和mounted都可以发送异步请求，那么它们有什么区别呢？

created是模板渲染成html前就调用，而mounted是渲染完成之后，通常用created会多一点，因为created是先初始化属性值再渲染图表，mounted是页面渲染完成后再对dom节点进行一些操作。

不染126

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue中的生命周期（钩子函数）

created是模板渲染成html前就调用，而mounted是渲染完成之后，通常用created会多一点，因为created是先初始化属性值再渲染图表，mounted是页面渲染完成后再对dom节点进行一些操作。定义：生命周期指的是vue实例创建到虚拟DOM产生再到数据绑定、监听数据渲染，最后再销毁的过程。可以发现，created和mounted都可以发送异步请求，那么它们有什么区别呢？
复制链接

扫一扫