Vue3中对象作为Prop传递时丢失响应性的问题咨询

从Vue2迁移到Vue3时遇到一个异常场景：在父组件中创建自定义类实例时，若在实例的构造函数（或静态创建方法）内调用异步方法修改实例属性，将该实例作为Prop传递给子组件后，子组件不会随属性更新而刷新。该场景在Vue2中能正常触发子组件更新，但Vue3中失效。目前已通过在子组件created钩子中调用异步方法解决问题，现寻求其他可行方案。

相关代码 #

App.vue #

<script>
import { ExampleObject } from './ExampleObject';
import Comp from './Comp.vue';
import Comp1 from './Comp1.vue';
export default {
  data() {
    return {
      someObjectsWithFetch: [],
      someObjectsWithoutFetch: [],
    }
  },

  components: {
    Comp,
    Comp1
  },

  mounted() {
    this.someObjectsWithFetch = [
      ExampleObject.createWithFetch(),
      ExampleObject.createWithFetch(),
    ];
    this.someObjectsWithoutFetch = [
      new ExampleObject(),
      new ExampleObject(),
    ];
  }
}
</script>

<template>
  <div class="container">
  <template v-if="someObjectsWithFetch.length > 0" v-for="object in someObjectsWithFetch">
    <Comp :some-object="object"></Comp>
  </template>
  <template v-if="someObjectsWithoutFetch.length > 0" v-for="object in someObjectsWithoutFetch">
    <Comp1 :some-object="object"></Comp1>
  </template>
  </div>
</template>

Comp.vue #

<script>
export default {
  props: {
    someObject: {
      type: Object,
      required: true,
    }
  },

  computed: {
    isCompleted() {
      return this.someObject.status === 'completed';
    }
  }
}
</script>

<template>
  <span v-if="isCompleted">Completed</span>
  <span v-else>Pending</span>
</template>

Comp1.vue #

<script>
export default {
  props: {
    someObject: {
      type: Object,
      required: true,
    }
  },

  created() {
    this.someObject.fetchStatus();
  },

  computed: {
    isCompleted() {
      return this.someObject.status === 'completed';
    }
  }
}
</script>

<template>
  <span v-if="isCompleted">Completed</span>
  <span v-else>Pending</span>
</template>

ExampleObject.js #

export class ExampleObject {
  constructor() {
    this.status = 'pending';
  }

  static createWithFetch() {
    const newObject = new this;
    newObject.fetchStatus();
    return newObject;
  }

  async fetchStatus() {
    setTimeout(() => {
      this.status = 'completed';
    }, 3000);
  }
}

解决方案 #

1. 用Vue响应式API包装实例 #

在父组件创建实例后，通过reactive包装实例，让Vue追踪其属性变化：

// App.vue的mounted钩子修改
this.someObjectsWithFetch = [
  Vue.reactive(ExampleObject.createWithFetch()),
  Vue.reactive(ExampleObject.createWithFetch()),
];

或者直接在类的静态创建方法中返回响应式对象：

// ExampleObject.js修改createWithFetch方法
static createWithFetch() {
  const newObject = Vue.reactive(new this);
  newObject.fetchStatus();
  return newObject;
}

2. 在类内部定义响应式属性 #

修改ExampleObject的构造函数，用ref定义响应式属性：

// ExampleObject.js
import { ref } from 'vue';

export class ExampleObject {
  constructor() {
    this.status = ref('pending');
  }

  async fetchStatus() {
    setTimeout(() => {
      this.status.value = 'completed';
    }, 3000);
  }
}

此时子组件计算属性需调整为访问value：

// Comp.vue计算属性修改
isCompleted() {
  return this.someObject.status.value === 'completed';
}

3. 父组件手动触发响应式更新 #

修改fetchStatus返回Promise，在父组件中等待异步完成后，通过修改数组引用触发更新：

// ExampleObject.js修改fetchStatus
async fetchStatus() {
  return new Promise(resolve => {
    setTimeout(() => {
      this.status = 'completed';
      resolve();
    }, 3000);
  });
}

// App.vue的mounted钩子修改
async mounted() {
  const obj1 = ExampleObject.createWithFetch();
  const obj2 = ExampleObject.createWithFetch();
  this.someObjectsWithFetch = [obj1, obj2];
  await Promise.all([obj1.fetchStatus(), obj2.fetchStatus()]);
  this.someObjectsWithFetch = [...this.someObjectsWithFetch];
}

4. 子组件监听属性变化并强制更新 #

在子组件中添加watch监听someObject.status，变化时强制组件更新：

// Comp.vue的script部分修改
export default {
  props: {
    someObject: {
      type: Object,
      required: true,
    }
  },
  computed: {
    isCompleted() {
      return this.someObject.status === 'completed';
    }
  },
  watch: {
    'someObject.status'() {
      this.$forceUpdate();
    }
  }
}

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