Why Do We Need Templates?

Due to a Vue study group, I'm re-exploring what Templates in Components are, or rather, what problems do Templates solve for us?

Complex Applications in Modern Frontend

Imagine if we didn't have tools like Vue Templates - how would we update text or images on web pages? In traditional frontend development, we might need to do this:

Use JavaScript to find that web element (e.g., document.getElementById('myText')).

Then manually change its content (e.g., element.innerHTML = 'New text').

What Are Vue Templates & React JSX Doing?

To address the above problems, modern frontend frameworks like Vue and React introduced more advanced UI building approaches. The core goal of Vue Templates (and JSX in React) is to allow us to develop in a more "declarative" way:

• Data-driven UI: When your data changes, the interface automatically updates accordingly. This is achieved through the framework's powerful "reactivity system". No need to manually update the interface anymore - saves time and effort!
• Cleaner, more understandable code: Vue Templates are based on HTML, meaning all Vue templates are themselves valid HTML. You can write Vue templates just like writing regular HTML, and browsers can parse them correctly. This makes them very easy to learn, looking like enhanced HTML - very intuitive.
• Component-based development: Modern frameworks encourage us to break web pages into reusable "components". Template syntax plays a role in defining structure and content within components, making component-based development more seamless.
• High performance: Frameworks do lots of optimization behind the scenes, such as "Virtual DOM" and "compile-time optimization," ensuring that even in complex applications, interface updates remain highly efficient.

AST (Abstract Syntax Tree)

You might wonder how Vue transforms those HTML-like Vue templates we write into actual web pages. The first step is parsing the template into an "Abstract Syntax Tree" (AST).

What is AST:

1. First, Vue's compiler reads in the template string you wrote (the stuff you write inside <template> tags).
2. Then, like a careful language teacher, it breaks down this text into meaningful "words" or "tokens," such as HTML tags, text content, Vue's special directives, etc.
3. Next, Vue builds a tree-like JavaScript object structure based on these tokens - this is the AST. You can think of AST as the "skeletal blueprint" or "structural diagram" of your template, precisely describing what your template looks like, where the tags are, where the text is, where data is bound, the hierarchical relationships between elements, etc.

For example, for the template <div id="app"><p>{{ message }}</p></div>, the AST might describe that there's a div element with an id attribute value of "app", and it has a child element p, and the p element has a text interpolation inside with content being the message variable.

Why it's important: AST is the foundation for subsequent optimization and code generation. Without AST, the compiler cannot understand the template's structure and intent. Vue's compiler traverses this AST, analyzing which parts are static and which are dynamic, preparing for subsequent optimization and render function generation.

// AST structure example: <div id="app"><p>{{ message }}</p></div>
const ast = {
  type: 'Element',
  tag: 'div',
  props: [
    {
      type: 'Attribute',
      name: 'id',
      value: {
        type: 'Literal',
        value: 'app'
      }
    }
  ],
  children: [
    {
      type: 'Element',
      tag: 'p',
      props: [],
      children: [
        {
          type: 'Interpolation',
          content: {
            type: 'SimpleExpression',
            content: 'message',
            isStatic: false
          }
        }
      ]
    }
  ]
}

Compiler

After getting the AST as this structured template representation, Vue's "Compiler" takes over for the next step.

The compilation process is one of the keys to Vue's high performance, referring to the entire transformation process from original template strings to finally generating render functions.

The compiler's main responsibilities include:

• Parsing: This is the first step, converting template strings to AST (discussed in the previous section).
• Optimization: After getting the AST, the compiler begins "optimization." It traverses the AST, analyzing and finding which parts are "static" (content that never changes during rendering) and which parts are "dynamic" (content that changes based on data).
• Static node hoisting: For completely static parts, Vue marks them and even directly hoists them out. This way, during subsequent interface updates, these static parts can be completely skipped without wasting time comparing whether they've changed, greatly improving performance.
• Patch Flags: For dynamic parts (like elements with v-if, v-for, or binding expressions), the compiler also marks them. These "patch flags" record what types of updates this dynamic node might need in the future (e.g., just text content changed? or class changed? or child element order changed?). This way, during runtime Virtual DOM diffing, Vue can very precisely perform only necessary updates instead of blindly comparing everything.
• Tree Flattening: The compiler identifies "blocks" in templates that have stable internal structure. For each block, the compiler extracts the dynamic descendant nodes within it, forming a flattened array. When components re-render, they only need to traverse this flattened dynamic node list, effectively skipping static parts and greatly reducing the number of nodes that need coordination.
• Code Generation: After optimization, the compiler generates JavaScript code based on the optimized AST. This code is usually a "Render Function."

The final product of compilation is a highly optimized render function. Most of this process is completed during the "build stage" (like when you run npm run build to package your project) (AOT, Ahead-of-Time compilation), so application performance in browsers is very good.

// Compilation process example: <div id="app"><p>{{ message }}</p></div>
function compile(template) {
  // Step 1: Parse template to AST
  const ast = parse(template)
  
  // Step 2: Transform and optimize AST
  const optimizedAst = transform(ast, {
    // Mark static nodes
    hoistStatic: true,
    // Generate patch flags for dynamic content
    patchFlag: true
  })
  
  // Step 3: Generate render function code
  const renderFunctionCode = generate(optimizedAst)
  
  return renderFunctionCode
}

// Generated render function (simplified)
function render(_ctx, _cache) {
  return (_openBlock(), _createElementBlock("div", {
    id: "app"
  }, [
    _createElementVNode("p", null, 
      _toDisplayString(_ctx.message), // Dynamic content with patch flag
      1 /* TEXT */ // Patch flag indicating text content change
    )
  ]))
}

// Optimization analysis:
// - div element and id="app" are static (won't change)
// - p element structure is static
// - Only {{ message }} is dynamic and needs reactive tracking

Renderer

The "Render Function" generated by the compiler is the core of Vue's reactivity system and Virtual DOM mechanism.

What is a render function: It's a JavaScript function. When executed, it returns a "Virtual DOM Tree" describing what the current interface should look like. Virtual DOM is a concept of using JavaScript objects to represent real DOM structure, which is more efficient than directly manipulating real DOM.

How the renderer works (Rendering and reactive updates):

1. Generate Virtual DOM: When your application starts or component data changes, Vue executes the corresponding component's render function to get a new Virtual DOM tree.
2. Diffing: Vue's renderer compares the new Virtual DOM tree with the old Virtual DOM tree from the previous render. This comparison process (Diffing algorithm) is very efficient and can quickly find the parts that actually need to change.
3. Patching: Then, Vue only updates the "actually changed" parts to the actual web DOM. This process is called "Patching."

So the entire flow can be summarized as:

Understanding this flow helps you see why Vue can provide friendly template syntax while maintaining excellent runtime performance. Developers can also choose to hand-write render functions (usually using JSX or h() helper functions), which is useful in scenarios requiring ultimate programmatic control over rendering logic. However, due to static analysis and optimization benefits from the compiler, template syntax is usually the recommended choice.

Vue Template Syntax Sugar

Vue template syntax provides some very convenient "Syntactic Sugar" that lets us accomplish more with less code, making code more concise and readable. Here are some commonly used ones:

v-bind Shorthand

When we want to bind data to HTML element attributes, we use the v-bind directive.

<!-- Full syntax -->
<img v-bind:src="imageUrl">

<!-- Shorthand -->
<img :src="imageUrl">

Much cleaner, right? Almost all v-bind scenarios can use the colon shorthand.

v-on Shorthand @

When we want to listen to DOM events (like clicks, input, etc.) and execute some JavaScript code, we use the v-on directive.

<!-- Full syntax -->
<button v-on:click="sayHello">Click me</button>

<!-- Shorthand -->
<button @click="sayHello">Click me</button>

Equally convenient!

v-if, v-else-if, v-else: Conditional Rendering

This group of directives lets us decide whether to render certain elements or template sections based on conditions.

• v-if="condition": Element is only rendered when condition is true.
• v-else-if="anotherCondition": If previous v-if or v-else-if doesn't match and anotherCondition is true, element is rendered.
• v-else: If all previous v-if and v-else-if don't match, render this element.

<div v-if="type === 'A'">
  Type A content
</div>
<div v-else-if="type === 'B'">
  Type B content
</div>
<div v-else>
  Other type content
</div>

Note: v-else and v-else-if must immediately follow v-if or v-else-if elements.

Difference from v-show: v-if is "true" conditional rendering - if the condition is false, the element and its child components are destroyed and removed; while v-show simply toggles the element's CSS display property, keeping the element in DOM. When frequently toggling display state, v-show performs better; when conditions rarely change, v-if's initial render overhead might be smaller.

v-for: List Rendering

When we need to render a list based on an array or object, v-for comes in handy.

Iterate arrays: v-for="item in items" or v-for="(item, index) in items"

<!-- Iterate array -->
<li v-for="(item, index) in items" :key="item.id">
  {{ index }} - {{ item.name }}
</li>

items is your data array, item is each element in the array, index (optional) is the element's index.

Iterate objects: v-for="value in object" or v-for="(value, key) in object" or v-for="(value, key, index) in object"

<!-- Iterate object -->
<li v-for="(value, key) in object" :key="key">
  {{ key }}: {{ value }}
</li>

object is your data object, value is the property value, key (optional) is the property name, index (optional) is the index.

Importance of key: When using v-for, it's strongly recommended to bind a unique key attribute for each iterated element (e.g., :key="item.id"). This helps Vue more efficiently identify and reorder elements, especially when list order changes or there are add/delete operations.

v-model: Two-way Data Binding

v-model is typically used on form elements (like <input>, <textarea>, <select>), enabling easy two-way synchronization between form input values and data in Vue instances.

When you type in an input box, the corresponding data automatically updates; conversely, if data changes, the content in the input box also automatically updates.

<input v-model="message" placeholder="Enter message">
<p>Message is: {{ message }}</p>

v-model is actually syntactic sugar for v-bind:value and v-on:input (or other events, depending on form element type).

v-html: Output Raw HTML

Double braces {{ }} output data as plain text. If you want a piece of data to be rendered as HTML, you need to use v-html.

<div v-html="rawHtmlContent"></div>

Security Warning: Dynamically rendering arbitrary HTML is very dangerous as it can easily lead to XSS (Cross-Site Scripting) attacks. So please ensure you only use v-html with "trusted content" and never use it to render user-submitted content.

v-once: One-time Rendering

If certain content doesn't need to update after initial rendering, you can use the v-once directive.

This tells Vue that this element and all its children should only render once. When data changes, this content won't re-render, serving as a performance optimization technique.

<span v-once>This text renders only once: {{ initialMessage }}</span>

These syntax sugars greatly simplify our development work, allowing us to accomplish more with less code.

Source Code

Understanding how Vue Templates work is essentially exploring the core ideas behind its source code design. While diving directly into Vue's complete source code might be challenging for beginners, we can glimpse its design through the functionality of its core modules:

• @vue/compiler-core: This is Vue compiler's core, responsible for parsing template strings into AST, performing various static analysis and optimization, and finally generating render function code. It's a platform-agnostic compiler.
• @vue/compiler-dom: This package builds on @vue/compiler-core, adding specific processing logic for browser DOM environments. For example, it knows how to handle HTML-specific tags and attributes.
• @vue/runtime-core: Contains Vue runtime's core logic, such as Virtual DOM creation, Diff algorithms, component lifecycle management, reactivity system implementation, etc. The core logic of the Renderer is also here.
• @vue/runtime-dom: This package provides runtime support specifically for browser environments, such as APIs for manipulating real DOM, handling DOM events, etc.

// Core compiler - Parse template to AST
import { parse, transform, generate } from '@vue/compiler-core'

const template = '<div>{{ message }}</div>'

// Parse template to AST
const ast = parse(template)
console.log('AST:', ast)

// Transform and optimize AST
const transformedAst = transform(ast, {
  nodeTransforms: [/* various transformers */],
  directiveTransforms: {/* directive transformers */}
})

// Generate render function code
const { code } = generate(transformedAst)
console.log('Generated code:', code)

// DOM compiler - Add browser-related processing
import { compile } from '@vue/compiler-dom'

const template = `
  <div @click="handler" :class="dynamicClass">
    {{ message }}
  </div>
`

// Compile template with DOM-specific transforms
const { code } = compile(template, {
  mode: 'module',
  hoistStatic: true,
  cacheHandlers: true
})

console.log('DOM optimized code:', code)
// Generated code includes optimizations for DOM event handling and attribute binding

// Runtime core - Virtual DOM and reactivity system
import { 
  createApp, 
  ref, 
  reactive, 
  h, 
  render 
} from '@vue/runtime-core'

// Reactive data
const message = ref('Hello Vue!')
const state = reactive({ count: 0 })

// Virtual DOM creation
const vnode = h('div', {
  onClick: () => state.count++
}, `${message.value} - Count: ${state.count}`)

// Component system and lifecycle management
const MyComponent = {
  setup() {
    return { message, state }
  },
  render() {
    return vnode
  }
}

// DOM runtime - Browser DOM operations
import { createApp } from 'vue'

const App = {
  data() {
    return { 
      message: 'Hello World!',
      items: ['Vue', 'React', 'Angular']
    }
  },
  template: `
    <div>
      <h1>{{ message }}</h1>
      <ul>
        <li v-for="item in items" :key="item">
          {{ item }}
        </li>
      </ul>
    </div>
  `
}

// Create app and mount to real DOM
const app = createApp(App)
app.mount('#app')

// DOM operations, event handling, style updates, etc. are all handled at this layer

Conclusion

Vue's template syntax is one of its core charms. It not only makes frontend development more intuitive and efficient, but the compilation optimizations and reactivity system behind it also ensure high application performance. Starting from solving the complexity of modern frontend applications, Vue Templates provide an elegant declarative UI solution.

By understanding core concepts like AST, compiler, and renderer, we can unveil the mystery behind Vue Template's operation. These mechanisms work together to efficiently transform our HTML-like templates into dynamic web pages that can respond to data changes. Various syntax sugars further enhance our development experience.

I hope through this article, you have a clearer understanding of Vue Template's origins, operating principles, and commonly used syntax sugar. Master template syntax well, and you'll be able to more confidently wield Vue to create interactive, smooth web applications!

Core Points Review:

1. Problem Solving: Vue Templates solve the complexity and maintainability issues of traditional DOM operations
2. Declarative Development: Focus on describing "what you want" rather than "how to do it"
3. Compilation Optimization: Achieve high performance through AST parsing, static analysis, and code generation
4. Reactive Updates: Data changes automatically drive view updates
5. Developer Experience: Rich syntax sugar makes development more concise and efficient

Vue Templates are not just a template engine, but an embodiment of modern frontend development best practices!