在 vue 中使用 jsx 與 class component 的各種姿勢

在之前我們分享過一次 一個使用 react 的思想去使用 vue 的方式。 隨著組內(nèi)很多時候為了讓 view 層更加清晰，和一些復雜的邏輯處理，導致現(xiàn)在 vue 代碼中 jsx 的代碼越來越多，這里進行一個整理說明

如何使用
先參看騰訊 alloyTeam 這篇文章：

用 jsx 寫 vue 組件
里面有提到使用 babel-plugin-transform-vue-jsx babel 6 插件來處理 jsx 的編譯。

當然可能是官方也知道在一定的場景下 jsx 相對模板是有優(yōu)勢的，于是單獨有了這個倉庫 對于上面的插件進行了增強。github.com/vuejs/jsx 在 babel 7+ 情況下可以參考使用

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
<!--.babelrc-->
{
"presets": ["@vue/babel-preset-jsx"]
}
復制代碼
你可以在 jsx 中使用 v-model 進行雙向綁定了！當然這只是一個語法糖。你也可以使用 babel 實現(xiàn) v-for 。

對于一些簡單的情況我們直接使用 jsx 替換 template 都不會有什么問題，但是當我們深入下去，比如要看一些 react 的 特殊模式 比如：render props 在 vue 中的使用。那么我們就要對 vue 實例的屬性差異進行深入的對比和理解了。（render props 在vue中對應的就是 slotProps.default ）

cn.vuejs.org/v2/guide/re…
www.yuque.com/zeka/vue/vu…
與組件庫結(jié)合的問題
對于 antd-vue 來說，由于 實現(xiàn)的api基本和 react 版本一致，所以調(diào)用方式基本和react版本的文檔也一致。

import {Input} form 'ant-design-vue'
<Input value={xx} onChange={(e)=>{}}>

//----

const HelloWorld = ({ props }) => <p>hello {props.message}</p>
復制代碼
但是也有一些沒有那么友好的組件庫， 比如 iview ，由于 內(nèi)部大部分api都使用了 this.$emit('on-xxEvent') 的形式，在 template 語法下 @on-xxEvent="xx"覺得還好，但是在 jsx 語法下就顯得很奇怪了。如下：

<Input value={xx} on-on-Change={(e)=>{}}>
復制代碼
在上面我們處理完了直接使用 jsx 的問題。那么我們能不能更像 react 一點呢？

單文件組件
這個時候我們可能寫的一個 vue 單文件組件是這樣的：

VueForm.vue

<script>
export default {
name: 'VueForm',
props: {},
data() {
return {}
},
render(){
return (
<div>
<input />
</div>
)
}
}
</script>
<style ></style>
復制代碼
如何直接使用 .js 或者 jsx 文件？

VueForm.jsx

const VueForm = {
name: 'VueForm',
props: {},
data() {
return {}
},
methods:{

},
render(){
return (
<div>
<input />
</div>
)
}
}
VueForm.install = function(Vue) {
Vue.component(VueForm.name, VueForm);
};

export default VueForm;
復制代碼
還是好麻煩啊，每一個組件都的去定義 install 方法，也得去寫 methods 啥的，那么如何 再像一些呢？或者說更簡單一些呢？

class component
vue 官方提供了 vue-class-component 模塊 結(jié)合我們上面聊的，我們可以寫出來這樣的代碼。

import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
props: {
propMessage: String
}
})
export default class App extends Vue {
// initial data
msg = 123
// use prop values for initial data
helloMsg = 'Hello, ' + this.propMessage
// lifecycle hook
mounted () {
this.greet()
}
// computed
get computedMsg () {
return 'computed ' + this.msg
}
// method
greet () {
alert('greeting: ' + this.msg)
}
render(){
return (
<input vModel={this.msg}>
<p>prop: {this.propMessage}</p>
<p>msg: {this.msg}</p>
<p>helloMsg: {this.helloMsg}</p>
<p>computed msg: {this.computedMsg}</p>
<button onClick={this.greet}>Greet</button>
)
}
}
復制代碼
當然僅僅是這樣可能還是不夠的 。你需要再來一個模塊 vue-property-decorator 甚至是 vuex-class

哈？ 這不是 React + Mobx ？

我們可以看到 vue 的可擴展性是非常強的。恭喜你已經(jīng)成功進入邪教。23333