Vue3 对象内部修改自身属性值后，如何触发响应式？

Question

逻辑代码Demo：

<script setup lang="ts">
import { UnwrapNestedRefs, reactive, watch } from "vue";

class User {
  name: string;
  status: string;
  constructor(name: string) {
    this.name = name;
    this.status = "A";

    // 执行一些异步逻辑，会修改自身属性值
    this.runAsync();
  }
  runAsync() {
    setTimeout(() => {
      // 第一处 这里修改后页面不会更新
      console.log("1s后修改user自身的属性", this);
      this.status = "B";
    }, 1000);
  }
}
class Group {
  users: UnwrapNestedRefs<User>[];
  constructor() {
    this.users = [];
  }
  addUser(user: User) {
    this.users.push(user);
  }
}

const group = reactive(new Group());

watch(
  () => group.users,
  (users) => {
    console.log("users changed", JSON.stringify(users));
  },
  {
    deep: true,
  }
);

const add = () => {
  const user = reactive(new User("user1"));
  group.addUser(user);
};

const change = () => {
  // 第二处 这里修改后页面正常更新
  group.users[group.users.length - 1].status = "AA";
};

const show = () => {
  console.log(JSON.stringify(group.users));
};
</script>

<template>
  <p>UploaderFiles</p>
  <button @click="add">Add</button>
  <button @click="change">Change</button>
  <button @click="show">show</button>
  <div>
    <div v-for="(user, index) in group.users" :key="index">
      <span>{{ user.name }}</span>
      <span> - </span>
      <span>{{ user.status }}</span>
    </div>
  </div>
</template>

大概的逻辑如上，重点在于User对象创建后会异步执行一些逻辑，然后改变自身的个别属性值，期望是页面上能实时更新改变后的数据。

大概原因我也了解，因为第一处修改的原始对象自身，其自身不具备响应式，而第二处修改的是创建的代理对象（group.users[group.users.length - 1]获取到的是代理对象），因此能触发响应式。

想寻求一个解决方案，如果确实需要在对象内部修改其属性值，怎么才能触发响应式？

Answer 1

原因跟你理解的一样。在下面例子中执行target.add()和执行proxy.add()效果是不一样的，因为target不是代理数据（类比你的new User），运行target.add()，里面的this指向target，是在对一个正常对象进行操作（你的this.runAsync()也是这个原理）。但是执行proxy.add()就不一样，里面的this指向proxy，是对代理数据进行操作，回到vue中就是可以出发响应式。所以可以把this.runAsync()挪出来，通过user.runAsync()执行。或者看有啥办法可以在constructor中把this变成响应式数据。

var target = {
    a: 1,
    add: function(){
        this.a++
        console.log(this.a)
    }
}
var proxy = new Proxy(target, {
  get: function (target, propKey, receiver) {
    console.log(`getting ${propKey}!`);
    return Reflect.get(target, propKey, receiver);
  },
  set: function (target, propKey, value, receiver) {
    console.log(`setting ${propKey}!`);
    return Reflect.set(target, propKey, value, receiver);
  }
});

Answer 2

因为在 constructor 中，你的 runAsync 函数执行时 this 指向的是被创建的源 User 实例，而不是使用 reactive 创建的被 Proxy 代理的 User 实例。

把你的 runAsync() 执行放到 User 实例化之后去执行，而不是在 constructor 中直接执行。

const add = () => {
  const user = reactive(new User("user1"));
  user.runAsync()
  group.addUser(user);
};

你可以对比两次执行 runAsync 函数时，控制台输出的 this 查看到两次执行的 this 不同指出。

---

深入响应式系统 | Vue.js
javascript - Vue 3 reactivity not triggered from inside a class instance - Stack Overflow

Answer 3

https://github.com/vuejs/core/issues/3743#issuecomment-835802036

https://stackoverflow.com/questions/43431550

<script setup lang="ts">
import { ref } from "vue";

class User {
  status: string;
  constructor() {
    this.status = "A";
    return (async () => {
      this.status = "B";
      // Constructors return `this` implicitly, but this is an IIFE, so
      // return `this` explicitly (else we'd return an empty object).
      return this;
    })();
  }
}

const user = ref();

(async function () {
  user.value = await new User();
})();
</script>

<template>
  <span v-if="user">status: {{ user.status }}</span>
</template>