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

Posted 2023-03-22

参考技术A

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

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

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

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