vue中Vue.set()的使用以及对其进行深入解析

Vue.set() 是 Vue.js 内部提供的一种便捷的方法，用来在一些特定的场景下，手动触发 Vue.js 的响应式更新机制。

一、Vue.set() 的基本使用

Vue.set() 接收三个参数：

Vue.set(obj, prop, value)

其中：

obj：要添加响应式属性的目标对象
prop：要添加响应式属性的对象键
value：要添加的响应式属性的值

实际上，Vue.set() 做的工作就是：
1. 判断 obj 是否是响应式对象，如果不是，则直接返回，不做任何操作
2. 判断要添加的属性 prop 是否已经存在，如果已经存在，则直接赋值，不会触发响应式更新
3. 如果要添加的属性 prop 不存在，则调用 Vue.js 内部方法，将其加入响应式监听列表，并触发响应式更新

例如：

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

<script>
export default {
  data () {
    return {
      obj: {
        message: 'hello'
      }
    }
  },
  methods: {
    changeMessage () {
      Vue.set(this.obj, 'message', 'world')
    }
  }
}
</script>

此时，点击按钮后，页面将显示“world”。

二、Vue.set() 的深入解析

Vue.js 默认只对对象的第一层属性进行响应式监听，当一个对象属性值发生变化时，才会触发更新。但是，如果需要对一个嵌套对象的属性进行响应式监听，就需要使用 Vue.set() 或者 this.$set() 了。

例如：

<template>
  <div>
    <p>{{ book.name }}</p>
    <p>{{ book.author }}</p>
    <button @click="changeBook">更改book的内容</button>
  </div>
</template>

<script>
const book = {
  name: 'Vue.js实战',
  author: {
    name: '作者A',
    age: 30
  }
}

export default {
  data () {
    return {
      book
    }
  },
  methods: {
    changeBook () {
      Vue.set(this.book.author, 'age', 31)
    }
  }
}
</script>

此时，更改 book 对象的嵌套属性时，需要使用 Vue.set() 或者 this.$set() 来手动触发响应式更新。