babel-plugin-vue-like-for-react-and-mobx
babel-plugin-vue-like-for-react-and-mobx
给React增加VUE类似的功能(使用mobx)
使用示例
@observer
class MyComponent extends React.Component {
static propTypes = {
interest: PropTypes.String,
};
@observable
formData = {
name: '',
age: '',
};
render() {
<div>
<div>Name: <input v-model="formData.name" /></div>
<div>Age: <input v-model="formData.age" /></div>
<div>
Interest:
<select v-model="props.interest">
<option>None</option>
<option value="1">Music</option>
<option value="2">Movie</option>
</select>
</div>
</div>
}
}
原理
v-model
其实就是一个语法糖,在编译阶段进行了静态代码转换。如下:
// Before
<Node v-mode="x.y" />
// After
<Node
value={getVModelValue(this, "x.y")}
onChange={e => handleSetVModelEvent(this, "x.y", e)}
/>
编译后的代码中,用到的两个方法: getVModelValue
和 handleSetVModelEvent
的实现,可以参考 vmodel.js
使用方法
- 安装:
npm i --save babel-plugin-vue-like-for-react-and-mobx
- 配置webpack
{
...
module: {
rules: [
test: /\.js$/,
...
use: {
loader: 'babel-loader',
options: {
presets: [...],
plugins: [
'vue-like-for-react-and-mobx', // 这是关键,最好放在第一个
...
]
}
}
]
}
}
不足
现在还些不支持或者不好的地方:
- 调试不够友好:如果转换出的代码出现问题了,现在还跟踪不了执行过程。不过代码比较简单,一般不会出问题。
- 验证不全:因为v-model会转换生成
value
和onChange
,如果原来这个节点上就有这两个属性就会冲突。原则上应该在编译阶段报错,但是现在还没有支持,后续会支持