---

Vue3的模板语法和Vue2有所不同，有了一系列的改进和优化。下面我们就来详细地了解一下Vue3的模板语法。

插值

Vue3里的插值用的是{{}}，如：{{message}}，这个和Vue2的一样。

指令

指令用v-开头，Vue3的指令和Vue2有所不同，下面是Vue3的指令：

• v-bind：动态绑定数据。用法与Vue2相同。
• v-model：表单元素双向绑定。用法与Vue2相同。
• v-if、v-else-if、v-else：条件渲染。与Vue2一致。
• v-show: 条件渲染。与Vue2一致。
• v-for: 列表渲染。与Vue2一致。
• v-once: 只渲染一次。
• v-html: 将绑定的值解析为HTML。

动态属性

Vue3里可以动态地绑定属性，如<img :src="imgSrc">，其中imgSrc是动态的。Vue3还支持动态地绑定多个属性，如<img :src="imgSrc" :alt="imgAlt">，其中imgSrc和imgAlt都是动态的。

动态组件

Vue3动态组件的用法和Vue2一致，使用<component>标签。

自定义指令

自定义指令有所改变。Vue3中使用app.directive()方法来自定义全局指令，如：

app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

使用时在标签中使用v-focus即可。 Vue3中还可以使用setup()函数来定义局部指令。

插槽

插槽在Vue3里也有所改变，使用<slot>代替了Vue2中的<slot></slot>。Vue3还支持具名插槽，使用<slot name="xxx">来实现。另外，Vue3还支持了动态插槽。

Teleport

Vue3中引入了Teleport（传送门）的概念来解决弹窗遮罩层的问题。使用方法为：

<teleport to="#modal">
  <dialog>
    ...
  </dialog>
</teleport>
<div id="modal"></div>

这样，弹窗遮罩层就可以在不同的位置渲染了。

Suspense

Suspense可以实现对懒加载组件或异步请求的等待状态的自定义展示，使用如下：

<suspense>
  <template #default>
    <component :is="asyncComponent" />
  </template>
  <template #fallback>
    <div>Loading...</div>
  </template>
</suspense>

当异步请求完成，展示组件。如果异步请求失败，或者异步请求过程中需要等待，则展示等待状态，即Loading…

综上所述，Vue3的模板语法相比Vue2有了许多优化和改进，如支持动态属性、自定义指令、Teleport和Suspense。Vue3的模板语法更加贴近JavaScript，也更加易读易懂，开发效率得到了很大的提高。