关于javascript:petitevue源码剖析优化手段template详解

什么是 <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