详解vue中$nextTick和$forceUpdate的用法

1. $nextTick的用法

1.1 作用

$nextTick是Vue中提供的异步方法，用于在下次DOM更新循环结束之后执行延迟回调，在修改数据之后立即使用这个方法，可以获取更新后的DOM。

示例代码：

<template>
  <div>
      <h2>{{ message }}</h2>
      <button @click="changeMessage">改变message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello world'
    };
  },
  methods: {
    changeMessage() {
      this.message = 'Welcome to Vue';
      this.$nextTick(() => {
          console.log(this.$el.textContent); // 输出：'Welcome to Vue'
      });
    }
  }
}
</script>

在点击按钮修改$message的时候，我们使用了$nextTick方法，当DOM更新结束后，会执行传递给$nextTick方法的回调函数，输出更新后的DOM节点内容。

1.2 注意事项

需要注意的是，如果在同一个事件循环中多次使用了$nextTick，会被合并为一次执行。

示例代码：

<template>
  <div>
      <h2>{{ message }}</h2>
      <button @click="changeMessage">改变message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello world'
    };
  },
  methods: {
    changeMessage() {
      this.message = 'Welcome to Vue';
      this.$nextTick(() => {
          console.log('第一次' + this.$el.textContent); // 输出：'Welcome to Vue'
      });
      this.$nextTick(() => {
          console.log('第二次' + this.$el.textContent); // 输出：'Welcome to Vue'
      });
    }
  }
}
</script>

在上面的代码中，我们使用了两次$nextTick方法，在同一个事件循环中，代码执行顺序如下：

修改数据
提交更新
$nextTick队列中添加两个回调函数
等待DOM更新结束
执行回调函数，输出两次更新后的DOM节点内容

1.3 应用场景

获取DOM节点
改变数据后立即执行某些逻辑的操作
父组件在与子组件通信时，可能需要在下一次DOM更新结束后才能获取子组件的数据。

2. $forceUpdate的用法

2.1 作用

$forceUpdate方法强制重新渲染一次组件。如果修改了组件的状态，但没有引起视图的变化，或者想要跳过shouldComponentUpdate的比较，可以使用这个方法。

示例代码：

<template>
  <div>
    <h2>{{ message }}</h2>
    <button @click="randomNum">重渲染</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello world'
    };
  },
  methods: {
    randomNum() {
      this.message = Math.random();
      this.$forceUpdate();
    }
  }
}
</script>

在示例代码中，当我们点击重渲染按钮的时候，会重新渲染组件。