vue3 循环迭代修改 reactive 值

在 Vue3 中，我们可以使用 reactive 函数创建一个响应式对象。要循环迭代修改这个对象的属性，可以使用 for...in 或 Object.keys() 方法来遍历对象的属性，然后使用 reactive 函数返回的对象上的属性访问器来修改属性值。

例如，假设我们有以下响应式对象：

import { reactive } from 'vue';

const state = reactive({
  name: 'Tom',
  age: 20,
  gender: 'male'
});

我们可以使用 for...in 循环来遍历对象的属性并修改它们的值：

for (let key in state) {
  state[key] = 'modified';
}

或者，我们可以使用 Object.keys() 方法来获取对象的所有属性，并使用 forEach 方法来遍历它们：

Object.keys(state).forEach(key => {
  state[key] = 'modified';
});

无论使用哪种方法，都要记得使用 reactive 函数返回的对象上的属性访问器来修改属性值，这样才能确保修改后的值也是响应式的