大家在写vue前后端交互时不知道有没有碰到过一个问题，就是在data里面定义一个变量，然后从后台获取数据后赋值给这个变量，但是对这个变量里的对象的属性或者数组的元素进行修改时，发现数据能修改，但视图不更新！

原因：vue管理的变量必须生成了get和set方法，如data中定义的变量，虽然直接通过赋值的对象有get、set方法，但是对象里面的属性或者元素并没有get和set方法，所以vue不会根据他的属性改变去更新视图

例子如下：

循环遍历变量对象中的数组

 

定义一个没有内容的变量

 

页面初始化时，构造一个数据，并打印结果查看listData.data中的属性是否有get和set方法

 

打印结果很明显，data和name都有相应的get和set方法，但是data数组里面的元素就没有了

 

此时，写一个方法去改变listData.data的元素值，并打印结果查看

 

很明显，视图没有更新，但是打印结果中的元素值已经改变

 

解决办法：

Vue提供了两种方法去解决

1、Vue.set()

2、this.$set()

两者区别在于，组件中可以直接使用this.$set()，如果使用Vue.set()，就要import Vue

参数有三个，第一个参数是对象或数组，如果是数组，第二个参数就是数组中的下标，如果是对象，第二个参数就是属性名，第三个参数是修改的值

 

修改changeListData方法，如下

 

查看结果，发现视图已更新

 

参考文档：https://cn.vuejs.org/v2/guide/reactivity.html
————————————————
版权声明：本文为CSDN博主「kshon」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/kshon/article/details/103012618