Vue.js进阶技巧Day05 $nextTick的两种应用场景

$nextTick应用场景：

1.如果要在‘created()’ 钩子函数中进行DOM操作，因为created（）在调用时，DOM渲染还未完成，所以无法直接操作，需要通过

$nextTick（） 来完成

created: 实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，还未开始编译模板

mounted: 此时，已经将编译好的模板，挂载到了页面的指定容器中显示

<template>
	<div>
		<h1 ref='h1'></h1>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				msg:"nextTick案例"
			}
		},
		created(){
			this.$nextTick(()=>{
				this.$refs.h1.innerHTML = '修改内容'
			})
		}
	}
</script>

<style>
</style>

2. 更新数据后，想要使用js对新的视图进行操作时

<template>
	<div>
		<h1 ref='h1'>{{msg}}</h1>
		<button class='btn btn-primary' @click='test'>Test</button>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				msg:"nextTick案例"
			}
		},
		methods:{
			test(){
				this.msg = '123'
				console.log(this.$refs.h1.innerHTML) //拿到的仍然是修改前的数据
				//这样才能拿到修改后的数据
				this.$nextTick(()=>{
					console.log(this.$refs.h1.innerHTML)
				})
			}
		}
	}
</script>

<style>
</style>