Vue中historys数组变更时watch未触发的问题求助

问题描述 #

当ChatManager类中的historys数组执行push或修改元素属性时，Vue3组件setup中设置的watch监听器始终不触发。

问题根源 #

你在setup中通过const historys = ref(manager.historys)只是让ref的value初始指向了manager.historys这个普通数组，但manager.historys本身不是Vue的响应式对象。Vue的响应式系统无法追踪普通对象/数组的直接修改（比如push、修改元素属性），因此watch监听器感知不到这些变化。

另外，模板中存在笔误：:history="manager.history"应该改为:history="manager.historys"，确保传递的是正确的数组。

解决方法 #

方法一：将ChatManager的historys改为响应式数组 #

修改ChatManager类，用Vue的ref包装historys，让它成为响应式对象：

import { ref } from 'vue';

export class ChatManager {
  constructor() {
    this.url = import.meta.env.VITE_API_URL || 'http://localhost:11434/api';
    this.historys = ref([]); // 用ref包装为响应式数组
  }

  async sentChat(message) {
    const messageTemplate = {
      request: { role: "user", content: '' },
      response: { role: 'assistant', content: '' }
    };

    try {
      messageTemplate.request.content = message;
      this.historys.value.push(messageTemplate); // 操作响应式数组需访问.value

      const response = await fetch(`${this.url}/chat`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          model: "llama2",
          messages: [{ role: "user", content: message }],
          stream: false
        })
      });

      const data = await response.json();
      const lastItem = this.historys.value[this.historys.value.length - 1];
      lastItem.response.content = data.message.content;
      lastItem.response.role = data.message.role;

      return data;
    } catch (error) {
      console.log(error);
    }
  }
}

然后在组件中直接监听这个响应式数组：

<script setup>
// ... 其他导入
const manager = new ChatManager();

watch(manager.historys, (newHistory) => {
  console.log("Watch execute");
  console.log(newHistory);
}, { deep: true });

// ... 其他代码
</script>

<template>
  <Layout>
    <template #sidebar>
      <Sidebar />
    </template>
    <template #chat>
      <!-- 响应式数组需访问.value -->
      <Chat :history="manager.historys.value"/>
    </template>
    <template #input-chat>
      <InputChat @sent-message="handleSentMessage"/>
    </template>
  </Layout>
</template>

方法二：不修改ChatManager，用函数式数据源监听 #

如果不想改动ChatManager，可以通过watch的函数式数据源，让watch每次获取最新的manager.historys状态，结合deep: true监听数组内部变化：

<script setup>
// ... 其他导入
const manager = new ChatManager();

// 用函数返回要监听的数组，确保每次能获取最新状态
watch(
  () => manager.historys,
  (newHistory) => {
    console.log("Watch execute");
    console.log(newHistory);
  },
  { deep: true }
);

// ... 其他代码
</script>

<template>
  <Layout>
    <template #sidebar>
      <Sidebar />
    </template>
    <template #chat>
      <!-- 修正笔误，传递正确的数组 -->
      <Chat :history="manager.historys"/>
    </template>
    <template #input-chat>
      <InputChat @sent-message="handleSentMessage"/>
    </template>
  </Layout>
</template>

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