vue3 reactive 数组

作者：淡情发布日期:2025-11-20 浏览:42

import { reactive } from 'vue';

// 创建一个响应式的数组
const state = reactive({
  items: [1, 2, 3]
});

// 修改数组中的元素
state.items[0] = 4; // 这种方式不会触发视图更新

// 正确的修改方式
state.items.splice(0, 1, 4); // 使用 splice 方法可以触发视图更新

// 添加新元素
state.items.push(5); // push 方法也可以触发视图更新

console.log(state.items); // 输出: [4, 2, 3, 5]

// 解释说明：
// 1. `reactive` 函数用于创建一个响应式对象。
// 2. 直接通过索引修改数组元素（如 `state.items[0] = 4`）不会触发视图更新，因为 Vue 无法检测到这种变化。
// 3. 使用数组的变异方法（如 `splice`, `push`, `pop`, `shift`, `unshift`, `sort`, `reverse`）可以触发视图更新。
// 4. 如果需要替换整个数组，可以使用 `state.items = [...newItems]`，这也会触发视图更新。

上一篇：vue跨域访问接口

下一篇：vue3写法