记录vue生命周期函数created、mounted和使用$nextTick区别

指尖跃动smile

于 2021-06-03 08:15:50 发布

阅读量1.6k

点赞数

本文链接：https://blog.youkuaiyun.com/h_el_lo/article/details/107889693

版权

本文详细解析了Vue.js的生命周期钩子函数，通过两个实例对比展示了created和mounted钩子函数的执行时机，强调了它们在页面渲染过程中的作用及先后顺序。在第一个实例中，直接在created钩子中修改DOM会导致不可预知的行为，而在mounted钩子中进行DOM操作则能确保正确。第二个实例通过使用$nextTick方法，在DOM更新后执行created钩子内的操作，进一步说明了生命周期钩子的正确使用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<body>
	<div id="app">
		<div class="box" v-cloak>{{text}}</div>
		<div class="box1">
			box1
		</div>
	</div>
	<script src="./vue.min.js"></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				text: '原始值'
			},
			mounted() {
				var box = document.querySelector('.box')
				console.log(box)
				box.innerHTML = '页面渲染之后'

			},
			created() {
				var box = document.querySelector('.box')
				console.log(box)
				console.log(111)
				box.innerHTML = '页面渲染之前'

			}
						
		})
	</script>
</body>

控制台打印：

在这里插入图片描述
先执行created,再执行mounted
2.

<body>
	<div id="app">
		<div class="box" v-cloak>{{text}}</div>
		<div class="box1">
			box1
		</div>
	</div>
	<script src="./vue.min.js"></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				text: '原始值'
			},
			mounted() {
				var box = document.querySelector('.box')
				console.log(box)
				box.innerHTML = '页面渲染之后'

			},
			created() {
				this.$nextTick(function() {
					var box = document.querySelector('.box')
					console.log(box)
					console.log(111)
					box.innerHTML = '页面渲染之前'
				})

			}
						
		})
	</script>
</body>