vue 数据动态响应(Vue.set方法)

当vue实例已经创建完成，需要对实例进行赋值修改是，视图没有更新；
例如：修改数组其中一个值的时候，数据已经修改，但视图不更新；

<div>
    <ul>
      <li v-for="item in list">
        {{item}}
      </li>
    </ul>
    <a @click="clickBtn" class="primary mr-2">刷新</a>
</div>

data () {
    return {
      list: ['a', 'b', 'c'],
    }
  },
  methods: {
    clickBtn () {
      this.list[0] = 'x';
      console.log(this.list);
    }
}

刷新后效果：

Vue.set(target,key,value) 方法

　target:修改的对象

　key:属性

　value:修改的值

data () {
    return {
      list: ['a', 'b', 'c']
    }
  },
  methods: {
    clickBtn () {
      this.$set(this.list, 0, 'x')
    }
}

刷新后效果：

复杂一点的数据赋值事例

<div>
    <ul>
      <li v-for="(item,key) in objList">
        {{key}}:{{item}}
      </li>
    </ul>
    <a @click="clickBtn" class="primary mr-2">刷新</a>
</div>

data () {
    return {
      objList: {
        a: ['a', 'b', 'c'],
        b: 1,
        c: 2
      }
    }
  },
  methods: {
    clickBtn () {
      this.$set(this.objList['a'], 0, 'e')
    }
}