vue解析模板的解释

最新推荐文章于 2023-07-20 08:30:00 发布

aminsky0

最新推荐文章于 2023-07-20 08:30:00 发布

阅读量365

点赞数 1

分类专栏： vue 文章标签： vue dom

本文链接：https://blog.csdn.net/weixin_39065287/article/details/106535827

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

vue解析模板的解释

通过查看vue源码，我们知道了虚拟dom,虚拟dom的构建需要将template解析成AST语法树，在转化成render函数，最后返回一个vnode虚拟dom节点。

什么是AST？

在VUE的mount过程中，template会被编译成AST语法树，AST是指抽象语法树，或者语法树，是指源代码中的抽象语法结构的树状表现形式

解析实例

实现将模板解析成AST

<div>
  <p>{{name}}</p>
</div>

将上面模板解析之后如下：

{
  tag: "div"
  type: 1,
  staticRoot: false,
  static: false,
  plain: true,
  parent: undefined,
  attrsList: [],
  attrsMap: {},
  children: [
    {
      tag: "p"
      type: 1,
      staticRoot: false,
      static: false,
      plain: true,
      parent: {tag: "div", ...},
      attrsList: [],
      attrsMap: {},
      children: [{
        type: 2,
        text: "{{name}}",
        static: false,
        expression: "_s(name)"
      }]
    }
  ]
}