search
HomeWeb Front-endVue.jsVue learning talks about template compilation principles

Vue learning talks about template compilation principles

Mar 07, 2023 pm 07:01 PM
vueTemplate compilation

What is template compilation? The following article will talk about template compilation in Vue and discuss the principles of template compilation. I hope it will be helpful to you!

Vue learning talks about template compilation principles

vue provides template syntax that allows us to declaratively describe the binding relationship between state and DOM, such as <p>{{name}} </p> <p></p>.

Template compilation refers to the process in which the template is compiled into a render function. The function of the render function is to generate a new vnode based on the latest status each time it is executed.

The compilation process is: Template as input-> Template compilation stage->Generate rendering function

##Interview questions

    vue template compilation?
  • Explanation of render in template compilation Compiler?
  • vue template compilation process, explain in detail what is done in each process
  • Template compilation, who will parse the AST tree [Related recommendations:
  • vuejs video tutorial, Web front-end development

#Compile the template into a rendering function

Vue learning talks about template compilation principles

  • Parser: Parse the template into AST (Abstract Syntax Tree)
  • Optimizer: Traverse AST to mark static nodes, because static Nodes are immutable. There is no need to create new virtual nodes for labeled static nodes. You can directly clone existing virtual nodes.
  • Code Generator: Use AST to generate rendering functions. Convert AST into code string. Put the code string into the rendering function and export it for use by the outside world.

Case

Vue learning talks about template compilation principles

1. Template confirmation

Assume that the following code has

el, template, render, $mount

//复杂案例
let vue = new Vue({
    el: &#39;#app&#39;,
    data() {
        return {
            a: 1,
            b: [1]
        }
    },
    render(h) {
        return h(&#39;div&#39;, { id: &#39;hhh&#39; }, &#39;hello&#39;)
    },
    template: `<div id=&#39;hhh&#39; style="aa:1;bb:2"><a>{{xxx}}{{ccc}}</a></div>`
}).$mount(&#39;#app&#39;)

console.log(vue)

//脚手架创建的案例
let vue = new Vue({
  render: h => h(App)
}).$mount(&#39;#app&#39;)

Vue learning talks about template compilation principles

#1) Which root node to render to : Determine whether there is an el attribute. If there is, get the el root node directly. If not, get it when calling $mount. Root node

2) Which template to render to the root node: Whether to call the render function to pass in the templaterender: h => h(App ) ->

    With render: At this time, the render function is executed first,
  • render priority> template
  • No render:
    • With template: template is parsed into the required format of the render function - a code string, and rendered using the render function call
    • Without template: outerHTML parsing of the el root node into the format required by the render function - a code string, and use the render function to render
    • 3. Rendering method: No matter what the situation, the final step is to
      use the render function to render

2. Parser-parse the template into AST

Parser-parse the template into AST

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

After parsing the above template into AST, the AST abstract syntax tree uses objects in JS to describe a node, and one object represents a node.

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

The working principle of the parser

The principle of the parser is to intercept the template string in small sections, each time Intercepting a small string will trigger different hook functions according to the type of the intercepted string until the template string is intercepted. Then use the stack to determine the hierarchical relationship

The internal part of the parser is also divided into several sub-parsers, such as HTML parser, text parser, etc.

The role of the HTML parser is to parse HTML. In the process of parsing HTML, various hook functions are continuously triggered.

    The hook function of the start tag can Constructing nodes of element type
  • Text type nodes can be constructed in the text hook function
  • Comment type nodes can be constructed in the comment hook function
  • End tag hook function
The text parser performs secondary processing on the text parsed from HTML, such as interpolation syntax

{{}}

How to determine the level between DOM relation? Using the stack When triggering the hook function of the start tag, if the current tag is not a self-closing tag,
pushentersstack. When the hook function of the end tag is triggered,
pop comes out from the stack

3. Optimizer-mark static nodes in AST

Benefits of marking static subtrees

  • 每次重新渲染时,不需要为静态子树创建新虚拟子树,克隆已存在的静态子树
  • 在虚拟DOM中打补丁(patching)的过程可以跳过 ,静态子树是不可变的

优化器的内部实现主要分两步用递归的方式将所有节点添加 static 属性,true表示是静态的,false表示不是静态的。

  • 在AST中找出所有静态节点并打上标记
    静态节点:DOM不会发生变化的节点
    通过递归的方式从上向下标记静态节点,如果一个节点被标记为静态节点,但它的子节点却被标记为动态节点,就说明该节点不是静态节点,可以将它改为动态节点。静态节点的特征是它的子节点也必须是静态的。

静态根节点也是静态节点

  • **在AST中找出所有静态根节点并打上标记 **
    静态根节点:子节点全是静态节点的节点
    使用递归从上向下寻找,在寻找的过程中遇见的第一个静态节点就为静态根节点,同时不继续往下找。

如果一个静态根节点的子节点只有一个文本节点或没有子节点,那么不会标记成静态根节点,即使他们是,因为优化成本大于收益

怎么判断是否静态节点?
在将模板字符串解析成AST的时候,会根据不同的文本类型设置一个 type

type 说明 是否时静态节点
1 元素节点 进行一些排除
2 带遍历的动态文本节点 不是
3 不带遍历的纯文本节点

4.代码生成器-将AST转化成渲染函数中的代码字符串

代码生成器的作用:将AST转化成渲染函数中的代码字符串

<div>
  <p>{{name}}</p>
</div>
//生成的render渲染函数
{
  render: `with(this){return _c('div',[_c('p',[_v(_s(name))])])}`
}
//格式化后
with(this){
  return _c(
    'div',
    [
      _c(
        'p',
        [
          _v(_s(name))
        ]
      )
    ]
  )
}

生成代码字符串是一个递归的过程,从顶向下依次处理每一个AST节点。
节点有三种类型,分别对应三种不同的创建方法与别名。

类型 创建方法 别名
元素节点 createElement _c
文本节点 createTextVNode _v
注释节点 createEmptyVNode _e

渲染函数可以生成VNode的原因:渲染函数其实是执行了createElement,而createElement可以创建VNode。

代码字符串的拼接过程

递归AST来生成字符串,最先生成根节点,然后在子节点字符串生成后,将其拼接在根节点的参数中,子节点的子节点拼接在子节点的参数中,一层层拼接。

(学习视频分享:vuejs入门教程编程基础视频

The above is the detailed content of Vue learning talks about template compilation principles. For more information, please follow other related articles on the PHP Chinese website!

Statement
This article is reproduced at:csdn. If there is any infringement, please contact admin@php.cn delete
What Happens When the Vue.js Virtual DOM Detects a Change?What Happens When the Vue.js Virtual DOM Detects a Change?May 14, 2025 am 12:12 AM

WhentheVue.jsVirtualDOMdetectsachange,itupdatestheVirtualDOM,diffsit,andappliesminimalchangestotherealDOM.ThisprocessensureshighperformancebyavoidingunnecessaryDOMmanipulations.

How Accurate Is It to Think of Vue.js's Virtual DOM as a Mirror of the Real DOM?How Accurate Is It to Think of Vue.js's Virtual DOM as a Mirror of the Real DOM?May 13, 2025 pm 04:05 PM

Vue.js' VirtualDOM is both a mirror of the real DOM, and not exactly. 1. Create and update: Vue.js creates a VirtualDOM tree based on component definitions, and updates VirtualDOM first when the state changes. 2. Differences and patching: Comparison of old and new VirtualDOMs through diff operations, and apply only the minimum changes to the real DOM. 3. Efficiency: VirtualDOM allows batch updates, reduces direct DOM operations, and optimizes the rendering process. VirtualDOM is a strategic tool for Vue.js to optimize UI updates.

Vue.js vs. React: Scalability and MaintainabilityVue.js vs. React: Scalability and MaintainabilityMay 10, 2025 am 12:24 AM

Vue.js and React each have their own advantages in scalability and maintainability. 1) Vue.js is easy to use and is suitable for small projects. The Composition API improves the maintainability of large projects. 2) React is suitable for large and complex projects, with Hooks and virtual DOM improving performance and maintainability, but the learning curve is steeper.

The Future of Vue.js and React: Trends and PredictionsThe Future of Vue.js and React: Trends and PredictionsMay 09, 2025 am 12:12 AM

The future trends and forecasts of Vue.js and React are: 1) Vue.js will be widely used in enterprise-level applications and have made breakthroughs in server-side rendering and static site generation; 2) React will innovate in server components and data acquisition, and further optimize the concurrency model.

Netflix's Frontend: A Deep Dive into Its Technology StackNetflix's Frontend: A Deep Dive into Its Technology StackMay 08, 2025 am 12:11 AM

Netflix's front-end technology stack is mainly based on React and Redux. 1.React is used to build high-performance single-page applications, and improves code reusability and maintenance through component development. 2. Redux is used for state management to ensure that state changes are predictable and traceable. 3. The toolchain includes Webpack, Babel, Jest and Enzyme to ensure code quality and performance. 4. Performance optimization is achieved through code segmentation, lazy loading and server-side rendering to improve user experience.

Vue.js and the Frontend: Building Interactive User InterfacesVue.js and the Frontend: Building Interactive User InterfacesMay 06, 2025 am 12:02 AM

Vue.js is a progressive framework suitable for building highly interactive user interfaces. Its core functions include responsive systems, component development and routing management. 1) The responsive system realizes data monitoring through Object.defineProperty or Proxy, and automatically updates the interface. 2) Component development allows the interface to be split into reusable modules. 3) VueRouter supports single-page applications to improve user experience.

What are the disadvantages of VueJs?What are the disadvantages of VueJs?May 05, 2025 am 12:06 AM

The main disadvantages of Vue.js include: 1. The ecosystem is relatively new, and third-party libraries and tools are not as rich as other frameworks; 2. The learning curve becomes steep in complex functions; 3. Community support and resources are not as extensive as React and Angular; 4. Performance problems may be encountered in large applications; 5. Version upgrades and compatibility challenges are greater.

Netflix: Unveiling Its Frontend FrameworksNetflix: Unveiling Its Frontend FrameworksMay 04, 2025 am 12:16 AM

Netflix uses React as its front-end framework. 1.React's component development and virtual DOM mechanism improve performance and development efficiency. 2. Use Webpack and Babel to optimize code construction and deployment. 3. Use code segmentation, server-side rendering and caching strategies for performance optimization.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.