Bilibili-Evolved项目新版评论区解析技术解析

背景介绍

Bilibili-Evolved是一个功能强大的B站增强脚本项目，近期B站对评论区进行了Vue版本升级，导致项目中原有的评论解析功能失效。本文将深入分析问题原因及解决方案。

问题分析

原项目中使用getVueData方法获取评论区数据，但随着B站前端架构升级，该方法已无法正确获取新版评论数据。核心问题在于：

1. Vue版本升级导致DOM结构变化
2. 原有数据获取路径失效
3. 评论元素与数据无法正确映射

技术解决方案

初始解决方案

通过分析新版DOM结构，发现可以通过以下路径获取评论数据：

document.querySelector(".comment").__vue_app__._context.provides.store._state.data.apiData.replyList

但此方法仅能获取总评论列表，无法将单个评论元素与数据对应起来。

元素与数据映射方案

研究发现，一级评论可通过.root-reply-avatar元素的data-root-reply-id属性与数据中的rpid_str对应。但此方法不适用于评论回复。

高级解决方案

方案一：VNode暴露法

通过递归遍历Vue虚拟节点树(VNode)，将组件实例映射到真实DOM上。关键实现：

1. 组件实例vnode与模板树vnode区分处理
2. 递归遍历组件子树和子节点
3. 将vnode绑定到对应DOM元素的_vnode属性

此方案稳定性较高，但存在性能问题，15条评论需执行3842次递归操作。

性能优化

通过以下方法显著提升性能：

1. 使用parentElement向上标记递归范围
2. 从根元素向下传递vnode时选择性递归
3. 特殊处理Vue Fragment节点
4. 对新元素采用增量更新

优化后性能提升明显：22条评论(10条一级+12条回复)的测试结果：

	优化前	优化后
递归次数	8459	93
总耗时	255.3ms	46.9ms

方案二：Mixin注入法

通过Vue的mixin API直接注入组件逻辑：

1. 使用__vue_app__.mixin全局注入
2. 自定义组件行为
3. 直接访问组件内部状态

此方案实现简单但可能影响性能，且mixin API在Vue3中不再推荐使用。

技术实现细节

优化后的VNode管理器核心逻辑：

1. 使用Symbol标记目标元素
2. 分情况处理组件vnode和模板vnode
3. 智能跳过无需处理的节点
4. 增量更新机制减少重复计算

总结

Bilibili-Evolved项目通过深入分析新版评论区Vue实现，采用VNode暴露与性能优化相结合的方式，成功解决了评论解析问题。该方案不仅适用于当前版本，也为未来可能的Vue升级提供了可扩展的解决方案框架。

对于开发者而言，此案例展示了如何：

1. 逆向分析复杂前端应用
2. 处理Vue版本升级带来的兼容问题
3. 优化递归算法性能
4. 设计可维护的解决方案