Vue 放弃繁琐的render函数，拥抱JSX

# 背景

如果你写了很多 render 函数，可能会觉得下面这样的代码写起来很痛苦：

createElement(
  'anchored-heading', {
    props: {
      level: 1
    }
  }, [
    createElement('span', 'Hello'),
    ' world!'
  ]
)

1
2
3
4
5
6
7
8
9
10

[
	{ label: '最近更新时间', prop: 'update_time', align: 'center', visible: false },
  {
    label: '操作', align: 'center', 'min-width': '180px', render: (h, { row }) => {
      return h('div',
        [h('el-popconfirm', {
          props: { title: '确定删除吗？', 'confirm-button-type': 'danger' },
          class: 'mr-10',
          on: {
            confirm: () => { this.delItem(row) }
          }
        },
        [h('el-button', { slot: 'reference', props: { size: 'mini', type: 'danger' }}, '删除')]),
        h('el-button', { props: { size: 'mini', type: 'primary' }, nativeOn: { click: () => { this.editItem(row) } }}, '编辑')]
      )
    }
  }
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

特别是对应的模板如此简单的情况下：

<anchored-heading :level='1'>
  <span>Hello</span> world!
</anchored-heading>

1
2
3

<el-popconfirm
	title='确定删除吗？'
	'confirm-button-type'='danger'  
  onConfirm='() => this.delItem(row)'
>
   <el-button slot='reference' size='mini' type='danger'>删除</el-button>
</el-popconfirm>

<el-button size='mini' type='danger' onClick={() => this.editItem(row)}>编辑</el-button>

1
2
3
4
5
6
7
8
9
10

# 安装配置

# babel7 (vue cli 默认是使用了babel7的）

# 安装babel插件

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

配置babel.config.js

module.exports = {
  presets: ['@vue/babel-preset-jsx'],
}

1
2
3

如果你出现这个错误： https://github.com/vuejs/jsx/issues/34 (opens new window)

Duplicate declaration "h" (This is an error on an internal node. Probably an internal error.) 试试这个（需要说明H函数传递）

module.exports = {
  presets: [
    [
      '@vue/babel-preset-jsx',
      {
        injectH: false
      }
    ]
  ]
}

1
2
3
4
5
6
7
8
9
10
11

# babel 6

npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-env --save-dev

配置.babelrc

{
  "presets": ["env"],
  "plugins": ["transform-vue-jsx"]
}

1
2
3
4

# 使用

我这里举例比较复杂的例子也是我遇到的

# slot

正常的code是这样的, element-ui举例

<el-table-column
  label="姓名"
  width="180">
  <template slot-scope="scope">
    <el-popover trigger="hover" placement="top">
      <p>姓名: {{ scope.row.name }}</p>
      <p>住址: {{ scope.row.address }}</p>
      <div slot="reference" class="name-wrapper">
        <el-tag size="medium">{{ scope.row.name }}</el-tag>
      </div>
    </el-popover>
  </template>
</el-table-column>

1
2
3
4
5
6
7
8
9
10
11
12
13

# Table-column Scoped Slot

name	说明
—	自定义列的内容，参数为 { row, column, $index }
header	自定义表头的内容. 参数为 { column, $index }

🍖转换成jsx就是

<el-table-column
  label='姓名'
  width='180' {
    ...{
      scopedSlots: {
        default: scope => {
          return <el-popover trigger='hover' placement='top'>
            <p>姓名: { scope.row.name }</p>
            <p>住址: { scope.row.address }</p>
            <div slot='reference' class='name-wrapper'>
              <el-tag size='medium'>{ scope.row.name }</el-tag>
            </div>
          </el-popover>
        }
      }
    }
  }>
</el-table-column>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

上次更新: 2022/05/04, 15:35:13

← Vue3 原理 Proxy实现响应式 Awesome React→