Vue.set()对此导致视图更新的思考和注意事项 $set()

行情

vue文档列表的呈现中有一个注释：

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

这就引出了Vue.set()。首先，转到文档API:

这个。$set()与Vue.set()相同，前者可以用在方法中。

当调用set方法时，它可以触发所有页面重新呈现。

例如，vue中有一个数据数组arr:

//arr=[1，2，3]arr[1]=' b ' console . log(arr)//[1，2，3] vue.set (arr，2，' c') console.log (arr)//[1，b，c]

使用集合添加数据

Vue.set()不仅可以修改数据，还可以添加数据，弥补了Vue数组变异方法的不足。

您可以使用set添加数据来解决一些常见问题。

例如，单击“应用”为循环显示的元素选择样式，然后单击“取消选中”样式。

第五节-for='列表中的项目' div :class='['xxclass '，item.checked '已选中' :'']'/div/section！-这里通过判断项目本身不存在的勾选属性* *来决定是否添加勾选样式类-点击方式如下：

单击clickHandle:函数(项){ if(item . checked==' undefined '){ this。$set(item，“checked”，true) } else { item.checked=！Item.checked }}//如果该项目没有选中的属性，则用set方法添加，如果有，则反转。这将使用集合来使用对象本身中不存在的选中属性来实现所需的功能。

深度响应原则

至于视图更新的时机，可以看看文档深度响应的原理

摘要

以上是Vue.set()对此引起的视图更新的思考和注意事项。$set()由边肖推出。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！