$set之深入理解

Vue中的$set的使用

之前看过vue文档，看过$set的方法的使用以及相关的原理，但是并没有很深入的get到它的奥妙，最近项目中遇到问题，很小的点但却让很深刻的认识了$set,果然实践是硬道理啊。。。，小白受教了

Vue.set(target, key, value)

• 参数
  • {Object | Array} target
  • {string | number} key
  • {any} value
• 返回值： 设置的值
• 用法

向响应式的对象中添加一个属性，并确保这个新的属性同样也是响应式的，同时触发相应视图的更新。$set必须用于向响应式的对象中添加新的属性，因为Vue无法探测普通的新增属性。对于这句话，我的理解可以看下面的例子：

例如：

<template>
  <div class="hello">
    <p>我跑步{{hooby.running}}</p>
    <p>我的唱歌水平{{hooby.sing}}</p>
    <p><button @click="handleClick">我是按钮</button></p>
  </div>
</template>
<script>

export default {
  name: 'HelloWorld',
  data () {
    return  {
      name: 'ly',
      hooby: {}
    }
  },
  created () {
    this.setAtrr()
  },
  methods: {
   setAtrr () {
    let obj = {}
    this.hooby.running = '快'
    this.$set(this.hooby, 'sing', '一般')
    this.$set(obj, 'a', 1)
    console.log(this.$data, obj)
   },
   handleClick () {
    this.hooby.running = '慢'
    console.log(this.$data)
   }
  }
}
</script>

打印结果：

红框与绿框分别为利用this.hooby.running = '快'给hooby新增running，this.$set(this.hooby, 'sing', '一般')给hooby新增sing，从图中可看出running仅为键值属性，而sing为响应式属性，从视图中我们点击按钮触发handleClick发现即使running属性值改变了，但是视图并没有更新，下图所示：

另一方面，在为定义的普通属性obj上使用$set方法即使赋值生效，但并未将其新增属性转换为响应式属性，因为本身obj也不是响应式的对象。关于这里不明白的可以看下vue响应式原理

注意项： 注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。看例子

 this.$set(this.$data, 'age', 24)

加了上述代码直接报错，错误信息不明觉厉，所以在实际项目中所需要的属性最好提前在根数据对象data中写好。

---

最后小白也有点不太清楚的地方在于$set作用于数组中，文档中的例子小白试了后并没有呈现出文档中所描述的那样，也有可能vue版本升级后，没有更新文档。。。若有网友有更深入的见解可以下方留言，小白虚心接受。