vue前端如何遍历后端数据V-FOR数据不刷新填坑记

导读想要实现一个StepsBar，类似进度条，可以把分步操作的表单按照步骤显示已完成、进行中、未处理的一个效果，大致原型如下图所示：设计思路这个比较简单，只需通....

想要实现一个StepsBar，类似进度条，可以把分步操作的表单按照步骤显示已完成、进行中、未处理的一个效果，大致原型如下图所示：

设计思路

这个比较简单，只需通过一个步骤对象进行初始化，并动态设置其步骤状态就好，在VUE中设计组件如下：

StepsBar中，通过一个Map对象管理步骤，并通过status区分了undone、active、done3种状态。

问题

为组件设置好Map对象steps，一共初始化了6个状态，用status进行了初始测试：

然后发现组件的数据发生变化时，V-FOR不更新，查了一下，是复杂对象的数据刷新机制问题。

解决方法

初步将key进行了一下动态跟随，没有效果，然后使用watch进行赋值也不行，最后在父组件中调用子组件的数据刷新函数，问题解决。

总结

Vue2中发布订阅模式使用的是Object.defineProperty()方法来监听数据的改变，而这个方法的缺陷就是一定情况下（如初始对象属性未定义、V-FOR、数组特定值变化）无法监听数据变动，在Vue3中该问题已解决，但在Vue2中大家务必要注意该问题的规避。

如果大家有更高效的方法，欢迎随时交流；如有不当之处，也敬请指正。

#头条创作挑战赛##前端#