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

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

1 <div>
2     <ul>
3       <li v-for="item in list">
4         {{item}}
5       </li>
6     </ul>
7     <a @click="clickBtn" class="primary mr-2">刷新</a>
8 </div>

 1 data () {
 2     return {
 3       list: ['a', 'b', 'c'],
 4     }
 5   },
 6   methods: {
 7     clickBtn () {
 8       this.list[0] = 'x';
 9       console.log(this.list);
10     }
11 }

刷新后效果：

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

　target:修改的对象

　key:属性

　value:修改的值

 1 data () {
 2     return {
 3       list: ['a', 'b', 'c']
 4     }
 5   },
 6   methods: {
 7     clickBtn () {
 8       this.$set(this.list, 0, 'x')
 9     }
10 }

刷新后效果：

复杂一点的数据赋值事例

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

 1 data () {
 2     return {
 3       objList: {
 4         a: ['a', 'b', 'c'],
 5         b: 1,
 6         c: 2
 7       }
 8     }
 9   },
10   methods: {
11     clickBtn () {
12       this.$set(this.objList['a'], 0, 'e')
13     }
14 }