Vue 3 中的 this.$forceUpdate 等效项 - 组合 API？

Posted 2023-02-16

【中文标题】Vue 3 中的 this.$forceUpdate 等效项 - 组合 API？

【英文标题】：this.$forceUpdate equivalent in Vue 3 - Composition API?

【发布时间】：2021-07-31 18:59:30

【问题描述】：

在 Vue 2 中，实例方法 this.$forceUpdate() 可用于手动更新组件。我们如何在 Vue 3 - Composition API 中强制更新组件（在 setup 方法中）？

setup(props, context) 
   const doSomething = () => 
     /* how to call $forceUpdate here? */
   

   return 
       doSomething
   

谢谢，提前。

【参考方案1】：

$forceUpdate 在 Vue3 中仍然可用，但您无法在 setup() 函数中访问它。如果你绝对需要使用它，你可以使用对象 API 组件或这个花哨的技巧......

app.component("my-component", 
  template: `...`,
  methods: 
    forceUpdate()
        this.$forceUpdate()
    
  ,
  setup(props) 
    const instance = Vue.getCurrentInstance();
    Vue.onBeforeMount(()=>
        // instance.ctx is not populated immediately
        instance.ctx.forceUpdate();
    )
    return doSomething;
  ,
)

如果这似乎是一个荒谬的解决方案，请相信您的判断力。理想情况下，您的应用程序不会依赖forceUpdate。如果您依赖它，可能意味着某些配置错误，这应该是首先要解决的问题。

【讨论】：

我知道forceUpdate 应该尽一切可能避免，只是好奇它是如何在setup() 中完成的。一周前刚迁移到 Vue 3，在任何地方的文档中都找不到它。谢谢。

Property 'ctx' does not exist on type 'ComponentInternalInstance' 在 Vue 3.2 中。看起来它在这个提交中被重命名为proxy：github.com/vuejs/vue-next/commit/…。请参阅下面的答案。

我用 vue 3.2.0 测试过，它仍然可以工作

如果您查看提交，ctx 在那里，但是也正在添加 ctx (proxy) 的代理。在某些情况下，可能需要代理来进行反应，但情况似乎并非如此。我没有看到任何提到在release changelog 中删除ctx，这样的更改将保证vue 团队的更多沟通。

【参考方案2】：

当我需要在 vue 中强制更新时，我通常会添加一个可以更改值的键，然后强制 vue 更新它。这也应该在 vue 3 中工作，尽管我承认我从未尝试过。这是一个例子：

<template>
  <ComponentToUpdate
    :key="updateKey"
  />
</template>

<script>
  export default 
    data() 
      return 
        updateKey: 0,
      ;
    ,
    methods: 
      forceUpdate() 
        this.updateKey += 1;
      
    
  
</script>

您可以在此处阅读更多信息：https://michaelnthiessen.com/key-changing-technique/

【讨论】：

不错的技巧，谢谢。我正在为 vue2 使用 vue-composition-api，它工作得很好:)

【参考方案3】：

<script>
import getCurrentInstance, defineComponent from 'vue'
export default defineComponent(
  setup() 
    const instance = getCurrentInstance();
    instance.proxy.$forceUpdate();
  
)
</script>

在 TypeScript 中它将是 instance?.proxy?.$forceUpdate()