vue3 组件的 n 种写法

前言

在 vue3 里，分为选项式 API 和 组合式 API，选项式 API 基本就是 vue2 时期的语法了，不推荐使用，详见 vue2 组件的 n 种写法。更推荐的是 组合式 API。本文也是只介绍组合式 API 的方式。
vue 的组件拆开来其实分成两大块，数据和模版字符串，vue 组件的不同写法一般是模版字符串的来源不同，可以从 template选项来，可以从 setup返回的渲染函数来，也可以从单文件组件的 <template>标签内来。

template 写法

import { ref } from "vue"
export default {
  template: `
    <div>
      {{ count }}
      <button @click="add">加一</button>
    </div>
  `,
  setup() {
    const count = ref(0);
    const add = () => {
      count.value++;
    }
    return {
      count,
      add
    }
  }
}

渲染函数写法

模版如果不写在 template选项中，可以写在setup函数中。在setup中返回一个渲染函数。

import { ref, h } from "vue"
export default {
  setup() {
    const count = ref(0);
    const add = () => {
      count.value++;
    }
    return () => h("div", [
      count.value,
      h("button", {
        onClick: add
      }, "加一")
    ])
  }
}

单文件组件

单文件组件，即 .vue文件，需要 vue-loader编译器的支持。
单文件组件中提供了 setup()函数的简写方式 <script setup>，因此使用单文件组件时一般直接使用 <script setup>的形式。
语法如下：

<template>
  <div>
  {{ count }}
  <button @click="add">加一</button>
  </div>
</template>
<script setup>
import { ref } from "vue"; 
const count = ref(0);
const add = () => {
  count.value++;
}
</script>