【vuejs】$forceUpdate 的使用和讲解

$forceUpdate 是 Vue 实例的一个方法，用于强制 Vue 实例重新渲染。当你在组件内部遇到数据变化，但视图没有更新的情况时，可能需要用到这个方法。

警告：在应用中谨慎使用 $forceUpdate，因为它会导致组件重新渲染，可能会引起性能问题。

使用 $forceUpdate 的场景：

1. 在组件内部数据更新，但视图没有更新的情况下。
2. 在父组件传递给子组件的数据变化时，子组件没有正确响应这种变化。

示例代码：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  methods: {
    updateMessage() {
      this.message = 'Hello World!';
      // 如果更新后视图没有更新，可以调用 $forceUpdate
      this.$forceUpdate();
    }
  }
};
</script>

在这个例子中，当点击按钮后，message 更新为 'Hello World!'，但如果组件的其它部分（如计算属性或侦听器）没有依赖于 message 的话，视图可能不会更新。在这种情况下，调用 $forceUpdate 可以强制组件重新渲染，从而更新视图显示新的消息内容。