【vue3】template标签的一些理解（提了一嘴component标签）

1、模板语法

Vue 框架使用了一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。

因此，vue给我们提供模板语法书写html，模板编译后形成高度优化的javascript代码，将其转换为VNode对象（虚拟节点对象）并缓存下来，生成虚拟DOM，并结合响应式的数据和状态，以最优化最少的次数操作、更新真实DOM。

2、template标签

注意⚠️

在vue2中template只允许包含一个子元素，不允许包含多个标签元素；而vue3中允许

template标签用于局部执行模板语法，实现一些代码片段。当没有搭配v-if系列、v-for、v-slot使用的时候，则不会被触发。

它属于占位符，其本身不作为节点挂入DOM树，但是可以将包裹着的子元素展示，形成一虚拟DOM。利用这一特点，我们平常写vue3的时候可以用它来作为父元素，从而提升渲染性能，比如在写v-for、v-if的时候。

🌟以v-for为例子：

如果用普通的div元素作为父元素包裹来渲染列表，父元素也被多次渲染，会出现如下结果：

<div class="parent" v-for="(item,index) in childList">
    <div class="child" key="index">{{item}}</div>
</div>


---实际生成的DOM节点---


<div class="parent">
    <div class="child" key="1">...</div>
</div>
<div class="parent">
    <div class="child" key="2">...</div>
</div>
<div class="parent">
    <div class="child" key="3">...</div>
</div>

....此处省略

这时候，使用template包裹，就可以实现只重复渲染子元素。

<template v-for="(item,index) in childList">
    <div class="child" key="index">{{item}}</div>
</template>


---实际生成的DOM节点---


<div class="child" key="1">...</div>

<div class="child" key="2">...</div>

<div class="child" key="3">...</div>


....此处省略

🌟搭配v-slot插槽使用 

简而言之就是在被引用的组件里面设计<slot>插槽，留一个内容空位；在引用组件的时候，在该组件的子元素里面定制template内容，导入到指定slot插槽内。

举个例子🌰

这里用name属性给slot插槽加了名字，这样外面template可以用v-slot: [slot_name]指定要导入模板内容的对应插槽。（v-slot可以简写为#）

<!--Baselayout.vue-->


<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>



<!--outer.vue-->

<BaseLayout>
  <template v-slot:header>
    <!-- header 插槽的内容放这里 -->
  </template>
</BaseLayout>

🌟提一嘴component标签

<component/>标签可以理解为：用于动态切换渲染组件的“元组件”

举个🌰

导入两个子组件，根据响应数据选择需要切换哪个子组件

注意⚠️

子组件不要忘记在components里面注册哦～～～

<script>
import Foo from './Foo.vue'
import Bar from './Bar.vue'

export default {
  components: { Foo, Bar },
  data() {
    return {
      view: 'Foo'
    }
  }
}
</script>

<template>
  <component :is="view" />
</template>