操作数组的坑，开发vue程序必须明白数据劫持的套路

当你使用vue开发前端程序时，必然会遇到操作数组的情况。数组的操作是前端开发中的常见操作，但它在vue中却容易出现一些坑。这些坑源于vue的数据劫持机制。

一、了解vue的数据劫持机制

vue的数据劫持机制，指的是vue通过Object.defineProperty()方法劫持对象的属性，并在属性发生改变时通知视图更新。也就是说，vue能够监听对象的属性变化，并做出相应的响应。

二、vue操作数组的正确姿势

vue中操作数组的正确姿势是：使用vue提供的api来操作数组，而不是直接修改数组。vue提供了push()、pop()、shift()、unshift()、splice()等api，用于操作数组。

直接修改数组可能会导致vue无法检测到数组的变化，从而导致视图没有更新。

三、vue操作数组的常见坑

1. 直接修改数组

这是vue操作数组最常见的坑。直接修改数组会导致vue无法检测到数组的变化，从而导致视图没有更新。

const arr = [1, 2, 3];
arr.push(4); // 直接修改数组

上面的代码直接修改了数组arr，vue无法检测到arr的变化，从而导致视图没有更新。

2. 使用非vue提供的api操作数组

vue提供了push()、pop()、shift()、unshift()、splice()等api，用于操作数组。使用这些api操作数组，vue可以检测到数组的变化，从而导致视图更新。

const arr = [1, 2, 3];
arr.push(4); // 使用vue提供的api操作数组

上面的代码使用vue提供的push()方法操作数组arr，vue可以检测到arr的变化，从而导致视图更新。

3. 在循环中修改数组

在循环中修改数组是一个非常常见的错误。在循环中修改数组可能会导致数组索引发生变化，从而导致vue无法检测到数组的变化。

const arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
  arr[i] = i + 1; // 在循环中修改数组
}

上面的代码在循环中修改了数组arr，可能会导致数组索引发生变化，从而导致vue无法检测到数组的变化。

4. 在子组件中修改数组

在子组件中修改数组也会导致vue无法检测到数组的变化。这是因为子组件和父组件是两个独立的vue实例，它们之间的数据是隔离的。

const parent = {
  data() {
    return {
      arr: [1, 2, 3],
    };
  },
};

const child = {
  data() {
    return {
      arr: parent.arr, // 在子组件中修改数组
    };
  },
};

上面的代码在子组件中修改了数组arr，但父组件无法检测到arr的变化。

四、如何避免vue操作数组的坑

1. 使用vue提供的api操作数组

vue提供了push()、pop()、shift()、unshift()、splice()等api，用于操作数组。使用这些api操作数组，vue可以检测到数组的变化，从而导致视图更新。

const arr = [1, 2, 3];
arr.push(4); // 使用vue提供的api操作数组

2. 在循环中使用索引而不是直接修改数组

在循环中使用索引而不是直接修改数组，可以避免数组索引发生变化，从而导致vue无法检测到数组的变化。

const arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
  arr[i] = arr[i] + 1; // 在循环中使用索引而不是直接修改数组
}

3. 在子组件中使用vuex管理数组

在子组件中使用vuex管理数组，可以避免数组在子组件和父组件之间的数据隔离问题。

const store = new Vuex.Store({
  state: {
    arr: [1, 2, 3],
  },
});

const parent = {
  store,
};

const child = {
  store,
};

上面的代码在子组件中使用vuex管理数组arr，父组件和子组件都可以通过store来访问和修改数组arr。