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

最新推荐文章于 2024-07-04 15:31:05 发布

指尖跃动smile

最新推荐文章于 2024-07-04 15:31:05 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/h_el_lo/article/details/107889693

版权

<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>