前言
前排警告，這不是玩具！
那、還能是啥呢
起因
最近看到好多在Vue中使用JSX的文章，我雖然是Vue入門的，但是我對Vue的熟悉程度也只有幾個V-指令和簡單的傳值傳事件了。作爲目前最受歡迎的MVVM框架，其實不學習還是有些對不住自己的。但是無奈太喜歡React，所以在Vue中能使用JSX還是能勾起很多人的好奇心的。
我就是，還有麼
簡單Demo
對於vue-cli3和4創建的Vue工程，是可以直接使用JSX語法的，簡單的就是template刪除了，寫個render，其他的就和寫React類組件差不多了。
嗎😢？
還是沒那麼簡單的，不過可以先看個簡單的傳值：
<script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {
name: "home",
render() {
return <HelloWorld msg="this is helloworld" />;
}
};
</script>
<script>
export default {
name: "HelloWorld",
props: {
msg: String
},
render() {
return <div>{this.msg}</div>;
}
};
</script>
<style scoped lang="less">
div {
margin: 40px;
}
</style>
關於JSX
如果上面的示例對你沒什麼難度，以React的角度來說。那麼我們就來看一下加上Vue的角度的一些基本的東西：
<script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {
name: "home",
data() {
return {
data: [12, 34, 56]
};
},
methods: {
handleClick() {
console.log(123);
}
},
render() {
return (
<div>
<button onClick={this.handleClick}>click</button>
<HelloWorld msg="this is helloworld" />
<ul>
{this.data.map(i => (
<li key={i}>{i}</li>
))}
</ul>
</div>
);
}
};
</script>
傳事件
<HelloWorld msg="this is helloworld" handleClick={this.handleClick} />
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
handleClick: Function
},
render() {
return (
<div>
<button onClick={this.handleClick}>click</button>
<div>{this.msg}</div>
</div>
);
}
};
</script>
因爲不會有React處理事件時解析語法this指向取消的問題，所以這裏也不需要bind。
生命週期
Vue的生命週期很條理：
- beforeCreate, created
- beforeMount, mounted
- beforeUpdate, updated
- beforeDestroy, destroyed
這部分和JSX關係不大，這裏不講。
Vue-Router
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view />
</div>
App.vue同樣可以做這樣的修改，使得我們以JSX的方式引入路由。
同時我們也可以混用template和JSX。
總結
只是簡單的Demo，已經可以在遷移量不大的情況下做出一些東西了，後續會結合Vuex和Vue-router寫點東西熟悉一下。
