Vue数组或对象修改或新增值后更新视图的问题(set方法)

前言：

        大家都知道vue是双向绑定响应式更新视图的，这个自动更新视图主要是针对在data里面存在的属性或者对象的键，比如有个data:{ test : 'test'};这里修改 test的值就可以自动更新相关的视图，但是如果你后来添加一个进去然后修改 是没法自动更新的，这就涉及vue的双向绑定原理啦，vue 默认的是给data 属性  添加到侦察器（发布者——订阅者模式）上观察，如果有变化就响应视图更新，后面新增的属性和对象是没有做这个添加到观察器的这步操作的，需要手动添加，就需要用到他的set方法来。

数组：

1.数组的splice方法
this.data.splice(index, 1, {
  isSelf:true,
  name:'test',
  text:'test',
  time:'9:14:21'
})

2.set方法

可以通过
Vue.set(this.data, index, this.data[index]);

或者

this.$set(this.data, index, this.data[index]);

 

对象

set方法

Vue.set(this.data,'sex', '男')

或
比如data有个info属性 

data () {
  return {
    info: {
      content: 'test'
    }
  }
},

var key = 'content'; //键  这里的键是info.content   可以依次推出怎么修改其他属性的值（方法同下）
this.$set('info.'+key, value);
 或
this.$set('info.content', value);