Vue.js的生命周期函数

最新推荐文章于 2022-12-26 15:33:30 发布

逍遥哥哥的最后倔强

最新推荐文章于 2022-12-26 15:33:30 发布

阅读量168

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/weixin_38899563/article/details/98112249

版权

Vue.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue实例的生命周期可以归纳为创建期间，运行期间，结束期间。

创建期间的beforeCreate（）函数中不能访问data和methods 中的属性；created()生命周期中data和method已经被初始化，可以被访问；beforeMount（）模板在内存中编译好了，但是还没有被挂载；mounted()是创建周期中最后一个函数，模板挂载。

运行期间的beforeUpdate() data中的数据更新时触发，data中的数据发生变化，生成新的虚拟dom ,但是为更新到页面中；updated()函数中可以看到更新后的数据

test:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<input type="button" name="" id="" value="change" @click="msg='goodbye'" />
			<p id="aa">{{msg}}</p>
		</div>
		<script type="text/javascript">
			var app=new Vue({
				el:'#app',
				data:{
					msg:'hello Vue!'
				},
				methods:{
					showInfo:function() {
						console.log('执行了该showInfo方法')
					}
				},
				beforeCreate() {
					console.log(this.msg)
					this.showInfo()
				},
				created() {
					console.log(this.msg)
					this.showInfo()
					//最早也只能在这里操作data中的数据
				},
				beforeMount() {
					console.log(document.getElementById('aa').innerText)
					//模板未被挂载
				},
				mounted() {
					console.log(document.getElementById('aa').innerText)
					//最早只能在这操作dom中的元素
				},
				//运行期间的函数
				beforeUpdate() {
					console.log(this.msg)
					console.log(document.getElementById('aa').innerText)
					//数据被更新了,但是还未渲染到页面
				},
				updated() {
					console.log(document.getElementById('aa').innerText)
					//此时数据才被更新
				}
			})
		</script>
	</body>
</html>

逍遥哥哥的最后倔强

关注

0
点赞
踩
0

收藏

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

Vue实例的生命周期可以归纳为创建期间，运行期间，结束期间。创建期间的beforeCreate（）函数中不能访问data和methods 中的属性；created()生命周期中data和method已经被初始化，可以被访问；beforeMount（）模板在内存中编译好了，但是还没有被挂载；mounted()是创建周期中最后一个函数，模板挂载。运行期间的beforeUpdate() ...
复制链接

扫一扫