1.teleport  在组件内的任何位置渲染内容

将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。

例:将组件dialog添加到body下面

<teleport to="body">   <el- dialog -->    </teleport> 

2.fragments  多个根元素外层不需要包裹

<fragment>    <div>11</div><div>22</div></fragment>

3.render 函数渲染组件视图；

通过函数实现以上模板语法

render() {return h('div', [h('button', { on: { click: this.toggleText } }, 'Toggle Text'),h('div', { style: { display: this.showText ? 'block' : 'none' } }, this.text)]);}

4. 自定义指令

例子： 聚焦

<template><div><input v-auto-focus /></div>
</template>directives: {autoFocus: {mounted(el) {el.focus();}}}

5. suspense 异步组件加载等待过程中，优先显示一些其他的内容

<template><div><Suspense><template #default> 
//<template #default>这层包裹可去掉<AsyncComponent /></template><template #fallback><div>Loading...</div></template></Suspense></div>import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'));

6. Provide/Inject 父子孙...通信

//父
import { provide } from 'vue';
provide('tosunFunc', tosunData);//子孙
import { inject } from 'vue';
const tosunData = inject('tosunFunc')