Vue3怎么监听V-for循环的数据

在 Vue3 中，可以使用 `watchEffect` 或 `watch` 来监听 `v-for` 循环的数据。这两个函数都可以实现响应式地监听数据变化的效果。

下面是使用 `watchEffect` 监听 `v-for` 循环的数据的示例代码：

<template>
  <div v-for="(item, index) in list" :key="index">{{ item }}</div>
</template>

<script>
import { reactive, watchEffect } from 'vue';

export default {
  setup() {
    const state = reactive({
      list: ['a', 'b', 'c'],
    });

    watchEffect(() => {
      console.log(state.list); // 监听 state.list 的变化
    });

    return {
      list: state.list,
    };
  },
};
</script>

使用 `watch` 监听 `v-for` 循环的数据也类似，只需要将 `watchEffect` 替换为 `watch` 即可。不过需要注意，由于 `watch` 是基于依赖项进行监听的，因此需要将 `v-for` 循环的数据作为依赖项传递给 `watch`。

<template>
  <div v-for="(item, index) in list" :key="index">{{ item }}</div>
</template>

<script>
import { reactive, watch } from 'vue';

export default {
  setup() {
    const state = reactive({
      list: ['a', 'b', 'c'],
    });

    watch(
      () => state.list, // 依赖项
      (newVal, oldVal) => {
        console.log(newVal); // 监听 state.list 的变化
      }
    );

    return {
      list: state.list,
    };
  },
};
</script>

需要注意的是，由于 Vue3 中的 `v-for` 指令已经被优化，因此默认情况下不会将循环变量暴露到上下文中。为了让循环变量能够在 `setup` 函数中使用，需要将其手动暴露到上下文中，例如上面示例代码中的 `return { list: state.list }`。