Vue.set()。设置()美元引发的视图更新思考及注意事项 - 行业资讯

vue文档列表渲染中有条注意事项:

这里提到的两种情况实际改变了数据但是没有触发视图更新。

由此引出Vue.set(),先上文档API:

<代码>。美元组()和<代码> Vue.set() 本质方法一样,前者可以用在方法中使用。

设置方法调用时,可以触发页面全部重新渲染。

比如在vue中有个数据数组加勒比海盗:

　　　　//arr=(1、2、3) 　　arr [1]=' b ' 　　console.log (arr)//(1、2、3) 　　Vue.set(加勒比海盗2 ' c ') 　　console.log (arr)//(1, b, c) 　　　　

可以看出集触发了整个页面的重新渲染,连arr [1]=b的效果也被重新渲染了。

Vue.set()不光能修改数据,还能添加数据,弥补了Vue数组变异方法的不足。

可以使用集添加数据这一特性,解决一些常见问题。

例如循环出的元素点击应用选中样式,再点击取消选中样式。

　　　　　　& lt;部分v=跋钅苛斜怼北? 　　& lt; div: class=" [xxclass, item.checked& # 63;“检查”:“]”祝辞& lt;/div> 　　& lt;/section> 　　& lt; !——这里通过判断项的* *本身不存在的检查属性* *来决定是否增加签样式类——在　　　　

点击方法如下:

　　　　　　clickHandle:函数(项){ 　　如果类项目。检查===ㄒ濉?{ 　　这一点。美元集(项目,“检查”,真的) 　　其他}{ 　　项。检查=! item.checked 　　} 　　}//如果项目没有检查属性就用集方法添加,有则取反　　　　

这就利用设置使用了对象中本身不存在的检查属性来实现想要的功能。

至于视图更新时机可以看文档深入响应式原理
　　

以上所述是小编给大家介绍的Vue.set()。设置()美元引发的视图更新思考及注意事项,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!