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