请教一个 Vue 动态组件问题

2023-05-08 16:03:41 +08:00
 nu1l

Vue 项目中,使用 v-for="data in 后台返回的数据"<component :is="data.xxx" :prop1="data.prop1"> 方式动态渲染组件。 更新数据后,is 属性值未改变的组件没有刷新

案例代码

目前想到的解决方案是:刷新数据之前,清空之前数据的所有属性,之后在 nextTick() 中重新赋值。 但是这种方式可能导致滚动条位置变动

想请教下大佬们有没有什么优雅的解决方案?

1513 次点击
所在节点    Vue.js
7 条回复
MMDeJeVS3GtMVLeu
2023-05-08 16:16:38 +08:00
props 直接使用,不要再 ref 一遍
MMDeJeVS3GtMVLeu
2023-05-08 16:17:13 +08:00
https://play.vuejs.org/#__DEV__eNrtV1tPG0cU/isjv8QgZy1Q+2IZ0kjtQyulqZRKfcA8ON4x2QK7q901DbIsuSmBmhgHNSlQc2lJ0pCqXAsJxubyY7qzaz/lL/TMzF7tUFxQW1WqkbDPmXOb75w5cyYfuamqwkQORxKRpJ7RJNVAOjZy6mBKRkgaVxXNQHmk4WwMKfItJScbWIwhGd83Ppcyo6iAspoyjq6BhWsBjS8UbRRrzpoQ5yR1ExS6Y+RELBuelEM7YlQwo8i6gcS0kUYDNIZovtBD+eG1PljMUxZCI5qSUxMuhZCI9UwCpSJk66X99MdUJOYu5HSs6Qk05NLI16EfY1LFVI8HHtBjRsFnwAf/yOlxpkGOfzJrJdBgQfqf9Ags978X48EH+KKoYT0cihMQykjGJLNZXjTrm9SmbmgYG5Rn1st2ZScVQYV2T52a/e9SBSYqhDWHQ3QhsOl3guPkq32vHjwpw/9z4bFWK2R5OaxC1zk873ewu0DHrM1arw/DW2w1pqzXLxk6Fym2gcM1LwbHJYb5D0azf+Ha7O+iNg9/Nuv1v682ffDtyiOz/vSc2uyD2rxEaR6dkcO1MISc13cB+lyqDX2PecXSvMS53fqBPNw6D5tQYXaLjXW4R1b2wxvkvIuw4VJt2HjMq1Sm18Oj0R40MOiiQaERJtJjOQz1+smd258KalrTcZT9hBAkeUTKTkZZt+1hLdhvxPHeXmakF5Hdad6sm9un9sm2WavzM8CX4/7JyKnAxx/yvn7ZQPp5IDQI2iri4L/SsCola/9Va2aWzFesreekVuMyt+9+iTOGMIondabMffQIWUX7KJ25Fx2lMYh4DBs4EMPQ6LDjw73wwrBdLl4OHUcklJwLkezrQBKKEBtXBNLJ6H8GSC/ec4Hk2HwliSPYuJVW/R7sXFnO0XO6BNdMxvn4A4MPEAYeV8egRtkYlLzXz74Ruo7sB0dkpuFUMLLKpdZ32wDR2+Oyvblp1orW6rr1/a41t239tm6tlJrPfrWWD6yF3d+LD8gyjAZ1TpLSHGjZjSmz8cbea5C1R/ZyjcyXuZvkXc13GJBpFavNsxmOFbtOBHZXDA0LtPEh8u0La2Gr0wR3ycMCxxCrVXto/1InO0fNvXW7OmWVihAr2Vuzihvk8Y5ZO7AW3zQ3npPp/dbiduvZEqiYJ9PW0g45ecLtNE+/IS+qIEatNapk9hXs3DyZo9V6XCWPl0h5IRxJMu7AmBSlCSc2vi1oynm6pxt8UzcEejUWWDaTcVfYMwMMNHEd6m0gFYnS/ceQJIv4fg98dUAD3TIBtQqilBRot09FHOfJjAKDqExHUJSQdJDxKmaISVNQh6kFSc4qrgnqAUwk4562a87bpx9yzjAUGX2QGYOKpwa8vucFwVlcj4vTAjQ6VL2D7mkyTptiMu4VbiTmDmjueB+oaXDgJyGpq2l5kI/I5tm69fUOnAXKcpZ9SfiQjSdkfo5mDODOKgxRxHPF148OWqdTb4+rrgBcoN66Dw38vsmvUA9dLs2ZDGBHIARqYINAnPdgcU27LwuHbn+A5EWclWT8maaoeoy+L9pfM34vUakM9JGARtTpKTTuhNMX227GuKNNRZwXDDMkUAaIeT0HkhWI8c+SRVZ2yWrRz4x3FAA5egCoZb/ogSnQocIrGtgPmzHyeXepAA8Id8jgXE515uyv5eAfA9cpmY+7wNh/h3ZxHthY/v95+HfOQ+EPl+vLSg==
MMDeJeVS3GtMVLeu
2023-05-08 16:23:56 +08:00
wangtian2020
2023-05-08 16:25:37 +08:00
https://play.vuejs.org/#__DEV__eNrtV1tPG0cU/isjv8QgZy1Q+2IZ0kjtQyulqZRKfcA8ON4x2QK7q901DbIsuSmBmhgHNSlQc2lJ0pCqXAsJxubyY7qzaz/lL/TMzF7tUFNQW1WqkbDPmXOb75w5cyYfuamqwkQORxKRpJ7RJNVAOjZy6mBKRkgaVxXNQHmk4WwMKfItJScbWIwhGd83Ppcyo6iAspoyjq6BhWsBjS8UbRRrzpoQ5yR1ExS6Y+RELBuelEM7YlQwo8i6gcS0kUYDNIZovtBD+eG1PljMUxZCI5qSUxMuhZCI9UwCpSJk66X99MdUJOYu5HSs6Qk05NLI16EfY1LFVI8HHtBjRsFnwAf/yOlxpkGOfzJrJdBgQfqf9Ags978X48EH+KKoYT0cihMQykjGJLNZXjTrm9SmbmgYG5Rn1st2ZScVQYV2T52a/e9SBSYqhDWHQ3QhsOl3guPkq32vHjwpw/9z4bFWK2R5OaxC1zk873ewL4COWZu1Xh+Gt9hqTFmvXzJ0uim2gcM1u4PjEsP8B6PZv3Bt9l+gNg9/Nuv1v682ffDtyiOz/vSc2uyD2rxEaR6dkcO1MISc19cFfS7Vhr7HvGJpXuLcbv1AHm6dh02oMC+KjXW4R1b2wxvkvG7YcKk2bDzmVSrT6+HRaA8aGHTRoNAIE+mxHIZ6/eTO7U8FNa3pOMp+QgiSPCJlJ6Os2/awFuw34nhvLzPSi8juNG/Wze1T+2TbrNX5GeDLcf9k5FTg4w95X79sIP08EBoEbRVx8F9pWJWStf+qNTNL5ivW1nNSq3GZ23e/xBlDGMWTOlPmPnqErKJ9lM7ci47SGEQ8hg0ciGFodNjx4V54YdguFy+HjiMSSk5XJPs6kIQixMYVgXQy+p8B0ov3XCA5Nl9J4gg2bqVVvwc7V5Zz9JwuwTWTcT7+wOADhIHH1TGoUTYGJe/1s2+EriP7wRGZaTgVjKxyqfXdNkD09rhsb26ataK1um59v2vNbVu/rVsrpeazX63lA2th9/fiA7IMo0Gdk6Q0B1p2Y8psvLH3GmTtkb1cI/Nl7iZ5V/MdBmRaxWrzbIZjxa4Tgd0VQ8MCbXyIfPvCWtjqNMFd8rDAMcRq1R7av9TJzlFzb92uTlmlIsRK9tas4gZ5vGPWDqzFN82N52R6v7W43Xq2BCrmybS1tENOnnA7zdNvyIsqiFFrjSqZfQU7N0/maLUeV8njJVJeCEeSjDswJkVpwomNbwuacp7u6Qbf1A2BXo0Fls1k3BX2zAADTVyHehtIRaJ0/zEkySK+3wNfHdBAt0xArYIoJQXa7VMRx3kyo8AgKtMRFCUkHWS8ihli0hTUYWpBkrOKa4J6ABPJuKftmvP26YecMwxFRh9kxqDiqQGv73lBcBbX4+K0AI0OVe+ge5qM06aYjHuFG4m5A5o73gdqGhz4SUjqaloe5COyebZufb0DZ4GynGVfEj5k4wmZn6MZA7izCkMU8Vzx9aOD1unU2+OqKwAXqLfuQwO/b/Ir1EOXS3MmA9gRCIEa2CAQ5z1YXNPuy8Kh2x8geRFnJRl/pimqHqPvi/bXjN9LVCoDfSSgEXV6Co074fTF8M3IVem683xhVgTKABmv4UCmAgH+WabIyi5ZLfpp8c4BwEar30HvY3DgFz4wBTpYeIUDgbE5I593lwrwiHAHDc7lVGfe/loe/hmAA7vuhrP/EL3AgWBz+f8H4l84EIU/ANuJzJY=

原因,你 :key="user.name" 访问的啥自己看看吧
wangtian2020
2023-05-08 16:26:24 +08:00
@wangtian2020 我复制错网址了

https://play.vuejs.org/#__DEV__eNrtV1tPG0cU/isjv9ggZy3c9sUypJHah1ZKUymV+oB5cLxjsgV2V7trGmRZclMCNTEOalKg5tKSpCFVuRYSjM3lx3RnbT/lL/TMzN58CQSKWlWKJWt3zpxz5sx3vjlzNhu4oarCeAYHYoG4ntIk1UA6NjLqQEJGSBpTFc1AWQ2nw0iRbyoZ2cBiGMn4nvGVlBrJobSmjKEg2Ad9+l8r2gjW7Dkhwod0Eb/SbSMjYtlwteyxq0b/KUXWDSQmjSTqRxBEKJvr6Zzrg8ksFSE0rCkZNeaMEBKxnoqhINl8UX/ySzDsiDM61vQYGnTGyLOgP0mMoT5Xmf6MCRWDH74Tzw9bAiLwrch/cnKM6pOjX81KoVUfoeQwzEU/bJeKoob11qjs2FKSMUG9FRfM6kYwjHRDw9gAiVkt1kvbwVybq3aTaKdNtMNoqGXsn/W/d+AU7YaTnct3B8paKZGlpe5AfXRhoMzKjPXqwL/pZm3SevXiDKC4SQtQ3OZyQDk6XJJLyK2MjZ7P2IPfzGr1Qoz94CoYWy89NKtPuiai7xKMPTwlB6t+ULmk7yzKMo2WTDiiK6Js6z4ue7Q3fyYPNrsDdXHGWge7ZHnPv2cuOQsortEClCO6Msq6NT8U6kH9Aw4WFBhhPDmawUDkz2/f+kJQk5qOQ+wVopHkYSk9EWLFuYdVbFq36TPS28tc9CKyM8Ure2PrpH68ZVaq/Gjw6Yh3YDIqyPEn/BK4bBhRGga3isDapZpVKlh7L5vTM2SuZG0+I5UKn7115xucMoQRPKEzQ+6/R0gr2qfJ1N3QCF1fxKPYwL71B0eG2DaBHvbV2ArYxWNlqbCfHA07Jeci2NeBIJAPG/8QQJbH/wmANufeAiDH5FtJHMbGzaTqlWL71rLPAS8IzmGIR3hzBG0RDAw8po4CKVmTFL8bZU+ErqH6/UMyXbMpi6xiofnjFuDz5qhY39gwK3lrZc36acea3bL+XLOWC42nf1hL+9b8zl/5+2QJeoUqH5LCLFjVa5Nm7XV9t0ZWH9aXKmSuyJeJ39FQxFvSp9XMlxun0xwqdrEI7N4YHBJolUPkh+fW/GYXJ/zB1+bxQQQQtFV5UP+9SrYPG7tr9fKkVchD0GR31cqvk0fbZmXfWnjdWH9GpvaaC1vNp4tgYh5PWYvb5Pgx99M4+Z48L4Ma9VYrk5mXAIF5PEv5elQmjxZJcb49oHjERjQuSuMDfGdQhrNsX9f5xq4L9KJEuVw8QpWYtucARGj8GjCuPxEIUQjCSJJFfK8HHh3oJAIoBmwFVToUJDERsHGJpxToVWXapcYkHRRc0gwyVQrqEDWX5LTi2FP34CEecY0db74NejFnDEOR0cepUaA8deEWO/DBB/EIV+pu4J5t0GfvPvV4xEfUQDjga7Fpu++bTBgMaztQXU3KA7xnNk/XrO+2gf1UZE97mvAj64/J3CxLD0VBoNcjpMWbP9xvnky+OSo7CnBFuvMeEPB+g9+SLppcmwsZoLZCC4QtW3zrB4zj2vnWsMftnyRZEaclGX+pKaoept8b7d83XvlQqQ6UDp9FyC4jNO6YXQadq89vSuftzxnmRaAC0HFLDGTKF+BZmSLLO2Ql76XFJT3ARqluo/cZLOCxHIQCbSFcmkNgrKPIZp2pXM5rKriUjzrzdrE8/DsA+3Z9Hs7ep+k7HAjWkr8/EP/Bgcj9DdbDvy8=
mgzu
2023-05-08 16:42:05 +08:00
可以看 vue devtool 排查,vue devtool 里 props 值跟着变了,info 还没变。
1. 直接用 props.info
2. const info = ref(props.info) 改为 const info = computed(() => props.info)
nu1l
2023-05-08 17:27:26 +08:00
@justyeh #1
@wangtian2020 #4
@mgzu #6

谢谢大佬们,问题解决了。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/938310

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX