Vue template到render过程,以及render的调用时机

vue的模版编译过程主要如下:template -> ast -> render函数

vue 在模版编译版本的码中会执行 compileToFunctions 将template转化为render函数:

// 将模板编译为render函数
const { render, staticRenderFns } = compileToFunctions(template,options, this)

CompileToFunctions中的主要逻辑如下∶

(1)调用parse方法将template转化为ast(抽象语法树)

constast = parse(template.trim(), options)

parse的目标:把tamplate转换为AST树,它是一种用 JavaScript对象的形式来描述整个模板。
解析过程:利用正则表达式顺序解析模板,当解析到开始标签、闭合标签、文本的时候都会分别执行对应的 回调函数,来达到构造AST树的目的。
AST元素节点总共三种类型:type为1表示普通元素、2为表达式、3为纯文本

(2)对静态节点做优化

optimize(ast,options)

这个过程主要分析出哪些是静态节点,给其打一个标记,为后续更新渲染可以直接跳过静态节点做优化

深度遍历AST,查看每个子树的节点元素是否为静态节点或者静态节点根。如果为静态节点,他们生成的DOM永远不会改变,这对运行时模板更新起到了极大的优化作用。

(3)生成代码

const code = generate(ast, options)

generate将ast抽象语法树编译成 render字符串并将静态部分放到 staticRenderFns 中,最后通过 new Function(“render”) 生成render函数。

render函数的调用时机

在beforeMount生命周期钩子期间调用,因为此时,模板编译已完成,但是为渲染成真实DOM

相关推荐

  1. Vue templaterender过程以及render调用时机

    2024-03-15 00:40:02       27 阅读
  2. reactrender什么时候渲染?

    2024-03-15 00:40:02       35 阅读
  3. render函数基本实现

    2024-03-15 00:40:02       36 阅读
  4. react re-render解决方案

    2024-03-15 00:40:02       38 阅读
  5. React中如何避免不必要render

    2024-03-15 00:40:02       33 阅读
  6. ReactNative实现 RSC Render 解决方案

    2024-03-15 00:40:02       34 阅读
  7. React render方法原理?在什么时候会被触发?

    2024-03-15 00:40:02       22 阅读
  8. Unity_Render Pipeline

    2024-03-15 00:40:02       32 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-15 00:40:02       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-15 00:40:02       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-15 00:40:02       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-15 00:40:02       20 阅读

热门阅读

  1. 每日shell脚本之定期检查服务器状态

    2024-03-15 00:40:02       23 阅读
  2. 25.MySQL中定义空值

    2024-03-15 00:40:02       19 阅读
  3. Flutter Widgets体系结构

    2024-03-15 00:40:02       27 阅读
  4. 探讨:MySQL和PostgreSQL谁更火

    2024-03-15 00:40:02       19 阅读
  5. python实现小红树上染色

    2024-03-15 00:40:02       19 阅读
  6. ubuntu20.04安装fpylll

    2024-03-15 00:40:02       21 阅读