react與vue兩者有哪些區(qū)別

小編給大家分享一下react與vue兩者有哪些區(qū)別，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)主營(yíng)麻山網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,重慶APP開(kāi)發(fā),麻山h5小程序設(shè)計(jì)搭建,麻山網(wǎng)站營(yíng)銷(xiāo)推廣歡迎麻山等地區(qū)企業(yè)咨詢(xún)

vue的選擇居于react與angular之間，框架自身的語(yǔ)法比react多一點(diǎn)，但是又比angular少一點(diǎn)。

也正是由于選擇的不同，所呈現(xiàn)出來(lái)的寫(xiě)法與思考方式就一定會(huì)有所差異，不論優(yōu)劣，但肯定會(huì)導(dǎo)致不同的偏好。

react的簡(jiǎn)單在于，它的核心API其實(shí)非常少。所以我們會(huì)看到很多地方在說(shuō)react其實(shí)是一個(gè)UI庫(kù)，并不是一個(gè)完整的框架。他只是告訴我們?nèi)绾蝿?chuàng)建組件以及組件之間如何進(jìn)行數(shù)據(jù)傳遞。甚至于創(chuàng)建組件的方式正是使用ES6的class語(yǔ)法(createClass將會(huì)在react 16被丟棄)。

因此開(kāi)發(fā)中react的使用對(duì)于ES6的語(yǔ)法依賴(lài)非常高。因?yàn)閞eact自身本來(lái)就沒(méi)有多少?gòu)?qiáng)限制的語(yǔ)法。我們只需要掌握組件里的props，state，ref，生命周期，就好像沒(méi)有過(guò)多額外的知識(shí)了。就連如果想要在jsx模板來(lái)遍歷渲染，還得使用原生的map方法。而react的高階組件，理解之后發(fā)現(xiàn)，其實(shí)就是JavaScript函數(shù)式編程中所涉及到的思維方式。

所以在我看來(lái)，react的最大特點(diǎn)就是簡(jiǎn)單并且與原生JavaScript非常接近。即給開(kāi)發(fā)者帶來(lái)的束縛非常少。一個(gè)功能的實(shí)現(xiàn)，如果你知道使用原生JavaScript如何實(shí)現(xiàn)，那么你就一定能夠很輕松的知道使用react如何實(shí)現(xiàn)。

當(dāng)然，核心API簡(jiǎn)單并不代表上手容易。在使用之初，如果你經(jīng)驗(yàn)缺乏，那么你用react寫(xiě)出來(lái)的頁(yè)面，性能可能會(huì)非常差。因?yàn)闊o(wú)意識(shí)的，你的組件可能會(huì)有非常多的多余的渲染。

比如很多人在學(xué)習(xí)react的時(shí)候，會(huì)接觸到一個(gè)倒計(jì)時(shí)的例子，這個(gè)例子使用修改組件中state的方式來(lái)實(shí)現(xiàn)。但是其實(shí)后來(lái)大家會(huì)慢慢知道，這種方式是非常錯(cuò)誤的。因?yàn)閟tate的每次修改，都會(huì)導(dǎo)致組件及其所有子組件的重新渲染。這是成本非常高的行為。當(dāng)然，我還知道很多人，在調(diào)試react的時(shí)候，由于高頻的重復(fù)渲染直接把瀏覽器都卡死的。這些問(wèn)題都是尤雨溪所擔(dān)心的限制過(guò)少帶來(lái)的。

網(wǎng)上有的自以為牛逼的人，用著react/vue這樣的框架，其實(shí)寫(xiě)著shi一樣的代碼，恐怖的是他們還嘲諷這嘲諷那的。還遇到過(guò)一個(gè)人，口口聲聲說(shuō)自己用了angular好多年，說(shuō)angular真的好垃圾啊，性能好差啊，什么什么的各種黑，結(jié)果連track by都不會(huì)用。喝！

而react由于沒(méi)有真正意義上的雙向綁定。因此在處理一些復(fù)雜場(chǎng)景會(huì)非常麻煩，比如復(fù)雜的表單驗(yàn)證。

而相對(duì)而言，vue提供的能力則更多一點(diǎn)，這些便捷的能力會(huì)讓初學(xué)者感覺(jué)到非常的幸福，因?yàn)楹芏嘈Ч恍枰恍┖?jiǎn)單的代碼既可以實(shí)現(xiàn)。我大概列舉幾條我個(gè)人認(rèn)為非常棒的能力：

• 統(tǒng)一管理的計(jì)算屬性

JavaScript的表達(dá)式非常便利，無(wú)論是vue還是react，表達(dá)式的能力是必不可少的。但正如vue官方文檔所說(shuō)，在模板中放入太多的邏輯會(huì)讓模板過(guò)重且難以維護(hù)。而vue的組件中提供了一個(gè)計(jì)算屬性來(lái)統(tǒng)一管理表達(dá)式。

<template><p id="example"><p>Original message: "{{ message }}"</p><p>Computed reversed message: "{{ reversedMessage }}"</p></p></template><script>export default {name: 'example',
    data () {return {message: 'Hello'
        }
    },computed: {reversedMessage: function() {return this.message.split('').reverse().join('')
        }
    }
}</script>

• class的動(dòng)態(tài)語(yǔ)法讓我感覺(jué)非常爽

在實(shí)踐中我們會(huì)發(fā)現(xiàn)非常多這樣的場(chǎng)景，需要根據(jù)不同的狀態(tài)來(lái)決定一個(gè)元素class的具體值。而如果僅僅只是簡(jiǎn)單的表達(dá)式或者條件判斷在jsx模板中，例如下面這個(gè)樣子就會(huì)讓人感覺(jué)非常難受

<p className={active ? 'note active' : 'note'}></p>

當(dāng)稍微復(fù)雜一點(diǎn)的邏輯還這樣處理就是難受到忍不了了。而vue中支持的語(yǔ)法則非常輕松的搞定了這個(gè)問(wèn)題。

// 可以放在任何你覺(jué)得舒服的位置const pcls = {active: active,note: true
}

<p class={pcls}></p>

這樣我們繼續(xù)添加更多的class名也不會(huì)造成額外的復(fù)雜度了。

當(dāng)然，這僅僅只是一個(gè)工具方法就能搞定的問(wèn)題，在使用react時(shí)，大家可以借助classnames來(lái)完成同樣的功能。但vue是直接支持了。

• 雙向綁定

由于react并不支持雙向綁定，因此在復(fù)雜的表單驗(yàn)證時(shí)實(shí)現(xiàn)起來(lái)非常痛苦。而vue在以單向數(shù)據(jù)流為核心的同時(shí)，又沒(méi)有完全拋棄雙向綁定，這讓在這樣復(fù)雜的表單驗(yàn)證場(chǎng)景開(kāi)發(fā)效率比react高出非常多。這也是vue省事兒的一個(gè)方面。

• 修飾符

我們?cè)趯?xiě)事件處理邏輯時(shí)，常常需要e.preventDefault等操作。vue提供的修飾符功能可以幫助我們省去這些代碼，極為方便。用多了就會(huì)發(fā)現(xiàn)，真TM好用。

<!-- 阻止單擊事件冒泡 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重載頁(yè)面 --><form v-on:submit.prevent="onSubmit"></form><!-- 修飾符可以串聯(lián)  --><a v-on:click.stop.prevent="doThat"></a><!-- 只有修飾符 --><form v-on:submit.prevent></form><!-- 添加事件偵聽(tīng)器時(shí)使用事件捕獲模式 --><p v-on:click.capture="doThis">...</p><!-- 只當(dāng)事件在該元素本身（而不是子元素）觸發(fā)時(shí)觸發(fā)回調(diào) --><p v-on:click.self="doThat">...</p>

當(dāng)然，還有按鍵修飾符等，可以去官網(wǎng)進(jìn)一步查看學(xué)習(xí)。

vue提供的方便可愛(ài)的語(yǔ)法糖還有很多，就不細(xì)說(shuō)，大家可以在官網(wǎng)上一一體驗(yàn)。正如文章開(kāi)頭所說(shuō)，vue會(huì)有一些語(yǔ)法限制，而這些語(yǔ)法限制在某種程度上來(lái)說(shuō)降低了我們的開(kāi)發(fā)成本，提高了開(kāi)發(fā)效率。這大概也就是很多人認(rèn)為vue更加簡(jiǎn)單易學(xué)的原因所在吧。

就從學(xué)習(xí)難易程度上來(lái)說(shuō)，react之所以上手更加困難，主要的原因并不在于react本身，而在于圍繞react的豐富的生態(tài)圈。正是由于react本身足夠簡(jiǎn)單，所以我們需要掌握的react組件就更多。比如react-router，react-redux等。而且很多好用的，功能特別棒的組件在我們涉獵不廣的時(shí)候都不知道。例如我在學(xué)習(xí)ant-design源碼的時(shí)候，常常會(huì)驚訝于發(fā)現(xiàn)原來(lái)這里有一個(gè)組件可以這樣用，真的好棒！而我在學(xué)習(xí)vue的時(shí)候又會(huì)驚訝的發(fā)現(xiàn)，原來(lái)這么棒的組件vue直接都已經(jīng)支持了！

所以后來(lái)我才發(fā)現(xiàn)，原來(lái)vue與react既然如此相似。

我仍然更加偏好于react。但僅僅只是因?yàn)閞eact的語(yǔ)法更加接近于ES6而已

看完了這篇文章，相信你對(duì)“react與vue兩者有哪些區(qū)別”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)站名稱(chēng)：react與vue兩者有哪些區(qū)別
URL地址：http://bm7419.com/article26/ipdejg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、搜索引擎優(yōu)化、品牌網(wǎng)站設(shè)計(jì)、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)