Fragments

  • <template>中可以有多个根节点
<template>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</template>

原理

DocumentFragment，文档片段接口，一个没有父对象的最小文档对象。它被作为一个轻量版的 Document 使用，就像标准的document一样，存储由节点（nodes）组成的文档结构。与document相比，最大的区别是DocumentFragment 不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会导致性能等问题。

Emits Component Option

vue3中组件发送的自定义事件需要定义在emits选项中：

  • 原生事件会触发两次，比如：click

  • 更好的指示组件工作方式

  • 对象形式校验

<script>
  export default{
    emits:['my-click']
  }
</script>

<template>
  <div @click="$emit('my-click')">自定义事件</div>
</template>