future.png
珠玑技术随笔
联系/Contact:
future.png

Vue 3 使用 $forceUpdate 方法强制刷新组件

2021年07月21日

Hsu

2分钟

Vue3 官方文档没写 forceUpdate 在哪里,在某些极端的应用场景中,需要手动强制刷新组件。
Vue3 文档中提供了一个 API getCurrentInstance 用来访问组件实例,里面有很多隐藏的方法。

getCurrentInstance 官方文档 https://v3.cn.vuejs.org/api/composition-api.html#getcurrentinstance

代码

import { getCurrentInstance } from "vue";
...
  setup() {
    const internalInstance = getCurrentInstance();
    const forceUpdate = internalInstance.ctx.$forceUpdate; // 藏的挺深

    // 强制刷新
    const reFresh = () => {
      forceUpdate();
    };
  },
...