VUE学习----this.$set()

语法：

this.$set(target, propertyName/index, value)

• target: 要更改的数据源（可以是一个对象或者数组）
• propertyName/index: 要更改的具体数据 （索引）
• value: 重新赋的值(any)

官方解释：

向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。this.$set()用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性

简而言之

this.$set()可以触发视图更新

举例说明：

当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。

<template>
 <div id="app">
  <p v-for="item in items" :key="item.id">{{item.message}}</p>
  <button class="btn" @click="handClick()">更改数据</button>
 </div>
</template>

<script>
export default {
 name: 'App',
 data () {
  return {
   items: [
        { message: "one", id: "1" },
        { message: "two", id: "2" },
        { message: "three", id: "3" }
      ]
  }
 },
 mounted () {
   this.items[0] = { message : 'first', id : '4'} //此时对象的值更改了，但是视图没有更新
  // let art = {message: 'first', id: "4"}
  // this.$set(this.items, 0, art) //$set 可以触发更新视图
 },
 methods: {
  handClick(){
   let change = this.items[0]
   change.message = "shen"
   this.$set(this.items, 0, change)
  }
 }
}
</script>