拥抱 Vue 3 系列之 JSX 语法

时间 2020-07-07

标签拥抱 vue 系列 jsx 语法繁體版

原文原文链接

第 59 篇原创好文～
本文首发于政采云前端团队博客：拥抱 Vue 3 系列之 JSX 语法

“别再更新了，学不动了”。这句话不知道出了多少开发者的辛酸。在过去的一年中，Vue 团队一直都在开发 Vue.js 的下一个主要版本，就在 6 月底，尤大更新同步了 Vue 3 及其周边生态的状态(Vue 3: mid 2020 status update)。html

if (isTrue("I am planning to use Vue 3 for a new project")) {
  if (isTrue("I need IE11 support")) {
    await IE11CompatBuild() // July 2020
  }
  if (isTrue("RFCs are too dense, I need an easy-to-read guide")) {
    await migrationGuide() // July 2020
  }
  if (isTrue("I'd rather wait until it's really ready") {
      await finalRelease() // Targeting early August 2020
  })
  run(`npm init vite-app hello-vue3`)
  return
}

咱们能够看到，若是一切顺利的话，预计在 8 月份，Vue 3 的正式版本就能够和咱们见面了，目前距离发布正式版还有必定的差距，还要作一些兼容性的工做。同时还会提供对 IE11 的支持。前端

Vue 3 为了达到更快、更小、更易于维护、更贴近原生、对开发者更友好的目的，在不少方面进行了重构：vue

全面拥抱 TypeScript
重构 complier
重构 Virtual DOM
......

写在前面

这是该系列文章的第一篇，后续会持续更新，覆盖 Vue 3 生态经常使用库。JSX 是一个小众群体使用开发方式，第一篇以 JSX 为切入点，目标是让大多数开发 Vue 的同窗也对 JSX 有必定的认知，在用 Vue 开发复杂应用时，也能有更加灵活的方式。git

好比当开始写一个只能经过 level prop 动态生成标题 (heading) 的组件时，你可能很快想到这样实现：github

<script type="text/x-template" id="anchored-heading-template">
  <h1 v-if="level === 1">
    <slot></slot>
  </h1>
  <h2 v-else-if="level === 2">
    <slot></slot>
  </h2>
  <h3 v-else-if="level === 3">
    <slot></slot>
  </h3>
</script>

这里用模板并非最好的选择，在每个级别的标题中重复书写了 <slot></slot>，不够优雅。express

若是尝试用 JSX 来写，代码就会变得简单不少。npm

const App = {
  render() {
    const tag = `h${this.level}`
    return <tag>{this.$slots.default}</tag>
  }
}

看过 Ant Design Vue 源码 (下面简称为 antdv) 的同窗应该知道， antdv 的底层是基于 JSX 来实现的，也是 Vue 生态中使用 JSX 的深度用户。antd 为了尽快的兼容 Vue 3，和 Vue 官方展开合做，因而一块儿开发了 @ant-design-vue/babel-plugin-jsxapi

Vue JSX 简介

对于使用 React 的开发者来讲，JSX 再熟悉不过了，可是若是你是一个 Vue 的重度用户，可能对 JSX 不是特别熟悉，甚至听到有同窗说没有 template 的 Vue 项目没有灵魂。babel

先来看下面一段代码：antd

const el = <div>Vue 3</div>;

这段代码既不是 HTML 也不是字符串，被称之为 JSX，是 JavaScript 的扩展语法。JSX 可能会令人联想到模板语法，可是它具有 Javascript 的彻底变成能力。

看到这里可能会有疑问，很多同窗可能会觉得 JSX 是 React 中特有的，其实否则。大多数同窗都知道，咱们日常在 .vue 文件中开发的代码，实际上会被 vue-loader 处理，但可能少数同窗去看过咱们手把手写出的代码，会变编译成啥样。有兴趣的同窗能够戳这个地址来看下。vue-template-explorer (由于众所周知的缘由，可能访问略慢)

<div id="app">{{ msg }}</div>

function render() {
  with(this) {
    return _c('div', {
      attrs: {
        "id": "app"
      }
    }, [_v(_s(msg))])
  }
}

观察上述代码咱们发现，到运行阶段实际上都是 render 函数在执行。Vue 推荐在绝大多数状况下使用 template 来建立你的 HTML。然而在一些场景中，就须要使用 render 函数，它比 template 更加灵活。

写过 render 函数的同窗可能深有体会，书写复杂的 render 函数异常痛苦，并且难以维护，很是容易被称之为 “祖传代码”。好在 2.0 的官方提供了一个 Babel 插件，能够将更接近于模板语法的 JSX 转译成 JavaScript。

使用过 React 的同窗对于如何写 JSX 语法必定很是熟悉了，然而，Vue 2 中的 JSX 写法和 React 仍是有一些略微的区别。React 中全部传递的数据都挂在顶层。

const App = <A className="x" style={style} onChange={onChange} />

Vue 2 中，仅仅属性就有三种：组件属性 props，普通 html 属性 attrs，DOM 属性 domProps。想要更多了解如何在 Vue 2 中写 JSX 语法，能够看这篇，在 Vue 中使用 JSX 的正确姿式。

Vue 3 中对 JSX 带来的改变

属性传递

Vue 3 中，属性这块的传递和 React 相似，意味这不须要再传递 props，attrs 这些属性。

// before
{
  class: ['foo', 'bar'],
  style: { color: 'red' },
  attrs: { id: 'foo' },
  domProps: { innerHTML: '' },
  on: { click: foo },
  key: 'foo'
}

// after
{
  class: ['foo', 'bar'],
  style: { color: 'red' },
  id: 'foo',
  innerHTML: '',
  onClick: foo,
  key: 'foo'
}

指令改版

Vue 3 把大多数全局 API 和内部 helper 移到了 ES 模块中导出(譬如 v-model、transition、teleport)，从而使得 Vue 3 在增长了不少新特性以后，基线的体积反而小了。

v-model、v-show 这些 API 所有经过模块导出的方式来引入

基线体积：没法舍弃的代码体积

咱们来看一段很是简单的代码 <input v-model="x" />，在 Vue 2 和 Vue 3 中的编译结果有何不一样

// before
function render() {
  with(this) {
    return _c('input', {
      directives: [{
        name: "model",
        rawName: "v-model",
        value: (x),
        expression: "x"
      }],
      domProps: {
        "value": (x)
      },
      on: {
        "input": function ($event) {
          if ($event.target.composing) return;
          x = $event.target.value
        }
      }
    })
  }
}

// after
import { vModelText as _vModelText, createVNode as _createVNode, withDirectives as _withDirectives, openBlock as _openBlock, createBlock as _createBlock } from "vue"

export function render(_ctx, _cache) {
  return _withDirectives((_openBlock(), _createBlock("input", {
    "onUpdate:modelValue": $event => (_ctx.x = $event)
  }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
    [_vModelText, _ctx.x]
  ])
}

能够看到在 Vue 3 中，对各个 API 作了更加细致的拆分，理想状态下，用户能够在构建时利用摇树优化 (tree-shaking) 去掉框架中不须要的特性，只保留本身用到的特性。模版编译器会生成适合作 tree-shaking 的代码，不须要使用者去关心如何去作，这部分的改动一样须要在 JSX 写法中实现。

模板编译器中增长了 PatchFlag，在 JSX 的编译过程一样也作了处理，性能会有提高，可是考虑到 JSX 的灵活性，作了一些兼容处理，该功能还在测试阶段。

从 Vue 2 到 Vue 3 的过渡

Vue 3 虽然引入了一部分破坏性的更新，但对于绝大多数 Vue 2 的 API 仍是兼容的。那么一样的，咱们也要尽量让使用 JSX 的用户经过最小的成本升级到 Vue 3，这是一个核心的目标。写这篇文章的时候，antdv 已经使用 @ant-design-vue/babel-plugin-jsx 重构了大约 70% 的功能，预计会在 Vue 3 正式版以前发布测试版，大几率会是东半球最快兼容 Vue 3 的企业级组件库。

Vue 3 JSX 的 API 设计

函数式组件

const App = () => <div>Vue 3 JSX</div>

普通组件

const App = {
  render() {
    return <div>Vue 3.0</div>
  }
}

const App = defineComponent(() => {
  const count = ref(0);

  const inc = () => {
    count.value++;
  };

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

Fragment

const App = () => (
  <>
    <span>I'm</span>
    <span>Fragment</span>
  </>
)

Fragment 参考 React 的写法，尽量写起来更加方便

Attributes/Props

const App = () => <input type="email" />

const placeholderText = 'email'
const App = () => (
  <input
    type="email"
    placeholder={placeholderText}
  />
)

指令

建议在 JSX 中使用驼峰 ( vModel)，可是 v-model 也能用

v-show

const App = {
  data() {
    return { visible: true };
  },
  render() {
    return <input vShow={this.visible} />;
  },
};

v-model

修饰符：使用 ( _) 代替 ( .) ( vModel_trim={this.test})

export default {
 data: () => ({
   test: 'Hello World',
 }),
 render() {
   return (
     <>
       <input type="text" vModel_trim={this.test} />
       {this.test}
     </>
   )
 },
}

自定义指令

const App = {
  directives: { antRef },
  setup() {
    return () => (
      <a
        vAntRef={(ref) => { this.ref = ref; }}
      />
    );
  },
}

插槽

关于指令、插槽最终的 API 还在讨论中，有想法的能够去留言。Vue 3 JSX Design

Vue 2 的 JSX 写法如何快速迁移到 Vue 3

因为 antdv 的底层基本上都是基于 JSX 来写的，想要快速迁移到 Vue 3，就必须有一个比较好的插件来支持，这也是为何会有这个插件的缘由。固然在实现过程当中也踩了不少坑。

目前用法和 Vue 2 的语法大多数是一致的，为了帮助更快迁移，在插件中作了针对旧 VNode 格式的兼容层，这里只能兼容一部分写法，以及部分语法的兼容会增长运行时的性能开销，因此咱们但愿可以将咱们的经验分享给你们，让你们少走弯路！

{
  "plugins": ["@ant-design-vue/babel-plugin-jsx", { "transformOn": true, "compatibleProps": true }]
}

transformOn

针对 Vue 2 中 on: { click: xx } 写法的兼容，在运行时中会转为 onClick: xxx

compatibleProps

上文提到 Vue 3 对属性的传递作了变动，props、attrs 这些都不存在了，所以若是设置了这个属性为 true，在运行时也会被解构到第一层的属性中。

须要注意的一点，目前一旦开启这两个属性，在 createVNode 的第二个参数，都会包一个 compatibleProps 和 transformOn 方法，因此酌情开启这两个参数。对于使用 Vue 2 的 JSX 同窗，若是没有使用到比较”鲜为人知“ 的 API的状况下，均可以快速得迁移。

那么 antdv 又是如何作迁移的呢？考虑到 antdv 是个组件库，都包一层 compatibleProps 势必不太优雅，所以没有选择开启这个两个开关。这里插一句，目前 antdv 的迁移还在进行中，相关的进度都在这个 issue 里面（Vue 3 支持），有兴趣的同窗能够关注下，提一些 PR 过去。

对于 props 的迁移工做比较简单，若是你是直接经过标签的属性来传递，那么无须作更改。

<Modal visible={visible} />

若是是经过对象来传递的属性，只须要把原有分散在 props、on、attrs 中的值直接铺开便可。

const vcUploadProps = {
-  props: {
-    ...this.$props,
-   prefixCls,
-    beforeUpload: this.reBeforeUpload,
-  },
-  on: {
-    start: this.onStart,
-    error: this.onError,
-    progress: this.onProgress,
-    success: this.onSuccess,
-    reject: this.onReject,
- },
+  ...this.$props,
+  prefixCls,
+  beforeUpload: this.reBeforeUpload,
+  onStart: this.onStart,
+  onError: this.onError,
+  onProgress: this.onProgress,
+  onSuccess: this.onSuccess,
+  onReject: this.onReject,
+  ref: 'uploadRef',
+  attrs: this.$attrs,
+  ...this.$attrs,
};

可是关于 inheritAttrs 有个较为底层的变更，须要开发者根据实际状况去修改。什么是inheritAttrs？在 Vue 2 中，这个选项不影响 class 和 style 绑定，可是在 Vue 3 中会影响到。所以可能在属性的传递上，须要额外对这两个参数作处理。

在事件的处理上，咱们建议在 props 中声明，这样对后续的开发更加易维护，能够很直观地从 props 看出我这个组件到底会传递哪些事件。值得一提的是，在 props 中声明的事件，也能够经过 emit 来触发。例如声明了 onClick 事件，仍然可使用 emit('click')。

Vue 3 对 context 的 API 也作了改动，通常若是不是复杂的组件，不会涉及到这个 API。这部分的改动能够看原先 Vue Compositon API 的相关文档，Dependency Injection，注意一点，在 setup 中取不到 this。

总结

现在有超过百万的开发人员使用 Vue，还有超百万的 React 开发者正在去使用 Vue 的路上。

虽说 Vue 中 JSX 的开发方式是一个少数群里，可是 antdv 的使用用户也不是少数。为了让这部分用户能够快速体验到兼容 Vue 3 版本的组件库，所以在设计这个插件的时候，第一原则就是要最小的迁移和认知成本。

对于常年使用 template 的开发者来讲，JSX 又未尝不是一片新的天空呢？开发者要与使用者共情，站在使用者的角度出发，设计出的工具大几率可能知足其需求。

距离 JSX 发布正式版本，还有一部分路要走。

最后要感谢 Vue.js 官方团队，尤为是 @sodatea 大佬的信任。

文中出现的仓库地址：

Ant Design Vue https://github.com/vueCompone...
@ant-design-vue/babel-plugin-jsx https://github.com/vueCompone...

后续

拥抱 Vue 3 系列之如何开发设计一个 Vue 3 JSX 插件

招贤纳士

政采云前端团队（ZooTeam），一个年轻富有激情和创造力的前端团队，隶属于政采云产品研发部，Base 在风景如画的杭州。团队现有 50 余个前端小伙伴，平均年龄 27 岁，近 3 成是全栈工程师，妥妥的青年风暴团。成员构成既有来自于阿里、网易的“老”兵，也有浙大、中科大、杭电等校的应届新人。团队在平常的业务对接以外，还在物料体系、工程平台、搭建平台、性能体验、云端应用、数据分析及可视化等方向进行技术探索和实战，推进并落地了一系列的内部技术产品，持续探索前端技术体系的新边界。

若是你想改变一直被事折腾，但愿开始能折腾事；若是你想改变一直被告诫须要多些想法，却无从破局；若是你想改变你有能力去作成那个结果，却不须要你；若是你想改变你想作成的事须要一个团队去支撑，但没你带人的位置；若是你想改变既定的节奏，将会是“5 年工做时间 3 年工做经验”；若是你想改变原本悟性不错，但老是有那一层窗户纸的模糊… 若是你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的本身。若是你但愿参与到随着业务腾飞的过程，亲手推进一个有着深刻的业务理解、完善的技术体系、技术创造价值、影响力外溢的前端团队的成长历程，我以为咱们该聊聊。任什么时候间，等着你写点什么，发给 ZooTeam@cai-inc.com