Vue中的set()方法
·
大家在写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
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
8
0- 0
已为社区贡献3条内容
所有评论(0)