[vue3快速入门] 22.nextTick简介
2021-09-19 本文已影响0人
林哥学前端
这节课介绍一个新功能，nextTick的使用，
在说nextTick之前，我们先介绍一下这节课案例的需求，我们还是有一个数组，里面有几个超级英雄，把他们渲染到了一个ul里，我们现在要获取这个ul的高度
<template>
<div>
<ul ref="list">
<li v-for="(item, index) in list" :key="index">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
// nextTick
export default {
name: 'App',
data() {
return {
list: ['钢铁侠', '蜘蛛侠', '美国队长', '蝙蝠侠'],
}
},
mounted() {
console.log('列表的高度是：' + this.$refs.list.clientHeight)
},
}
</script>
<style></style>
这些代码大家应该已经熟悉了，顺便复习一下ref
这时候的输出是
列表的高度是：84
我们再增加一下内容，增加一个按钮，点击后给列表增加一个超级英雄，然后再获取一下列表高度
<template>
<div>
<ul ref="list">
<li v-for="(item, index) in list" :key="index">
{{ item }}
</li>
</ul>
<button @click="onAdd">增加</button>
</div>
</template>
<script>
// nextTick
export default {
name: 'App',
data() {
return {
list: ['钢铁侠', '蜘蛛侠', '美国队长', '蝙蝠侠'],
}
},
mounted() {
console.log('列表的高度是：' + this.$refs.list.clientHeight)
},
methods: {
onAdd() {
this.list.push('闪电侠')
console.log('列表的高度是：' + this.$refs.list.clientHeight)
},
},
}
</script>
<style></style>
我们运行、点击一下发现，其他都没有问题，闪电侠也显示在页面上了，但是打印的还是原来的高度，
列表的高度是：84
按说增加了元素高度应该增加啊
问题在于我们改变list的值时，vue并不是立刻去更新dom，而是在一个事件循环最后再去更新dom，这样可以避免不必要的计算和dom操作，对提高性能非常重要。
那么我们需要在dom更新完成后，再去获取ul的高度，这时候就需要用到nextTick了，
nextTick是一个函数，它接受一个函数作为参数，nextTick官网定义是‘将回调推迟到下一个 DOM 更新周期之后执行’，
这么说都过于抽象，直接看代码吧
onAdd() {
this.list.push('闪电侠')
this.$nextTick(() => {
console.log('列表的高度是：' + this.$refs.list.clientHeight)
})
},
简单来说，就是我们把获取高度的代码稍微延迟一点执行，就可以获取到ul的正确高度了
列表的高度是：105
nextTick这种使用方式大家记住就行了，没有什么复杂的逻辑，熟练以后再去研究vue的异步更新、nextTick实现方式也不晚。
