Vue 中如何修改 data 值

在 Vue 开发过程中，修改 data 中的值是一项极为常见的操作。掌握正确的修改方式，对于构建响应式且稳定的应用程序至关重要。

Vue 实例的 data 选项是一个函数，它返回一个对象，这个对象中的所有属性都会被 Vue 响应式系统追踪。当这些属性的值发生变化时，Vue 会自动更新与之绑定的 DOM 元素。

最常规的方式是在方法中直接修改。例如，我们有一个简单的 Vue 组件：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">修改信息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '初始信息'
    }
  },
  methods: {
    changeMessage() {
      this.message = '修改后的信息';
    }
  }
}
</script>

在上述代码中，通过 this.message = '修改后的信息'; 直接在 changeMessage 方法里修改了 message 的值，Vue 会自动更新 DOM 中显示的 message 内容。

然而，当涉及到对象或数组的修改时，需要特别注意。比如修改对象的某个属性，直接 this.obj.property = newValue 这种方式在某些情况下可能不会触发响应式更新。此时，应该使用 Vue.set() 方法。示例如下：

<template>
  <div>
    <p>{{ user.name }}</p>
    <button @click="updateUserName">更新名字</button>
  </div>
</template>

<script>
import Vue from 'vue';
export default {
  data() {
    return {
      user: {
        name: '张三'
      }
    }
  },
  methods: {
    updateUserName() {
      Vue.set(this.user, 'name', '李四');
    }
  }
}
</script>

对于数组，直接使用数组的原生方法（如 push、pop 等），Vue 能检测到变化并更新视图。但如果通过索引直接修改数组元素，比如 this.array[index] = newValue，则不会触发响应式更新。正确的做法是使用 Vue.set() 或者数组的变异方法。例如：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in numbers" :key="index">{{ item }}</li>
    </ul>
    <button @click="updateNumber">更新数字</button>
  </div>
</template>

<script>
import Vue from 'vue';
export default {
  data() {
    return {
      numbers: [1, 2, 3]
    }
  },
  methods: {
    updateNumber() {
      Vue.set(this.numbers, 1, 4);
      // 或者使用变异方法
      // this.numbers.splice(1, 1, 4);
    }
  }
}
</script>

在 Vue 中修改 data 值，要依据数据类型和结构，选择合适的方法，以确保数据的响应式更新能正确触发，从而让应用程序的视图与数据保持一致。