如何在 Vue 中使用 nextTick()

1 年前

正经程序员

创业进行时～

在Vue使用组件时，对于组件数据的更改不会立即反应在DOM中，因为Vue是异步更新DOM的。

所以需要使用nextTick()或者$nextTick()函数来更新DOM。

Vue.nextTick()

Vue.nextTick()的主要用法是在下次DOM更新循环结束之后执行延迟回调。所以在修改数据之后立即使用这个方法，可以获取更新后的Dom。

// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
// 作为一个 Promise 使用
Vue.nextTick()
  .then(function () {
    // DOM 更新了
})

详细使用示例：下面是一个切换元素显示的组件。

<template>
    <button @click="handleClick">点击按钮</button>
    <div v-if="show" ref="content">I am an element</div>
</template>
<script>
export default {
  data() {
    return {
      show: true,
  methods: {
    handleClick() {
      this.show = !this.show;
      console.log(this.show, this.$refs.content);
</script>

点击‘点击按钮’会更改this.show数据，从而控制<div id="content">元素的显示。

在 handleClick 处理程序内部， this.show 记录到控制台的值与记录到控制台的引用不对应。这意味着 DOM 与组件的数据不同步。

如果想捕捉 DOM 刚刚更新的那一刻，就需要使用函数 Vue.nextTick(callback) 。在新数据更新到达 DOM 后立即执行。

<template>
    <button @click="handleClick">点击按钮</button>
    <div v-if="show" ref="content">I am an element</div>
</template>
<script>
import Vue from "vue";
export default {
  data() {
    return {
      show: true,
  methods: {
    handleClick() {
      this.show = !this.show;
      Vue.nextTick(() => {
        console.log(this.show, this.$refs.content);
</script>

如上所示，在点击‘点击按钮’时，可以看到 this.$refs.content （包含该 <div> 元素的引用）是 undefined 或包含一个元素——与 this.show 值完全对应。

this.$nextTick()

this.$nextTick()是将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

new Vue({
  // ...
  methods: {
    // ...
    example: function () {
      // 修改数据
      this.message = 'changed'
      // DOM 还没有更新
      this.$nextTick(function () {
        // DOM 现在更新了
        // `this` 绑定到当前实例
        this.doSomethingElse()
})

还是上面的示例代码，当 handleClick() 方法中更改 this.show 数据，立即执行 this.$nextTick() 以捕捉此更新到达 DOM 的时刻。

<template>
    <button @click="handleClick">点击按钮</button>
    <div v-if="show" ref="content">I am an element</div>
</template>
<script>
export default {
  data() {
    return {
      show: true,
  methods: {
    handleClick() {
      this.show = !this.show;
      this.$nextTick(() => {