vue的data修改之后界面未改变或错乱(各种情况)

作者: 码农梦醒 | 来源:发表于2021-05-16 08:54 被阅读0次

对象的某个子孙属性修改后, 界面未改变

原因: vue有时会无法监听到对象的子孙属性变化, 但一定会监听到data本身的变化
解决方案: 直接更新整个对象

// 原始更新方式可能为:
this.obj.fieldName = '新值';

// 改为如下方式
this.obj = {...this.obj, fieldName:'新值'}

在created方法, 使用vuex的getter更新data, 界面未改变

情景模拟: getter中属性的填充依赖于一个ajax请求结果
原因: 组件的created方法执行时, vuex的getter尚未从ajax中获取到结果
解决方案: 在组件中使用计算属性，而非在creaated方法进行初始化

原因: 因为key使用的是循环时的index值, 所以当删除非最后一项时, key值实际没变,所以vue实际执行的是更新dom节点,而非删除指定dom节点

解决方案:使用唯一key, 避免使用循环时的index值作为key

本文标题：vue的data修改之后界面未改变或错乱(各种情况)

本文链接：https://www.haomeiwen.com/subject/kwpljltx.html