Setup 语法糖（推荐）

<template>
  <div>{{ name }}</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const name = ref("天气好");
</script>

<style scoped></style>

Vue2 选项式写法

经典写法

<template>
  <div>{{ name }}</div>
</template>

<script lang="ts">
export default {
  data: () => ({ name: "天气好" }),
};
</script>

结合 defineComponent

<template>
  <div>{{ name }}</div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  data: () => ({ name: "天气好" }),
});
</script>

Vue3 选项式写法

<template>
  <div>{{ name }}</div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  setup(prop, context) {
    return { name: "天气好" };
  },
});
</script>

手写渲染函数

基础写法

<script lang="ts">
import { defineComponent, h } from "vue";
export default defineComponent({
  data: () => ({ name: "天气好" }),
  render() {
    return h("div", this.name);
  },
});
</script>

Setup 返回渲染函数

<script lang="ts">
import { defineComponent, h, ref } from "vue";
export default defineComponent({
  setup() {
    const name = ref("天气好");
    return () => h("div", name.value);
  },
});
</script>

defineComponent 直接传入 Setup

<script lang="ts">
import { defineComponent, h, ref } from "vue";
export default defineComponent(() => {
  const name = ref("天气好");
  return () => h("div", name.value);
});
</script>

Vue & JSX

Render 中使用 JSX

<script lang="tsx">
import { defineComponent } from "vue";
export default defineComponent({
  data: () => ({ name: "天气好" }),
  render() {
    return <div>{this.name}</div>;
  },
});
</script>