<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> 讯享网
- 将组件的 html 模版解析成 AST 对象
- 优化
- 通过遍历 AST 对象，为每个节点做 静态标记，通过标记其是否为静态节点，然后进一步标记出 静态根节点，方便在后续更新过程中跳过这些静态节点
- 标记静态根用于生成渲染函数阶段，生成静态根节点的渲染函数
- 从 AST 生成运行渲染函数
- render 函数
- staticRenderFns 数组，里面保存了所有的 静态节点的渲染函数
- 遍历 模版字符串，通过正则表达式匹配
- 跳过某些不需要处理的标签，比如：注释标签 、条件注释标签 、
- 解析开始标签
-
- 解析得到一个对象，包括标签名（）、所有的属性（）、标签在 模版字符串中的索引位置
-
- 接着处理上一步的 属性，将其变成 的形式
-
- 通过标签名、属性对象和当前元素的父元素生成 对象（普通的 对象），通过 的形式记录了该元素的一些信息
-
- 接下来进一步处理开始标签上的一些指令，比如 ，并将处理结果放到 对象上
-
- 步骤（2、3、4）处理结束后将 对象保存到 数组中
-
- 之前的所有处理完成后，会截断 字符串，将已经处理掉的字符串截掉
-
- 解析闭合标签
- 如果匹配到结束标签，就从 数组中拿出最后一个元素，它和当前匹配到的结束标签是一对
- 再次处理开始标签上的属性，这些属性和前面处理的不一样，比如： 等，并将处理结果放到元素的 对象
- 然后将当前元素和父元素产生关联，给当前元素的 对象设置 属性，然后将自己放到父元素的 对象的 数组中
- 最后遍历完整个 模版字符串以后，返回 对象
文件位置：
这里重点在于获取动态渲染函数 render 函数和静态渲染函数 staticRenderFns 的 compileToFunctions 方法.
讯享网
文件位置：
这里的重点是 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
文件位置：
讯享网
文件位置：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/184767.html