Vue学习记录之十一 tsx

一、介绍tsx

我们开始接触的都是Template写模版，vue3开始对typescript支持，jsx是js的语法扩展，允许在js中编写html代码。 如:

const fn = () => <div>hello! world</div>

我们要知道无论是 template 还是 JSX，在 vue 中最后都是编译成 render 函数。 Vue 在进行template模板编译的时候，会做各种优化，这些优化虽然会耗费构建时间，也就是构建时会比较慢，但是这些优化运用到最后产物的运行时的时候会大大提升性能。JSX构建更快，但是性能较差。template构建更慢，但是性能较好

二、安装

1、可以在使用脚手架上安装的时候，选择支持jsx
2、独立安装

pnpm install @vitejs/plugin-vue-jsx -D

安装完了，需要配置，在vite.config.ts中

import {
   
    
     fileURLToPath, URL } from 'node:url'

import {
   
    
     defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'   //第一步

// https://vitejs.dev/config/
export default defineConfig({
   
    
    
  plugins: [
    vue(),
    vueJsx(),  //第二步
  ],
  resolve: {
   
    
    
    alias: {
   
    
    
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

三、实例： 直接返回一个渲染函数

在App.vue中使用

<template>
    <lvmanba></lvmanba>
</template>
<script setup lang='ts'>
import {
     
      
       ref,reactive } from 'vue'
//ts文件可以当成一个组件来使用
import lvmanba from './App'  //这里不能写App.ts，否则就报错，让他自己去搜索
</script>

方法1: 直接返回一个渲染函数

在src下建立一个 App.tsx文件，代码如下：

export default function(){
   
    
    
    return (<div style="color:red">lvmanbas<