2025年de4dot（de4dot反编译vue）

编程日记 • 2025-03-25 15:21 • 阅读 53

将组件的 html 模版解析成 AST 对象
优化
- 通过遍历 AST 对象，为每个节点做 静态标记，通过标记其是否为静态节点，然后进一步标记出 静态根节点，方便在后续更新过程中跳过这些静态节点
- 标记静态根用于生成渲染函数阶段，生成静态根节点的渲染函数
从 AST 生成运行渲染函数
- render 函数
- staticRenderFns 数组，里面保存了所有的 静态节点的渲染函数

遍历模版字符串，通过正则表达式匹配
跳过某些不需要处理的标签，比如：注释标签、条件注释标签、
解析开始标签
- 1. 解析得到一个对象，包括标签名（）、所有的属性（）、标签在模版字符串中的索引位置
- 1. 接着处理上一步的属性，将其变成的形式
- 1. 通过标签名、属性对象和当前元素的父元素生成对象（普通的对象），通过的形式记录了该元素的一些信息
- 1. 接下来进一步处理开始标签上的一些指令，比如，并将处理结果放到对象上
- 1. 步骤（2、3、4）处理结束后将对象保存到数组中
- 1. 之前的所有处理完成后，会截断字符串，将已经处理掉的字符串截掉
解析闭合标签
- 如果匹配到结束标签，就从数组中拿出最后一个元素，它和当前匹配到的结束标签是一对
- 再次处理开始标签上的属性，这些属性和前面处理的不一样，比如：等，并将处理结果放到元素的对象
- 然后将当前元素和父元素产生关联，给当前元素的对象设置属性，然后将自己放到父元素的对象的数组中
最后遍历完整个模版字符串以后，返回对象

文件位置：

这里重点在于获取动态渲染函数 render 函数和静态渲染函数 staticRenderFns 的 compileToFunctions 方法.

文件位置：

这里的重点是 createCompileToFunctionFn 方法的入参 compile 函数.

文件位置：

这里的中调就是调用核心编译函数 baseCompile，传递模版字符串和最终的编译选项，得到编译结果.

baseOptions 配置
文件位置：

文件位置：

这里的重点就是通过 parse 方法将 html 模版字符串解析成 ast.

文件位置：

这里 parse 方法中定义了很多方法，这些方法是在parseHTMLOptions 中有使用到，因此在这里不提前做解读，同时也意味着这里的重点就在于 parseHTML(template, parseHTMLOptions) 方法.

文件位置：

parseHTML 方法中主要涉及到了以下几个方法：

文件位置：

这里主要解读 start、end、chars、comment 这 4 个方法.

文件位置：

这里涉及到了下面几个方法：

文件位置：

getBindingAttr

getAndRemoveAttr

addRawAttr

文件位置：

processFor

processRef

processKey

processElement

文件位置：

getSlotName

processSlotOutlet

processComponent

文件位置：