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() 来手动触发响应式更新。

三、总结

• Vue.set() 是 Vue.js 内部提供的方法，用来手动触发响应式更新机制
• Vue.set() 接收三个参数：要添加响应式属性的目标对象、要添加响应式属性的对象键、要添加的响应式属性的值
• 当需要对一个嵌套对象的属性进行响应式监听时，才需要使用 Vue.set() 或者 this.$set() 来手动触发响应式更新。