为什么 Vue 3 ref 没有更新

Question

我已经搜索了这个问题并尝试了所有的方法，但对我不起作用。我正在使用 Vue 3 ref，在使用响应调用 Axios 后需要更新它，但它没有得到更新，这里是一些代码。

这里的invite_link是一个对象

const props = defineProps({
   'workplace': Object 
  });

// Also tried const workplace = props.workplace;

const workplace = ref(props.workplace);
axios.post(url).then(res=>{
  workplace.value.invite_link = res.data.workplace.invite_link
});
 

并且在模板中我使用的是

v-show="workplace.invite_link"

，需要在Axios成功运行后显示。我还检查了 Vue devtools，它仍然显示旧的工作场所对象

Answer 1

const workplace = ref(props.workplace);

重要的是要了解

setup

在组件生命周期中仅执行一次。上面的代码创建了一个 ref 并使用

props.workplace

的当前值初始化它。这样的引用的值永远不会改变。

如果您想创建一个 ref，其值将在

props.workplace

更新时更新（这几乎总是您想要的），请执行以下操作：

const { workplace } = toRefs(props);

或

const workplace = toRef(props, 'workplace');

文档