Vue 3中修改ref对象属性后视图未更新的问题求助

问题根源 #

你直接将props传入的workplace对象赋值给ref，虽然用了ref包裹，但对象本身是引用类型，直接修改嵌套属性时，可能因原对象的响应式关联问题导致Vue未检测到变化；同时直接修改props传递的对象属性也违反了Vue的单向数据流原则。

解决方案1：创建独立响应式对象（深拷贝） #

通过深拷贝props的对象，生成完全独立的响应式对象，避免与原props对象共享引用：

import { ref, cloneDeep } from 'vue';
import axios from 'axios';

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

// 深拷贝props对象，生成独立的响应式对象
const workplace = ref(cloneDeep(props.workplace));

axios.post(url).then(res => {
  // 修改响应式对象属性，Vue会自动检测变化
  workplace.value.invite_link = res.data.workplace.invite_link;
});

解决方案2：使用reactive展开对象（浅拷贝，适合简单结构） #

如果workplace对象结构简单、无深层嵌套，可通过reactive结合对象展开创建新的响应式对象：

import { reactive } from 'vue';
import axios from 'axios';

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

// 展开props对象，创建新的响应式对象
const workplace = reactive({ ...props.workplace });

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

最佳实践：遵循单向数据流（同步父组件状态） #

若需让父组件同步该更新，应通过emit事件通知父组件修改原props，而非子组件直接修改：

import { ref } from 'vue';
import axios from 'axios';

const props = defineProps({
  workplace: Object
});
const emit = defineEmits(['update:workplace']);

axios.post(url).then(res => {
  // 生成更新后的对象
  const updatedWorkplace = { 
    ...props.workplace, 
    invite_link: res.data.workplace.invite_link 
  };
  // 通知父组件更新props
  emit('update:workplace', updatedWorkplace);
});

父组件中使用v-model:workplace绑定即可同步状态：

<ChildComponent v-model:workplace="parentWorkplace" />

额外检查项 #

• 确认Axios请求已成功返回，且res.data.workplace.invite_link存在有效值，可在then回调中添加console.log(res.data.workplace.invite_link)验证；
• 模板中v-show="workplace.invite_link"写法正确，ref在模板中会自动解包，无需添加.value。

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