petite-vue原始碼剖析-優化手段template詳解

肥仔John發表於2022-03-16
Vue原始碼優化

什麼是<template>元素？

<template>是2013年定稿用於提供一種更統一、功能更強大的模板本存放方式。具體表現為

  1. 通過<template>元素屬性content獲取已例項化的HTML元素(不是字串而已)

    <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>以及其子節點均不可視
  3. <template>下的img元素的src屬性即使有值也不會發出資源請求
  4. <template>下的script和css規則均不會解析和執行

更多資訊請檢視：《HTML語義化：HTML5新標籤——template》

v-if搭配<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>

首次渲染過程如下：

  1. 將通過walk.ts中的resolveTemplate方法將App.$template渲染到DOM樹上

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

  2. 解析子節點<template v-if="status === 'offline'"></template>

    1. 進入directives/if.ts識別附著v-if、v-else的元素，並將它們從DOM樹中移除
    2. 根據條件表示式status === 'offline'對以離線節點(Dettached Node)<template v-else></template>為基礎建立塊物件(Block)
    <div v-scope="App">
</div>

  3. 在塊物件的建構函式中會識別<template>元素，並通過content.cloneNode方法複製<template>的子節點作為模板，進行後續解析處理

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

  4. 最後directives/if.ts裡會將塊物件插入父節點中且位於錨點元素前面

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

小結

  1. 這裡利用的是<template>元素本身的特性實現線上解析使用者不可見(你看不到我，你看不到我:D)，和避免如<img src="logo.png">傳送無效請求的問題；
  2. 由於<template>是在block.ts中處理獲取模板，因此v-for搭配<template>的原理和v-if是一致的。

錯誤使用

雖然<template>能幫助我們優化使用者體驗和效能，但有些時候也會讓我們掉到坑裡面，下面一起繞過這些坑吧！

<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>

根塊物件對應的是<div v-scope="App"></div>，而<template>由於沒有附加v-if或v-for，因此不會為其建立新的塊物件進行處理，最後得到的UI就是這樣的：

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

用於無法看到文字Hello。

總結

通過本篇內容的介紹，我們記得<template>必須搭配v-if或v-for使用哦！
後面我們將探索@vue/reactivity在petite-vue的使用，敬請期待。
尊重原創，轉載請註明來自：https://www.cnblogs.com/fsjoh... 肥仔John

相關文章