[vue3快速入门] 22.nextTick简介

这节课介绍一个新功能，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实现方式也不晚。

vue3快速入门的这个系列到这里就结束，运用我们已经学过的知识，我们就已经可以做出简单的网站了，学习的一个好方式就是练习，我们可以找一个现有的网站，模仿结构样式，用vue写一遍。

但是对vue的学习并没有结束，后续我会再写更加进阶的教程，大家一起学习。