全文共1825字，預計學習時長5分鐘

圖源：unsplash

過去四年來，筆者都是用React框架工作，最近開始使用Vue了。盡管兩者有一些概念上的差異——Vue受到了Angular的影響，但在React框架下完成的工作同樣適用于Vue。

筆者覺得Vue整合了Angular和React的精華部分。關鍵理由之一就是：Vue框架的創(chuàng)建者——尤雨溪，曾利用React來獲得靈感，開發(fā)新的框架。

“我想，如果我只提取React中最喜歡的部分，不考慮其他任何概念，來構建一些輕量級的框架，會怎么樣呢？同時，我也很好奇React的內部實現是如何進行的。所以我開始嘗試著復制這一最小功能集，比如聲明式數據綁定。我就是那樣開始構建Vue的。”——尤雨溪

這篇文章將重點關注兩種框架的差異。首先，來看看一些事實：

快速比較

· React是庫，Vue則是完整的框架

· 都能快速運行，都是輕量級前端框架

· 都有一個組件式系統(tǒng)架構

· 都使用virtual DOM

· 都可以放進一個HTML文件中或成為更復雜的Webpack設置模塊

· 都有獨立但通用的路由器和狀態(tài)管理庫

最大的不同在于，Vue通常使用HTML模板文件，而React完全是使用JavaScript庫。Vue也有可變狀態(tài)，以及用于重新呈現的自動化系統(tǒng)，這被稱為反應性。

組件式系統(tǒng)架構

React和Vue都遵循基于可重用組件的方法。

· 比較React組件和Vue組件

React和Vue都提供component方法，但是它們完全不同。這是因為React將組件定義為類，而Vue將組件定義為對象。Vue.component全局注冊組件，而React.Component充當組件的基類。

是一個在模板中直接使用的類名

Vue中的組件是普通對象，無須擴展Vue。

Vue中相同的組件和模式：只是一個對象，必須包含在Vue應用的components值中才能顯示。

盡管擁有基于組件的方法，兩者卻大不相同。

· 比較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)和數據

在React中，有組件state。在Vue中，有data。

設置初始狀態(tài)

React組件

Vue組件

更新狀態(tài)

React使用setState方法

Vue只是將新值賦予該屬性

條件渲染

React通常使用三元操作在一定條件下呈現內容

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)建復雜網絡解決方案的強大工具。他們足以讓你得心應手地完成任何任務。無論哪一個，都是正確的選擇。

留言點贊關注

我們一起分享AI學習與發(fā)展的干貨

如轉載，請后臺留言，遵守轉載規(guī)范

總結

以上是生活随笔為你收集整理的vue 模板字符串循环_使用React四年后转而使用Vue，是一种什么样的体验？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。