体会 setup + template 与 setup + tsx 不同的魅力

前言

tsx 与 template 显著的不同点在于, tsx 是 ts 的扩展 常用语法为 {}, tempalte 是 html 的扩展, 常用语法是 {{}} + 指令

新建一个 vite + vue3.2 + ts 项目

npm init vue@latest

// 然后跟着引导添加所需创建项目
// 精简项目开始我们的对比

基本的语法结构

template

<script lang="ts" setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <div>
    <h1>{{ count }}</h1>
  </div>
</template>

tsx

<script lang="tsx">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const count = ref(0)

    return () => (
      <div>
        <h1>{count.value}</h1>
      </div>
    )
  }
})
</script>

v-if

template

<script lang="ts" setup>
import { ref } from 'vue'

const count = ref(0)

const isShowBasketball = ref<boolean>(true)
</script>

<template>
  <div>
    <h1>{{ count }}</h1>
    <li v-if="isShowBasketball">篮球</li>
    <li v-else>足球</li>
  </div>
</template>

tsx

<script lang="tsx">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const count = ref(0)

    const isShowBasketball = ref<boolean>(true)

    return () => (
      <div>
        <h1>{count.value}</h1>

        {isShowBasketball.value ? <li>篮球</li> : <li>足球</li>}
      </div>
    )
  }
})
</script>

v-show 两者是通用的, 就不比较了

v-for

template

<script lang="ts" setup>
import { ref } from 'vue'

const count = ref(0)

const isShowBasketball = ref<boolean>(true)

const team = ref(['小明', '小红', '小黑'])
</script>

<template>
  <div>
    <h1>{{ count }}</h1>
    <li v-if="isShowBasketball">篮球</li>
    <li v-else>足球</li>

    <div>------</div>

    <li v-for="item in team" :key="item">
      {{ item }}
    </li>
  </div>
</template>

tsx

<script lang="tsx">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const count = ref(0)

    const isShowBasketball = ref<boolean>(true)

    const team = ref(['小明', '小红', '小黑'])

    return () => (
      <div>
        <h1>{count.value}</h1>
        {isShowBasketball.value ? <li>篮球</li> : <li>足球</li>}

        <div>------</div>

        {team.value.map((item: string) => (
          <li>{item}</li>
        ))}
      </div>
    )
  }
})
</script>

v-on

template

<script lang="ts" setup>
import { ref } from 'vue'

const count = ref(0)

const isShowBasketball = ref<boolean>(true)

const team = ref(['小明', '小红', '小黑'])

type addCountType = () => void
const addCount: addCountType = () => {
  count.value++
}

const primary = ref('primary')
</script>

<template>
  <div>
    <h1>{{ count }}</h1>
    <li v-if="isShowBasketball">篮球</li>
    <li v-else>足球</li>

    <div>------</div>

    <li v-for="item in team" :key="item">
      {{ item }}
    </li>

    <div>------</div>

    <a-button :type="primary" @click="addCount">加一</a-button>
  </div>
</template>

tsx

<script lang="tsx">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const count = ref(0)

    const isShowBasketball = ref<boolean>(true)

    const team = ref(['小明', '小红', '小黑'])

    type addCountType = () => void
    const addCount: addCountType = () => {
      count.value++
    }

    const primary = ref('primary')

    return () => (
      <div>
        <h1>{count.value}</h1>
        {isShowBasketball.value ? <li>篮球</li> : <li>足球</li>}

        <div>------</div>

        {team.value.map((item: string) => (
          <li>{item}</li>
        ))}

        <div>------</div>

        <a-button type={primary.value} onClick={addCount}>
          加一
        </a-button>
      </div>
    )
  }
})
</script>

主要的功能对比, 就在这里了