Vue中$set的用法

什么情况下使用$set？

受现代 JavaScript 的限制，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性遍历执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

  姓名：{
    { name }}

    年龄：{
    {age}}

    性别：{
    {sex}}

    说明：{
    {info.content}}

在age及name都有get和set方法,但是在sex里面并没有这两个方法，因此，设置了sex值后vue并不会自动更新视图；

image

解决办法

数组：

this.$set(Array,index, newValue)

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
解决：用$set方法
当你修改数组的长度时，例如：vm.items.length = newLength
解决：vm.items.splice(newLength)

对象：

this.$set(Object, key, value)

有时你想向已有对象上添加一些属性，例如使用 Object.assign() 或 _.extend() 方法来添加属性。但是，添加到对象上的新属性不会触发更新。在这种情况下可以创建一个新的对象，让它包含原对象的属性和新的属性：

this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })