page contents
首页 问答
正文

Vue模版编译原理知道吗，能简单说一下吗?

轩辕小不懂 发布于 2021-12-27 16:07
阅读 493
收藏 0
答案 1
分类：WEB前端开发
  • vue
    • 默认排序 时间排序
    2748
    Nen
    Nen
    - 程序员

    简单说，Vue的编译过程就是将template转化为render函数的过程。会经历以下阶段：

    生成AST树

    优化

    codegen

    首先解析模版，生成AST语法树(一种用JavaScript对象的形式来描述整个模板)。

    使用大量的正则表达式对模板进行解析，遇到标签、文本的时候都会执行对应的钩子进行相关处理。

    Vue的数据是响应式的，但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再变化，对应的DOM也不会变化。那么优化过程就是深度遍历AST树，按照相关条件对树节点进行标记。这些被标记的节点(静态节点)我们就可以跳过对它们的比对，对运行时的模板起到很大的优化作用。

    编译的最后一步是将优化后的AST树转换为可执行的。

    请先 登录 后评论
    轩辕小不懂
    1 关注
     
    轩辕小不懂
    提出于 2021-12-27 16:07
    全部

    轩辕小不懂 的其他提问

    类似问题

    defineProperty和proxy的区别?
    1 回答
    493 阅读
    Vue3.0有什么更新
    1 回答
    493 阅读
    为什么 Vuex 的 mutation 中不能做异步操作?
    1 回答
    493 阅读
    路由的hash和history模式的区别？
    1 回答
    493 阅读
    Vue-Router 的懒加载如何实现?
    0 回答
    493 阅读
    Vue的性能优化有哪些？
    1 回答
    493 阅读