vue解析模板的解释

vue解析模板的解释

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

什么是AST？

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

解析实例

实现将模板解析成AST

  
{{name}}

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

{
  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)"
      }]
    }
  ]
}