vue中$set的使用

vue中视图更改主要依赖于数据的驱动，这是vue最大的特点，在vue的使用中，你只需更改数据，数据驱动会导致视图更新，而无需再手动去修改dom。

数组中的数据修改

如下例子：

<template>
  <div>
    <ul v-for="item of items" :key="item.id">
      <li>{{ item.message }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Test',
  data() {
    return {
      items: [
        { message: '1', id: 1 },
        { message: '2', id: 2 },
        { message: '3', id: 3 }
      ]
    }
  }
}
</script>

运行结果如下：

当我给数组新增数据的时候，进行如下操作

 methods: {
    handleChangeArr() {
      this.items.push({ message: 4, id: 4 })
    }
  }

数组常用的变异方法：

push 末尾加一项
pop 末尾减一项
unshift 头部加一项
shift 头部减一项
splice 向/从数组中添加/删除项目
sort 排序
reverse 翻转数组中数据的顺序

splice(index,howmany,item1,…,itemx)

index表示添加或删除的位置，必选
howmay 添加或删除的个数，可选，当省略时，默认删除起始项后面所以的项，
item1,…,itemx 添加的内容

对象中的数据修改

来看下面的例子

<template>
  <div class="app-container">
    <p>{{ items.name }}</p>
    <p>{{ items.sex }}</p>
    <p>{{ items.age }}</p>
    <p> {{ items.hobby }} </p>
    <el-button @click="handleChangeBtn">修改数据</el-button>
  </div>
</template>

<script>
export default {
  name: 'Test',
  data() {
    return {
      items: { name: 'lisa', sex: '女', age: 20 }
    }
  },
  methods: {
    handleChangeBtn() {
      this.items.hobby = 'sing'
      console.log(this.items)
    }
  }
}
</script>

运行结果如下：

点击修改数据按钮后，对象中新增了一条属性，但视图并没有发生改变，在vue文档中有这样一句话，

如果在实例创建之后添加新的属性到实例上，它不会触发视图更新

vue中是靠数据驱动来实现视图更新的，尽量减少直接操作dom，那么这种情况我们该怎么办呢？

vue.$set

Vue.set( target, propertyName/index, value )

target {Object | Array} 对象或数组

propertyName/index {string | number} 属性名/位置

value {any} 值

数组中使用
vue.$set(array,index,{key:value})

对象中使用

vue.$set(object,key,value)

使用$set来修改对象中的属性值

 methods: {
    handleChangeBtn() {
      this.$set(this.items, 'hobby', 'sing')
      console.log(this.items)
    }
  }

运行结果如下：

视图更新啦~