Oragekk's Blog
·
一个 waline 评论系统bug引发的思考
💡
原文中文，约5700字，阅读约需14分钟。
📝
内容提要
Waline评论系统存在一个bug，即回复评论后，评论内容不会自动清空。经过分析发现，评论内容保存在localStorage中。通过查找代码，发现问题出在watch函数中，当提交评论后，editor.value被清空，但watch函数触发时，取到的是旧值。问题可能是由于submitComment是异步函数，导致editor.value=''没有及时更新。进一步调试发现，watch函数被onMounted触发，当顶部的CommentBox.vue组件重新渲染时，watch函数会被触发，此时取到的是旧值。问题可能是useEditor()函数内部有异步操作，导致localStorage没有立即更新。解决方法是使用localStorage.setItem('WALINE_COMMENT_BOX_EDITOR', '')或await nextTick()等待DOM更新完成。
🎯
关键要点
- Waline评论系统存在一个bug，回复评论后评论内容不会自动清空。
- 评论内容保存在localStorage中，导致即使刷新浏览器也不会清空。
- 问题出在watch函数中，editor.value被清空但watch触发时取到的是旧值。
- submitComment是异步函数，导致editor.value=''没有及时更新。
- watch函数在onMounted触发，重新渲染时取到的是旧值。
- useEditor()函数内部可能有异步操作，导致localStorage没有立即更新。
- 解决方法是使用localStorage.setItem('WALINE_COMMENT_BOX_EDITOR', '')或await nextTick()等待DOM更新完成。
❓
延伸问答
Waline评论系统的bug是什么？
Waline评论系统的bug是回复评论后，评论内容不会自动清空，仍然保留在输入框中。
这个bug的根本原因是什么？
根本原因在于watch函数触发时取到的是editor.value的旧值，导致评论内容未能及时清空。
如何解决这个bug？
可以通过使用localStorage.setItem('WALINE_COMMENT_BOX_EDITOR', '')或await nextTick()来解决这个bug。
为什么watch函数会取到旧值？
因为submitComment是异步函数，editor.value=''没有及时更新，导致watch在组件重新渲染时取到旧值。
localStorage在这个bug中起什么作用？
localStorage用于保存评论内容，即使刷新浏览器也不会清空，导致bug的出现。
如何调试这个bug？
可以通过在watch中添加debug函数，观察editor.value的变化，来调试这个bug。
➡️
