使用React四年后轉而使用Vue，是一種什么樣的體驗？
本文轉載自公眾號“讀芯術”(ID：AI_Discovery)。
過去四年來，筆者都是用React框架工作，最近開始使用Vue了。盡管兩者有一些概念上的差異——Vue受到了Angular的影響，但在React框架下完成的工作同樣適用于Vue。
筆者覺得Vue整合了Angular和React的精華部分。關鍵理由之一就是：Vue框架的創(chuàng)建者——尤雨溪，曾利用React來獲得靈感，開發(fā)新的框架。
| “我想，如果我只提取React中最喜歡的部分，不考慮其他任何概念，來構建一些輕量級的框架，會怎么樣呢?同時，我也很好奇React的內部實現(xiàn)是如何進行的。所以我開始嘗試著復制這一最小功能集，比如聲明式數(shù)據(jù)綁定。我就是那樣開始構建Vue的。”
——尤雨溪 |
這篇文章將重點關注兩種框架的差異。首先，來看看一些事實：
快速比較
- React是庫，Vue則是完整的框架
- 都能快速運行，都是輕量級前端框架
- 都有一個組件式系統(tǒng)架構
- 都使用virtual DOM
- 都可以放進一個HTML文件中或成為更復雜的Webpack設置模塊
- 都有獨立但通用的路由器和狀態(tài)管理庫
最大的不同在于，Vue通常使用HTML模板文件，而React完全是使用JavaScript庫。Vue也有可變狀態(tài)，以及用于重新呈現(xiàn)的自動化系統(tǒng)，這被稱為反應性。
組件式系統(tǒng)架構
React和Vue都遵循基于可重用組件的方法。
(1) 比較React組件和Vue組件
React和Vue都提供component方法，但是它們完全不同。這是因為React將組件定義為類，而Vue將組件定義為對象。Vue.component全局注冊組件，而React.Component充當組件的基類。
Vue中的組件是普通對象，無須擴展Vue。
Vue中相同的組件和模式：<ComponentName/>只是一個對象，必須包含在Vue應用的components值中才能顯示。
盡管擁有基于組件的方法，兩者卻大不相同。
(2) 比較React JSX和Vue Templates
React的renderProp方法與JavaScript相同，所以你在模板里所做的一切都和在JavaScript中做的一樣。Vue依賴于HTML模板，所以它包含了一些指令。這些指令在設計上與AngularJS非常相似(事實上幾乎一樣：v-if, v-for, v-show等)。
生命周期方法
Vue中的組件具有與React方法相似的生命周期方法，試著一一配對：
- constructor → created
- componentWillMount → beforeMount
- componentDidMount → mounted
- componentWillUnmount → beforeDestroy
- componentDidCatch → N/A
- shouldComponentUpdate → N/A
- setState → N/A — 直接設置屬性即可
組件狀態(tài)和數(shù)據(jù)
在React中，有組件state。在Vue中，有data。
設置初始狀態(tài)
React組件
Vue組件
更新狀態(tài)
Vue只是將新值賦予該屬性
條件渲染
React通常使用三元操作在一定條件下呈現(xiàn)內容
Vue引入了v-if指令，作用相同。
用循環(huán)迭代和渲染
在React中，通常對值進行map并返回一個字符串，該字符串包含希望的每個element值。
在Vue中，會使用v-for directive
生態(tài)系統(tǒng)
Vue比React有更多的“官方”庫，這意味著它與核心框架一起得到了官方的支持、維護和發(fā)布。由于還不夠成熟，Vue沒有React那么多的社區(qū)支持庫。
對照表
總之，Vue和React都是創(chuàng)建復雜網(wǎng)絡解決方案的強大工具。他們足以讓你得心應手地完成任何任務。無論哪一個，都是正確的選擇。
