Analysis of petite-vue source code - detailed explanation of optimization method template

What is the <template> element?

<template> is finalized in 2013 to provide a more unified and more powerful way of storing templates. Specifically,

1. Get the instantiated HTML element (not just a string) via <template> element attribute content

    <template id="tpl">
     <div>a</div>
     <div>b</div>
   </template>
   <script>
     const tpl = document.getElementById('tpl')
     tpl.content // document-fragment
     tpl.content.children[0].outerHTML // <div>a</div>
   </script>

2. <template> and its child nodes are not visible
3. The <template> src attribute of the img element under ---f8f447e52e036250f87eb2b79dad14fe--- will not issue a resource request even if it has a value
4. The script and css rules under <template> will not be parsed and executed

For more information, please see: "HTML Semantic: HTML5 New Tag - Template"

v-if with <template>

 <div v-scope="App"></div>

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'

  createApp({
    App: {
      $template: `
      <template v-if="status === 'offline'">
        <span> OFFLINE </span>
      </template>
      <template v-else>
        <span> ONLINE </span>
      </template>
      `,
    }
    status: 'online'
  }).mount('[v-scope]')
</script>

The first rendering process is as follows:

1. Will render App.$template to the DOM tree through the --- 44303b74d22d9673d7fed688d6052ef6 resolveTemplate method in walk.ts

    <div v-scope="App">
      <template v-if="status === 'offline'">
        <span> OFFLINE </span>
      </template>
      <template v-else>
        <span> ONLINE </span>
      </template>
   </div>

2. Parse child node <template v-if="status === 'offline'"></template>

   1. Go into directives/if.ts to identify elements attached to v-if , v-else and remove them from the DOM tree
   2. According to the conditional expression status === 'offline' to create a block object (Block) based on the offline node (Dettached Node) <template v-else></template>

    <div v-scope="App">
   </div>

3. In the constructor of the block object, the <template> element will be recognized, and the child node of <template> 2f3b182ee34701a6e641fcdd0dbb0d00--- will be copied through the content.cloneNode method as a template for subsequent parsing processing.

    <div v-scope="App">
   </div>

4. Finally, the block object will be inserted into the parent node and in front of the anchor element in directives/if.ts

    <div v-scope="App">
      <span> ONLINE </span>
   </div>

summary

1. Here is the use of <template> the characteristics of the element itself to achieve online analysis of the user invisible (you can't see me, you can't see me :D), and avoid sending invalid requests such as <img src="logo.png"> The problem;
2. Since <template> is processing the acquisition template in block.ts , the principle of --- v-for with <template> v-if is the same as ---9bba3378450e0e0.

wrong usage

Although <template> can help us optimize user experience and performance, but sometimes it will let us fall into the pit, let's bypass these pits together!

 <div v-scope="App"></div>

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'

  createApp({
    App: {
      $template: `
      <template>
        <div>Hello</div>
      </template>
      `,
    }
    status: 'online'
  }).mount('[v-scope]')
</script>

The root block object corresponds to <div v-scope="App"></div> , while <template> does not create a new dd---98f53e0e49b5b52f85177ed259408478---or ---db7ff548fc63651e8 block for its new dd---916533 block because there is no append v-if or v-for , so The object is processed, and the final UI is like this:

 <div v-scope="App">
  <template>
    <div>Hello</div>
  </template>
</div>

Used for not being able to see the text Hello.

Summarize

Through the introduction of this content, we remember that <template> must be used with v-if or v-for !
Later we will explore the use of @vue/reactivity in petite-vue, so stay tuned.
Respect originality, please indicate the source for reprint: https://www.cnblogs.com/fsjohnhuang/p/16011271.html Fat Boy John

"Anatomy of Petite-Vue Source Code" booklet

"Petite-Vue Source Code Analysis" combines examples to interpret the source code line by line from online rendering, responsive system and sandbox model, and also makes a detailed analysis of the SMI optimization dependency cleaning algorithm using the JS engine in the responsive system. It is definitely an excellent stepping stone before getting started with Vue3 source code. If you like it, remember to forward it and appreciate it!