浅谈Vue.set实际上是什么

在Vue.js中，我们通常使用双向数据绑定的方式更新视图，但是，在某些情况下，我们需要手动更改对象或数组的元素来更新视图，此时就需要用到Vue.set方法。本文将详细讲解Vue.set的实际用法和含义，帮助您更好地了解Vue.js的数据绑定机制。

Vue.set的作用

Vue.set是Vue.js框架中用来改变被Vue.js监听的对象或数组的特定属性的方法。它可以让Vue.js检测到数据的变化并及时完成视图的更新。

Vue.set主要用于解决Vue.js无法监听到对象或数组某个特定属性的更改问题，使用该方法后，Vue.js会将这个变更通知给依赖这个对象或数组的视图，并重新渲染这个视图。

Vue.set用法示例1：更改对象的属性

<template>
  <div>
    <p>姓名：{{ person.name }}</p>
    <p>年龄：{{ person.age }}</p>
    <button @click="changePerson">更改年龄</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      person: {
        name: 'Alice',
        age: 18
      }
    }
  },
  methods: {
    changePerson() {
      // 将person对象的age属性改为20
      Vue.set(this.person, 'age', 20);
    }
  }
}
</script>

在这个示例中，我们通过Vue.set方法来更改了person对象的age属性。在普通情况下，我们只需要在changePerson方法中将person.age直接改为20即可，但这种做法并不能让Vue.js监测到数据的变化。而使用Vue.set方法后，Vue.js可以及时检测到数据的变化，并更新视图。

Vue.set用法示例2：更改数组的元素

<template>
  <ul>
    <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    <button @click="changeList">更改第二个元素</button>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: ['apple', 'banana', 'orange']
    }
  },
  methods: {
    changeList() {
      // 将数组list的第二个元素改为'pear'
      Vue.set(this.list, 1, 'pear');
    }
  }
}
</script>

在这个示例中，我们使用Vue.set方法来改变了数组list的第二个元素，即将'banana'改为'pear'。同样，普通的数组元素更改方法并不能让Vue.js监测到数据的变化，而Vue.set方法可以让Vue.js及时检测到数据的变化并更新视图。