♥ vue中$set用法详细讲解

1、认识

在vue中，并不是任何时候数据都是双向绑定的。

官方文档介绍

在这里插入图片描述

使用场景

当数据没有被双向绑定的时候，我们就需要使用set了`

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

2、$set用法

数据没有被双向绑定我们可以使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名


 - this.$set(原数组, 索引值, 需要赋的值)

length的问题还需要用splice方法

 - vm.items.splice(newLength)

set为解决双向绑定失效，所以什么时候双向绑定失效就用它

当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
由于 JavaScript 的限制，Vue不能检测对象属性的添加或删除

var vm= new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 现在是响应式的

vm.b = 2
// `vm.b` 不是响应式的

vm.a是响应式的， vm.b不是响应式的

简单来说

对象中原来有这个key=> 双向绑定
对象中原来没有这个key，新增的key=>不是双向绑定


vm.$set(con.userProfile, 'age', 27)

进一步使用

如果我们添加的属性很多条，可能就需要写一个循环来多次set
你也可能使用Object.assign，这里有一些需要注意的地方。
如果你想添加新的响应式属性，下面这样写是不行的。

Object.assign(vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

这样才是正确的

vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

3、原理

————————————————————————————

由于 Vue 会在初始化实例时进行双向数据绑定，使用Object.defineProperty()对属性遍历添加 getter/setter 方法，所以属性必须在 data 对象上存在时才能进行上述过程，这样才能让它是响应的。如果要给对象添加新的属性，此时新属性没有进行过上述过程，不是响应式的，所以会出想数据变化，页面不变的情况。此时需要用到$set。