[分享]使用jsx写vue

在Vue中，JSX可以作为一种可选的语法来使用。JSX与渲染函数和模板语法一样强大，是一种更好地组合UI组件的方式。使用JSX编写Vue组件能够让代码更加简洁、可读性更高、维护更加容易，从而提高开发效...

在Vue中，JSX可以作为一种可选的语法来使用。JSX与渲染函数和模板语法一样强大，是一种更好地组合UI组件的方式。

使用JSX编写Vue组件能够让代码更加简洁、可读性更高、维护更加容易，从而提高开发效率。

在Vue中使用JSX需要安装babel-plugin-transform-vue-jsx插件。

npm install --save-dev babel-plugin-transform-vue-jsx 

引入插件并作为babel的预设使用：

module.exports = {
  presets: ['@babel/preset-env'],
  plugins: [
    [
      'transform-vue-jsx',
      {
        isCustomElement: tag => tag.startsWith('ion-')
      }
    ]
  ]
} 

安装完成后我们就可以愉快地使用JSX来编写我们的Vue组件了。

在Vue中使用JSX，需要借助于Vue的JSX编译器，将JSX编译成Vue的render函数。

我们需要使用一个render函数来渲染组件，render函数的返回值是通过JSX写的组件。

import { createVNode } from 'vue';
const MyComponent = {
  props:['text'],
  render() {
    return <div>{this.text}</div>
  }
} 

在Vue中，JSX中的标签名必须是小写字母开头的，驼峰法命名。

如果我们需要在组件中使用JSX，则需要先导入Vue。

import {createVNode} from 'vue';
const HelloWorld = {
  render() {
    return createVNode('div', null, 'Hello World');
  }
} 

这是一个简单的Hello World组件，它使用JSX语法实现。

当然，JSX并不是必须的，通过编写渲染函数，我们同样可以创建出Vue组件：

import {h} from 'vue';
const HelloWorld = {
  render() {
    return h('div', 'Hello World');
  }
} 

通过JSX来编写Vue组件更加方便，易读性更高，而且使用起来跟React十分相似。如果你对React有一定的了解，那么使用JSX来编写Vue组件也许会更加得心应手。