如何让构造函数中启动的Promise正确触发Vue响应式更新？

你对问题的成因判断完全准确：构造函数的执行时机早于reactive()的代理包装流程，构造函数内部的this指向未被包装的原始类实例，此时调用load()启动的异步逻辑中，闭包持有的this也是原始实例引用，后续对this.image的赋值直接修改原始对象，完全绕过了Vue响应式代理的属性拦截，因此无法触发视图更新。
如果手动在代理生成后调用thing.load()，此时load方法作为代理对象的方法被调用，内部this指向响应式代理，赋值操作会被代理拦截，就能正常触发更新，但这种方式确实会增加类的使用成本。

下面是几个不需要手动在外部调用load()的方案，按推荐优先级排序：

方案1：静态工厂方法（通用性最优） #

把实例初始化、代理包装、异步加载的逻辑全部封装到类的静态方法中，外部不需要关心初始化流程，直接调用工厂方法就能拿到可用的响应式实例。
这种方案的优势是类本身完全不依赖Vue的API，在非Vue环境也能正常使用，逻辑清晰没有黑魔法，不会出现this指向混乱的问题。

import { reactive } from 'vue'
class Thing {
  // 构造函数仅做同步字段初始化，不启动异步逻辑
  constructor() {
    this.image = null
  }
  async load() {
    const response = await fetch('https://placekitten.com/200/300')
    const blob = await response.blob()
    this.image = await createImageBitmap(blob)
  }
  // 静态工厂方法，对外提供创建响应式实例的入口
  static create() {
    const instance = reactive(new Thing())
    // 代理生成后再启动加载，此时load内的this指向代理
    instance.load()
    return instance
  }
}
// 使用时直接调用工厂方法即可，无需手动包reactive、手动调load
const thing = Thing.create()

方案2：用ref包装可变字段（改造成本最低） #

Vue的ref本身自带独立的依赖追踪和更新触发能力，不需要依赖外层对象的代理拦截。只要把需要异步更新的字段初始化为ref，后续不管在什么上下文给ref.value赋值，只要这个ref被响应式上下文（比如模板、computed）访问到，变更就能被检测到。
这种方案几乎不需要改动原有代码结构，只需要修改字段初始化和赋值的逻辑，外部使用方式和原来完全一致，模板中访问thing.image时reactive会自动解包ref，不需要手动写.value。

import { ref, reactive } from 'vue'
class Thing {
  constructor() {
    // 可变字段用ref包装
    this.image = ref(null)
    this.load()
  }
  async load() {
    const response = await fetch('https://placekitten.com/200/300')
    const blob = await response.blob()
    // 给ref的value赋值即可触发更新
    this.image.value = await createImageBitmap(blob)
  }
}
// 外部使用方式和原来完全一致
const thing = reactive(new Thing())

方案3：构造函数返回代理（写法最简洁） #

JavaScript中如果构造函数显式返回一个对象，new操作符最终会返回这个对象，而不是默认创建的this实例。我们可以在构造函数内部提前创建响应式代理，用代理调用load方法保证内部this指向代理，最后返回这个代理。
这种方案外部使用成本最低，直接new Thing()就能拿到可用的响应式实例，不需要额外调用API。但要注意避免在构造函数中持有原始this的引用做异步赋值，否则还是会绕过代理拦截。

import { reactive } from 'vue'
class Thing {
  constructor() {
    this.image = null
    // 提前创建响应式代理
    const proxy = reactive(this)
    // 用代理调用load，保证load内部this指向代理
    proxy.load()
    // 构造函数返回代理，替代原始实例
    return proxy
  }
  async load() {
    const response = await fetch('https://placekitten.com/200/300')
    const blob = await response.blob()
    this.image = await createImageBitmap(blob)
  }
}
// 外部直接new即可，不需要额外包reactive
const thing = new Thing()
// 即使不小心再包一层reactive也不会有问题，Vue会直接返回已有的代理

不要尝试用queueMicrotask、Promise.resolve().then之类的方法把load调用推到微任务里，这种方式依赖JS事件循环的执行时序，一旦reactive的包装逻辑因为某些原因被延后（比如被其他微任务阻塞），还是会出现this指向原始实例的问题，稳定性很差。

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