nextTick解释与应用

官网解释：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

实例演示

• template

<p><button v-on:click="change">changeTxt</button></p>
<p ref="ptxt" id="ptxt" >{{txt}}</p>

• script

data() {
　　return {
　　　　txt:'I have not changed.',
　　}
},
methods: {
　　change(){
　　　　this.txt="I have changed."
　　　　console.log('nextTick--out:',document.getElementById('ptxt').innerText) //I have not changed.
　　　　this.$nextTick(function(){
　　　　　　console.log('nextTick--inner:',document.getElementById('ptxt').innerText)//I have changed twice.
　　　　})
　　　　this.txt="I have changed twice."
　　},
},
updated(){
　　　console.log('updated')
}

• 点击修改前界面：

• 点击修改后界面：

• 浏览器控制台打印信息：

•  解释说明

在数据修改之后，立即去获取dom元素中的innerText，还是之前的，而在nextTick中去打印，就发现数据已经是更新后的了。并且只会在最后一次数据更新之后，执行回调。

应用场景

在页面初始化的时候或者数据变化之后，想要数据更新完成之后，去执行一下与更新后元素有关联的操作，比如页面从上到下分为两部分，下面部分的高度需要根据上面元素变化后的高度去改变，即可配合ref使用去设置元素高度

this.bottomHeight=this.$ref.all.clientHeight-this.$refs.top.clientHeight