Vue 解决数据更新视图不更新问题$set()方法
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
————————————————
版权声明:本文为CSDN博主「kshon」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/kshon/article/details/103012618
更多推荐
所有评论(0)