Vue3中类实例对象属性无法响应式的问题咨询

你遇到的核心问题是：ref包裹类实例时，Vue仅追踪整个实例的引用变化，不会自动将类内部的属性转化为响应式。

• 第一个示例中，state = ref(new View()) 仅让state.value（即整个View实例）成为响应式，但类内部的this.time是普通属性，Vue无法感知它的更新，因此视图不会触发重新渲染。
• 第二个示例中，_state的更新会触发组件重新渲染，此时Vue会重新读取state.time的当前值，所以你能看到最新时间，但这只是渲染时的“被动读取”，并非state.time本身具备响应式。

方案1：用reactive替代ref包裹类实例 #

reactive专门处理对象/数组类型，会递归将内部所有可枚举属性转化为响应式，适合直接包裹类实例：

<script setup>
import { reactive } from 'vue'

class View {
  time = 0;
  constructor() {
    this.setTime()
  }
  setTime() {
    setInterval(() => {
      this.time = new Date().getTime()
    }, 2000)
  }
}
const state = reactive(new View())
</script>

<template>
  <h1>state {{ state.time }}</h1>
</template>

⚠️ 注意：不要直接给state重新赋值（比如state = new View()），否则会丢失响应式。如果需要替换实例，可以把它放到一个包装对象里：const wrapper = reactive({ instance: new View() })，之后更新wrapper.instance即可。

方案2：让类内部属性本身是响应式的 #

如果坚持用ref包裹实例，可以在类内部将属性定义为Vue的ref，确保内部属性具备响应式：

<script setup>
import { ref } from 'vue'

class View {
  time = ref(0); // 用ref包裹time属性
  constructor() {
    this.setTime()
  }
  setTime() {
    setInterval(() => {
      this.time.value = new Date().getTime() // 更新ref的value
    }, 2000)
  }
}
const state = ref(new View())
</script>

<template>
  <h1>state {{ state.time }}</h1> <!-- Vue会自动解包ref，无需写.value -->
</template>

方案3：用toRefs转化类实例属性为响应式ref #

如果只需要类实例中的部分属性响应式，可以用toRefs将属性转化为独立的响应式ref：

<script setup>
import { toRefs } from 'vue'

class View {
  time = 0;
  constructor() {
    this.setTime()
  }
  setTime() {
    setInterval(() => {
      this.time = new Date().getTime()
    }, 2000)
  }
}
const viewInstance = new View()
const { time } = toRefs(viewInstance) // 把time转化为响应式ref
</script>

<template>
  <h1>state {{ time }}</h1>
</template>

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