引文
vue文档列表渲染中有条注意事项:
这里提到的两种情况实际改变了数据但是没有触发视图更新。
由此引出Vue.set(),先上文档API:
ottom: 0px; text-align: center; padding-top: 0px; padding-left: 20px; margin: 0px; line-height: 30px; padding-right: 0px"> | ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">ottom: 0px; text-align: left; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"> | ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">ottom: 0px; text-align: left; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"> | ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">
this.$set()
和Vue.set()
本质方法一样,前者可以用在methods中使用。
比如在vue中有个data数组arr:
rush:js;">
//arr=[1,2,3]
arr[1]='b'
console.log(arr) // [1,3]
Vue.set(arr,'c')
console.log(arr) // [1,b,c]
可以看出set触发了整个页面的重新渲染,连arr[1]='b'的效果也被重新渲染了。
使用set添加数据
Vue.set()不光能修改数据,还能添加数据,弥补了Vue数组变异方法的不足。
例如循环出的元素点击应用选中样式,再点击取消选中样式。
rush:js;">
点击方法如下:
rush:js;">
clickHandle: function(item){
if(typeof item.checked === 'undefined'){
this.$set(item,'checked',true)
} else {
item.checked = !item.checked
}
}
// 如果item没有checked属性就用set方法添加,有则取反
这就利用set使用了对象中本身不存在的checked属性来实现想要的功能。
深入响应式原理
总结
以上所述是小编给大家介绍的Vue.set() this.$set()引发的视图更新思考及注意事项。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。