当前位置:网站首页 > Vue.js开发 > 正文

de4dot(de4dot反编译vue)



  • 将组件的 html 模版解析AST 对象
  • 优化
    • 通过遍历 AST 对象,为每个节点做 静态标记,通过标记其是否为静态节点,然后进一步标记出 静态根节点,方便在后续更新过程中跳过这些静态节点
    • 标记静态根用于生成渲染函数阶段,生成静态根节点的渲染函数
  • AST 生成运行渲染函数
    • render 函数
    • staticRenderFns 数组,里面保存了所有的 静态节点的渲染函数
  • 遍历 模版字符串,通过正则表达式匹配
  • 跳过某些不需要处理的标签,比如:注释标签 、条件注释标签
  • 解析开始标签
      1. 解析得到一个对象,包括标签名()、所有的属性()、标签在 模版字符串中的索引位置
      1. 接着处理上一步的 属性,将其变成 的形式
      1. 通过标签名、属性对象和当前元素的父元素生成 对象(普通的 对象),通过 的形式记录了该元素的一些信息
      1. 接下来进一步处理开始标签上的一些指令,比如 ,并将处理结果放到 对象上
      1. 步骤(2、3、4)处理结束后将 对象保存到 数组中
      1. 之前的所有处理完成后,会截断 字符串,将已经处理掉的字符串截掉
  • 解析闭合标签
    • 如果匹配到结束标签,就从 数组中拿出最后一个元素,它和当前匹配到的结束标签是一对
    • 再次处理开始标签上的属性,这些属性和前面处理的不一样,比如: 等,并将处理结果放到元素的 对象
    • 然后将当前元素和父元素产生关联,给当前元素的 对象设置 属性,然后将自己放到父元素的 对象的 数组中
  • 最后遍历完整个 模版字符串以后,返回 对象

文件位置:

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

 

文件位置:

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

 

文件位置:

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

 

baseOptions 配置
文件位置:

 

文件位置:

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

 

文件位置:

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

 

文件位置:

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

  • advance
  • parseStartTag
  • handleStartTag
  • parseEndTag
 

文件位置:

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

 

文件位置:

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

  • getBindingAttr
  • getAndRemoveAttr
  • processFor
  • addRawAttr
  • processElement
 

文件位置:

getBindingAttr

 

getAndRemoveAttr

 

addRawAttr

 

文件位置:

processFor

 

processRef

 

processKey

 

processElement

 

文件位置:

 

文件位置:

getSlotName

 

processSlotOutlet

 

processComponent

 

文件位置:

 

文件位置:

到此这篇de4dot(de4dot反编译vue)的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!
                            

版权声明


相关文章:

  • 跨域是什么,如何解决跨域vue(跨域是什么,如何解决跨域)2025-02-23 10:36:05
  • redhat6.5重置root密码(redhat6.5修改root密码)2025-02-23 10:36:05
  • vue2和vue3的底层原理(vue2 和vue3)2025-02-23 10:36:05
  • pcie5.0固态硬盘推荐(pcie5.0固态硬盘什么时候出)2025-02-23 10:36:05
  • 扬声器安装程序5.1(扬声器安装程序unknown怎么解决)2025-02-23 10:36:05
  • map转json字符串(map转json字符串出现数组下标越界)2025-02-23 10:36:05
  • pcie5.0固态硬盘什么时候出(pcie5.0什么时候上市)2025-02-23 10:36:05
  • Ubuntu源地址(ubuntu18.04源地址)2025-02-23 10:36:05
  • string转map集合(stringjson转map)2025-02-23 10:36:05
  • vue2关闭父页面(vue关闭页面调用接口)2025-02-23 10:36:05
  • 全屏图片