知识点3--钩子函数

尘世壹俗人

已于 2022-07-06 23:04:54 修改

阅读量291

点赞数

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

于 2022-07-06 18:16:14 首次发布

本文链接：https://blog.csdn.net/dudadudadd/article/details/125644945

版权

VUE 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

Vue为开发者提供了一个钩子函数，其实就是为开发者提供了一个在dom被渲染的生命周期中，某些特别时间段嵌套自定义代码的功能，如果没有听懂这句话，大家可以想一下CSS为我们提供的针对超链接的点击前点击后样式开发，和那个意思一模一样

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{message}} {{b}}
		</div>
		
		<script type="text/javascript">
			var data = {message:'Hello Vue!',b:'111'}
			
			var app = new Vue({
				el:'#app',
				data:data,
				//第一个被调用的方法
				//在Vue对象实例化前做什么，具体生效在数据观测与event/watcher事件之前
				beforeCreate:function(){
					console.log('1')
				},
				//第二个被调用的方法，在Vue对象实例化后立即被调用
				//这个方法生效在数据观测、event/watcher事件回调、属性和方法的运算之后
				//但此刻该方法运行时，还没有发生挂载，也就是没有和元素关联
				created:function(){
					console.log('2')
				},
				//第三个被调用的方法，挂载前干什么，这个时候对元素的渲染函数开始被调用
				beforeMount:function(){
					console.log('3')
				},
				//第四个被调用的方法，挂载成功后做什么
				mounted:function(){
					console.log('4')
				},
				//面两个方法不会在实例化Vue对象时调用，而是在元素数据变动时调用
				//第五个被调用的方法，目标元素数据更新前调用
				beforeUpdate:function(){
					console.log('5')
				},
				//第六个被调用的方法，目标元素数据更新后调用
				updated:function(){
					console.log('6')
				}
			});
			
			app.$data.b="ddd";
		</script>
		
	</body>
</html>

看控制台输出
在这里插入图片描述
上面的六个钩子函数我们要做一个了解，而且在实际使用中患有另外的两个组件相关的钩子函数，用到再说

尘世壹俗人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
知识点3--钩子函数

Vue为开发者提供了一个钩子函数，其实就是为开发者提供了一个在dom被渲染的生命周期中，某些特别时间段嵌套自定义代码的功能，如果没有听懂这句话，大家可以想一下CSS为我们提供的针对超链接的点击前点击后样式开发，和那个意思一模一样看控制台输出上面的六个钩子函数我们要做一个了解，而且在实际使用中患有另外的两个组件相关的钩子函数，用到再说......
复制链接

扫一扫