Vue3 Composition API中this.$forceUpdate的等效实现方法是什么？

方案1：直接使用等效于Vue2的$forceUpdate方法 #

可以通过Vue提供的getCurrentInstance接口获取当前组件实例，调用实例上的内置强制更新方法，和Vue2的this.$forceUpdate效果完全一致：

import { getCurrentInstance } from 'vue'

setup(props, context) {
   const instance = getCurrentInstance()
   const doSomething = () => {
     instance?.proxy?.$forceUpdate()
   }

   return {
       doSomething
   }
}

注意：getCurrentInstance只能在setup同步逻辑、组件生命周期钩子中调用，不要在异步回调的顶层提前获取实例

方案2：响应式触发更新（更符合Composition API设计理念） #

强制更新属于非常规操作，更推荐用原生响应式能力实现相同效果，不需要依赖内部实例接口，可控性更强：

import { ref } from 'vue'

setup(props, context) {
   // 声明一个无意义的响应式标记变量
   const updateFlag = ref(0)
   const doSomething = () => {
     // 修改响应式变量触发组件重渲染
     updateFlag.value++
   }

   return {
       doSomething,
       // 特殊场景下可以把updateFlag绑定到组件根元素的key属性，修改时会直接触发组件卸载重建，连状态都会重置
       // updateFlag
   }
}

提示：绝大多数场景下你应该通过规范响应式状态声明的方式驱动视图更新，仅在处理非响应式状态修改等极端场景时再使用上述方案。

内容的提问来源于stack exchange，提问作者saibbyweb