nextTick简介

标签：nextTick clientHeight 高度 console 简介 list 列表

在说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,clientHeight,高度,console,简介,list,列表
From： https://www.cnblogs.com/Ma-YuHao/p/16731234.html