Vue如何用this.$set改变数组里的某个值

下面是关于“Vue如何用this.$set改变数组里的某个值”的完整攻略：

简介

Vue提供了一些方便的方法来让我们更好地处理数据。在使用 Vue 开发过程中，有时我们需要改变数组某个值时，需要用到 this.$set 方法。

使用方法

直接使用 $set 方法

我们可以直接使用 this.$set 方法来改变数组中的某个值。使用时需要传入三个参数，第一个参数是需要修改的数组，第二个参数是数组中需要修改的元素下标，第三个参数是需要修改的值。

<template>
  <div>
    <button @click="change">点击我改变数组的值</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ['Vue', 'React', 'Angular']
    };
  },
  methods: {
    change() {
      // 使用this.$set修改数组
      this.$set(this.arr, 1, 'Webpack');
    }
  }
};
</script>

使用 Vue.set 方法

Vue 对象也提供了一个 Vue.set 方法，与 this.$set 方法的功能类似。使用时需要传入三个参数，第一个参数是需要修改的数据对象，第二个参数是需要修改的属性名称，第三个参数是需要修改的值。

<template>
  <div>
    <button @click="change">点击我改变用户的姓名</button>
    <p>用户姓名：{{ user.name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: 'Tom',
        age: 18
      }
    };
  },
  methods: {
    change() {
      Vue.set(this.user, 'name', 'Lucy');
    }
  }
};
</script>