一、vue.$set（）方法

了解过 vue3 的大概都知道，vue3 中的 ref 和 reactive 函数可以把数据变成响应式，那么，vue2 中有没有呢？当然有啦，这就要说到 vue2 中的 vue.$set方法，以下是官方解释，我们先来读一读：

二、vue.$set（） 使用示例

• 参数说明：
  • target ：要更改的数据源（可以是对象或数组）
  • propertyName/index：属性名或索引
  • value：新值

<template>
  <div>
    <button @click="changeHobby">改值</button>
    <button @click="addHobby">增值</button>
    <br />
    <div v-for="item in list" :key="item.code">
      <input type="checkbox" v-model="item.state" />{{ item.hobby }}
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        { hobby: '看书', code: 100 },
        { hobby: '写字', code: 101 },
        { hobby: '敲代码', code: 102 }
      ]
    }
  },
  methods: {
    // ◆改值
    changeHobby () {
      // this.list[0] = { hobby: '玩魔方', code: 1 }// 视图没有发生变化
      this.$set(this.list, 2, { hobby: '玩魔方' })// 视图立刻发生了变化
      console.log(this.list)
    },
    // ◆增值
    addHobby () {
      this.$set(this.list, 3, { hobby: '打豆豆', code: 103 })// 点击按钮，视图新增了一条
      console.log(this.list)
    }
  }
}
</script>