onmounted vue3_使用Vue 3.0做JSX(TSX)风格的组件开发

前言

我日常工作都是使用React来做开发，但是我对React一直不是很满意，特别是在推出React Hooks以后。

不可否认React Hooks极大地方便了开发者，但是它又有非常多反直觉的地方，让我难以接受。所以在很长一段时间，我都在尝试寻找React的替代品，我尝试过不少别的前端框架，但都有各种各样的问题或限制。

在看到了Vue 3.0 Composition-API的设计，确实有眼前一亮的感觉，它既保留了React Hooks的优点，又没有反复声明销毁的问题，而Vue一直都是支持JSX语法的，3.0对TypeScript的支持又非常好，所以我开始尝试用Vue + TSX来做开发。

Vue 3.0已经发布了alpha版本，可以通过以下命令来安装：

npm install vue@next --save

简单示例

先来看看用Vue3.0 + TSX写一个组件是什么什么样子的。

实现一个Input组件：

import {
     defineComponent } from 'vue';

interface InputProps {
    
  value: string;
  onChange: (value: string) => void;
}
const Input = defineComponent({
    
  setup(props: InputProps) {
    
    const handleChange = (event: KeyboardEvent) => {
    
      props.onChange(event.target.value);
    }

    return () => (
      <input value={
    props.value} onInput={
    handleChange} />
    )
  }
})

可以看到写法和React非常相似，和React不同的是，一些内部方法，例如handleChange，不会在每次渲染时重复定义，而是在setup这个准备阶段完成，最后返回一个“函数组件”。

这算是解决了React Hooks非常大的一个痛点，比React Hooks那种重复声明的方式要舒服多了。

Vue 3.0对TS做了一些增强，不需要像以前那样必须声明props，而是可以通过TS类型声明来完成。

这里的defineComponent没有太多实际用途，主要是为了让TS类型提示变得友好一点。

Babel插件

为了能让上面那段代码跑起来，还需要有一个Babel插件来转换上文中的JSX，Vue 3.0相比2.x有一些变化，不能再使用原来的vue-jsx插件。

我们都知道JSX（TSX）实际上是语法糖，例如在React中，这样一段代码：

const input = <input value="text" />

实际上会被babel插件转换为下面这行代码：

const input = React.createElement('input', {
     value: 'text' });

Vue 3.0也提供了一个对应React.createElement的方法h。但是这个h方法又和vue 2.0以及React都有一些不同。

例如这样一段代码：

<div class={['foo', 'bar']} style={