譯文 | Vue 在哪些方面做的比 React 更好?

大家好,我是若川。

在過去的五年中,我一直是一名?React?工程師。我愛React。我喜歡開發?React?應用程序。我認為它是目前最好的UI框架之一。

但是,在這個領域有一些競爭對手。其中最大的是?Vue.js?。

我以前玩過一些?Vue.js,但我認為它已經過時了,因為我要深入研究?Vue.js?的工作原理,以及它如何讓我的工作更簡單。

在深入研究?Vue.js?文檔并使用?Vue.js?之后(注意:我不是?Vue.js?專家),在有些方面?Vue.js?比?React?做的更好。

最終我希望?React?受到?Vue.js?所做的這些事情的啟發,并且也開始這樣做。

不同的理念

Vue.js?和?React?之間的主要區別之一是它們如何稱呼自己。

React?把自己描述為 “一個用于構建用戶界面的JavaScript庫”,而?Vue.js?則把自己描述為“漸進式JavaScript框架”

React?是一個庫,Vue.js?是一個框架。我認為這是在很多方面他們處理方式不同的原因。

從歷史上看,框架在提供和要求方面更全面、更詳盡,而庫則更簡潔、功能更少,但它們所專注的事情卻做得非常好。

單個組件

Vue.js?和?React?都具有作為創建UI的構件的組件。

組件通常由3部分組成:

  • 界面(HTML

  • 行為(JavaScript

  • 外觀(CSS

Vue.js?的概念是?Single File Component?是一種開箱即用的方式來編寫涵蓋所有3個部分的組件。

<template><p>{{?greeting?}}?World!</p>
</template><script>module.exports?=?{data()?{return?{greeting:?'Hello',};},};
</script><style?scoped>p?{font-size:?2em;text-align:?center;}
</style>

你不必是?Vue.js?工程師就能理解這里發生了什么。

React?組件提供了開箱即用的?UI?和?Behavior,但是樣式在很大程度上不受限制:

import?React,?{?useState?}?from?'react';function?Button()?{const?[count,?setCount]?=?useState(0);return?(<button?onClick={()?=>?setCount(count?+?1)}>Current?count:?{count}<br?/>Click?me</button>);
}

當然,React?有一個非常豐富的社區,因此如果你想包含樣式,可以輕松獲取?Emotion?或?Styled Components?,它們將填補?Style?的空缺,但是:

  • 它不是內置的

  • 你必須知道這些庫存在才能使用它們。

官方支持的相關庫

任何足夠大且復雜的UI應用程序都需要兩個附加功能來支持它們的實現:

  • 路由

  • 狀態管理

Vue.js?官方支持的庫分別覆蓋了這兩種用例,Vue Router和?Vuex

這些庫在?Vue.js?文檔頁面中明確提到,它們是在?Vue.js?核心中開發和維護的。

它為新的?Vue.js?工程師提供了解決問題的清晰方法,并使他們相信這些庫可以持久使用。

擁有第一方支持的庫并不限制社區解決方案,但確實為新用戶提供了入門解決方案。

風格指南

嗯,我非常希望?React?也有這個,Vue.js?的風格指南?https://v3.vuejs.org/style-guide/?回答了新手可能遇到的許多問題。它提供了有關如何編寫?適當的?和?易于訪問的?Vue.js?應用程序的最佳實踐和指南。

它共享了經過實戰使用的經驗,以及社區中的最佳實踐和模式。

最重要的是:它是由?Vue.js?本身維護和支持的!

類和樣式綁定

如上所述,Vue.js?內置了對樣式的支持。此外,Vue.js?本質上是內置庫類名的。

Classnmes?是一個很棒的庫,可以方便地連接和動態構造應用于HTML元素的CSS類名。

在?React?中,你必須知道這個庫的存在,然后安裝它。

在?Vue.js?中,這只是另一個內置特性。

<divclass="static":class="{?active:?isActive,?'text-danger':?hasError?}"
></div>

像這樣的數據:

data()?{return?{isActive:?true,hasError:?false}
}

最終的用戶界面將是:

<div?class="static?active"></div>

內置此功能真棒。

Vue.js?進一步支持內聯樣式。Vue.js?和?React?一樣,都支持內聯樣式,但是?Vue.js?超越?React?的地方是它能夠自動為需要的?CSS?加上前綴。

來自文檔:

當 v-bind:style 使用需要添加瀏覽器引擎前綴的 CSS property 時,如 transform,Vue.js 會自動偵測并添加相應的前綴。

插槽

React?中的一切都是?prop

如果要在?React?組件中渲染多個子代,則只需添加更多?prop

function?Nav({?left,?right?})?{return?(<nav><div?className="left">{left}</div><div?className="right">{right}</div></nav>);
}function?App()?{return?(<main><Nav?left={<Logo?/>}?right={<UserDropdown?/>}?/></main>);
}

效果很好,但是有點尷尬,尤其是當?prop?內部的內容變大時。

Vue.js?通過?Slots?采用了不同的方法,我認為它的?API?更加簡潔。

<!--?A?Vue.js?component?template?named?"base-layout"?-->
<div?class="container"><header><slot?name="header"></slot></header><main><slot></slot></main><footer><slot?name="footer"></slot></footer>
</div><!--?When?"base-layout"?is?used?-->
<base-layout><template?v-slot:header><h1>Here?might?be?a?page?title</h1></template><template?v-slot:default><p>A?paragraph?for?the?main?content.</p><p>And?another?one.</p></template><template?v-slot:footer><p>Here's?some?contact?info</p></template>
</base-layout>

Vue.js?使用?Slots?清楚地指示內容在組件內部的位置。

Vue.js?反復執行的操作為常見任務提供了捷徑。在這種情況下,可以使用?Slot?來簡化上面的示例:

<base-layout><template?#header><h1>Here?might?be?a?page?title</h1></template><template?#default><p>A?paragraph?for?the?main?content.</p><p>And?another?one.</p></template><template?#footer><p>Here's?some?contact?info</p></template>
</base-layout>

指令修飾符

Vue.js?具有稱為“指令修飾符”的功能,我認為它真的很酷。

在我談論指令修飾符之前,讓我快速介紹一下指令是什么。

指令?v-?是你在?Vue.js?模板中使用的“帶有前綴的特殊屬性”。

指令的工作是在其表達式的值發生變化時以反應方式將副作用施加到DOM

例如:

//?If?"seen"?variable?is?false?then?this?p?tag?is?not?rendered
<p?v-if="seen">Now?you?see?me</p>

有針對事件處理程序的指令:

<!--?full?syntax?-->
<a?v-on:click="doSomething">?...?</a><!--?shorthand?-->
<a?@click="doSomething">?...?</a>

指令還支持修飾符。

這是使用通用指令執行通用任務的非常友好的開發人員方式。

對于事件處理程序指令(v-on),有很多修飾符:

<!--?the?click?event's?propagation?will?be?stopped?-->
<a?@click.stop="doThis"></a><!--?the?submit?event?will?no?longer?reload?the?page?-->
<form?@submit.prevent="onSubmit"></form><!--?modifiers?can?be?chained?-->
<a?@click.stop.prevent="doThat"></a><!--?just?the?modifier?-->
<form?@submit.prevent></form>...and?more!

如果你想在?React?中執行這樣的操作,可以創建一個輔助函數或一個自定義組件。但與指令修飾符相比并不簡潔。

我很好奇是否有人可以開發一個?Babel JSX?超集,然后可以編寫如下代碼:

<form?onSubmit.prevent={onSubmit}?/>

它將轉換為:

React.createElement(form,?{?onSubmit:?preventWrapper(onSubmit)?});

這不在?React?的精神范圍內,但我仍然認為這是一次超級簡潔的生產效率提升。

還有更多的?Vue.js?修飾符。最酷的一些是關鍵修飾符:

<!--?only?call?`submit()`?when?the?`key`?is?`Enter`?-->
<input?@keyup.enter="submit"?/><input?@keyup.page-down="onPageDown"?/>

非常非常酷

表單輸入綁定

當將數據綁定到輸入元素時,v-model?指令有一個非常有趣的特性。

從文檔中發現,v-model?內部使用了不同的屬性,并為不同的輸入元素發出了不同的事件:

  • text?和?textarea?元素使用?value?屬性和?input?事件;

  • 復選框和單選按鈕使用?checked?屬性和?change?事件;

  • select?使用?value?用作屬性和?change事件。

這樣做的好處是,你不需要關心數據是如何同步的,你只需要關心它是如何為你服務的。

讓我們比較一下?React?將如何進行這些綁定以及?Vue.js?如何進行綁定:

//?Input//?React
<input?type="input"?value={message}?onChange={onChange}?/>//?Vue.js
<input?type="input"?v-model="message"?/>//?Checkboxes?and?Radiobuttons//?React
<input?type="checkbox"?checked={message?!=?null}?onChange={onChange}?/>//?Vue.js
<input?type="checkbox"?v-model="message"?/>//?Select//?React
<select?value={message}?onChange={onChange}><option>A</option>
</select>//?Vue.js
<select?v-model="message"><option>A</option>
</select>

現在,我要為 React 辯護的一點是,React 鼓勵你學習數據實際上是如何設置的以及它是如何變化的。這意味著,如果你曾經用普通JS寫過一個表單,你將有更多關于它如何工作的知識,并能夠正確地編碼它。與Vue.js不同,Vue.js只是將所有用法抽象出來。

自定義指令

像任何好的框架一樣,你可以在?Vue.js?中創建自己的自定義指令。

Vue.js?確實注意到“代碼重用和抽象的主要形式是組件”,但是為什么自定義指令可能會更好的最好的例子之一是它們的自定義?v-focus?指令自動將輸入元素放在?mount?上:

const?app?=?Vue.createApp({})
//?Register?a?global?custom?directive?called?`v-focus`
app.directive('focus',?{//?When?the?bound?element?is?mounted?into?the?DOM...mounted(el)?{//?Focus?the?elementel.focus()}
})<input?v-focus?/>

在?React?中,你可能會編寫一個自定義組件來完成相同的事情,對于這么輕便的任務而言,這似乎有點繁重。

用 TypeScript 編寫

最后但并非最不重要的一點是,最近在?TypeScript?中徹底重寫了?Vue.js?。

這意味著它們的?TypeScript?支持是一流的,因為框架本身是用?TypeScript?編寫的。

最終,React?用什么編寫并不重要,我也不認為它有什么太大的區別,但看到?Vue.js?所擁有的仍然是一個很不錯的小事情。

總結

我要放棄?React?并開始專門使用?Vue.js?嗎?不。我仍然非常喜歡?React?,坦率地說,我已經非常精通編寫?React?應用程序。

但是,我很希望看到?React?從?Vue.js?中汲取一些靈感,并將其中一些很棒的想法整合到?React?中。如果我只能從文中提到的幾個點中選擇一個,那絕對是?風格指南。我很樂意看到?React?有一個官方支持和維護的風格指南。

希望我能讓你看到一些你不知道 Vue.js 做過的事情!我很驚訝地發現自己真的很喜歡 Vue.js 工作的方式!

本文授權譯自:https://hswolff.com/blog/what-vuejs-does-better-than-react/

最近組建了一個江西人的前端交流群,如果你是江西人可以加我微信?ruochuan12?私信 江西?拉你進群。


推薦閱讀

我在阿里招前端,該怎么幫你(可進面試群)
畢業年限不長的前端焦慮和突破方法

前端搶飯碗系列之Vue項目如何做單元測試
老姚淺談:怎么學JavaScript?

·················?若川簡介?·················

你好,我是若川,畢業于江西高校。現在是一名前端開發“工程師”。寫有《學習源碼整體架構系列》多篇,在知乎、掘金收獲超百萬閱讀。
從2014年起,每年都會寫一篇年度總結,已經寫了7篇,點擊查看年度總結。
同時,活躍在知乎@若川,掘金@若川。致力于分享前端開發經驗,愿景:幫助5年內前端人走向前列。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/275686.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/275686.shtml
英文地址,請注明出處:http://en.pswp.cn/news/275686.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

表單提交中Get和Post方式的區別及EncType表明提交數據的格式詳解

表單提交中Get和Post方式的區別1. get是從服務器上獲取數據&#xff0c;post是向服務器傳送數據。2. get是把參數數據隊列加到提交表單的ACTION屬性所指的URL中&#xff0c;值和表單內各個字段一一對應&#xff0c;在URL中可以看到。post是通過HTTP post機制&#xff0c;將表單…

web mp4第一幀_Web成幀器就在這里!

web mp4第一幀The Framer Team is pulling up it’s pants. I sniffed something cooking when they announced a public beta for Framer for web… FRAMER FOR WEB? Yes, I don’t know how they did it, but their powerful set of tools, plugins and animation controls …

Lucene學習總結之三:Lucene的索引文件格式(2)

2019獨角獸企業重金招聘Python工程師標準>>> 四、具體格式 上面曾經交代過&#xff0c;Lucene保存了從Index到Segment到Document到Field一直到Term的正向信息&#xff0c;也包括了從Term到Document映射的反向信息&#xff0c;還有其他一些Lucene特有的信息。下面對這…

JavaScript 數組 API 全解析

在編程世界中&#xff0c;數組是指元素的集合。數組將數據作為元素進行存儲&#xff0c;并在需要時將其取出。在支持數組的編程語言中廣泛地采用了這個數據結構。這個手冊會介紹 JavaScript 數組的所有知識。你將會學到復雜數據處理、解構、常用數組方法等內容。我為什么寫這篇…

Spoken English(001)

if he wants to make any changes,minor alternations can be made thenis there any way of ensuring well have enough time for our talks?so our evenings will be quite full then?We’ll leave some evenings free,that is, if it is all right with you.We’d have to…

美學設計評價_死亡的孩子無法使用的設計美學

美學設計評價In the popular anime series, Soul Eater, Death the Kid is a Shinigami (Japanese death god) who vanquishes evil with his dual pistols, Liz and Patty. Although he’s strikingly powerful, his battles are often hindered by his obsessive-compulsive …

iis php網站500錯誤原因_因為曾經錯誤安裝過PHP5.2而導致IIS7無法正常工作,顯示500錯誤提示,大家幫忙看看!...

我的系統是VISTA,使用自帶的IIS7&#xff0c;對ASP網頁一直瀏覽正常。最近因自己心血來潮錯誤安裝了一次PHP5.2。主要操作是&#xff1a;1、下載的是自動安裝的PHP5.2程序&#xff0c;自動選ISAPI按鈕安裝&#xff1b;2、對IIS7中添加了名為“PHP”的ISAPI篩選器&#xff0c;選…

【送書】2021年哪些好書值得讀(小姐姐配音)

大家好&#xff0c;我是若川。記得點上面的小姐姐再次錄制的配音。為感謝大家一直以來的支持和肯定。不知道是今年第幾次送書了。昨天送書的音頻廣受好評&#xff0c;沒參與的可以參與。今天聯合華章圖書再送文中任選一本 * 3 包郵送&#xff0c;詳細規則看文末。Web開發01《斯…

Flash獲取html參數的方法

一. swf?傳參 html代碼:代碼<html><head><meta http-equiv”Content-Type” content”text/html charsetutf-8″ /><title>as</title></head><body><object classid”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase”h…

方法重載_方法

方法重載Recently, I wrote an article about moving XD designs to Figma. It was a really interesting experiment and one that seemed to interest quite a lot of people.最近&#xff0c;我寫了一篇有關將XD設計移至Figma的文章。 這是一個非常有趣的實驗&#xff0c;似…

php strtoup,PHP 7 的幾處函數安全小變化

To Begin With最近在準備 LANCTF&#xff0c;想把環境遷移到 PHP 7&#xff0c;卻想到一些 payload 失效了。想著什么時候總結成一個筆記&#xff0c;恰巧在 FB 發現有人寫了一篇博文&#xff0c;拜讀后結合 CTF 環境整理了一下&#xff0c;總體來說&#xff0c;棄用了較多不安…

Node.js 框架設計及企業 Node.js 基礎建設相關討論

大家好&#xff0c;我是若川。19年我寫的 lodash源碼 文章投稿到海鏡大神知乎專欄竟然通過了&#xff0c;后來20年海鏡大神還star了我的博客&#xff0c;同時還轉發了我的微博。時間真快啊。今天分享這篇Node.js的討論。2021 年上半年早已過去&#xff0c;回顧 Node.js 在國內的…

DAS、NAS、SAN、iSCSI 存儲方案概述

目前服務器所使用的專業存儲方案有DAS、NAS、SAN、iSCSI幾種。存儲根據服務器類型可以分為&#xff1a;封閉系統的存儲和開放系統的存儲&#xff1a; &#xff08;1&#xff09;封閉系統主要指大型機. &#xff08;2&#xff09;開放系統指基于包括Windows、UNIX、Linux等操作系…

同態加法_同態—當舊趨勢突然變酷時

同態加法Designers get excited at every year’s end to see what next year’s trend is going to be. What the future of design is going to look like. What they can carry forward to the next year; And Neumorphism was one among the lists which gained great atte…

網頁標題設置,為什么在SERP中,顯示結果不一致?

在網站建設與運營的過程中&#xff0c;我們經常會遇到各種各樣的問題&#xff0c;特別是關于網頁標題設置的問題&#xff0c;如果一個頁面標題出錯&#xff0c;那么&#xff0c;你整個頁面建設的過程&#xff0c;就完全是事倍功半&#xff0c;得不償失。 那么&#xff0c;網頁標…

阿里專有釘釘前端面試指南

大家好&#xff0c;我是若川。今天推薦這篇掘金高贊文章&#xff0c;歡迎留言交流。經作者子奕大佬授權轉載&#xff0c;原文鏈接&#xff1a;https://juejin.cn/post/6986436944913924103作者介紹子弈[1]&#xff0c;專有釘釘前端團隊成員&#xff0c;負責專有釘釘 PC 客戶端的…

安全態勢感知產品對比_設計中的對比和人的感知

安全態勢感知產品對比In this article, we’re going to explore the concept of contrast and its fundamental role in UX and visual design.在本文中&#xff0c;我們將探討對比度的概念及其在UX和視覺設計中的基本作用。 Let’s start by defining what contrast is.讓我…

在字節做前端一年后,有啥收獲~

大家好&#xff0c;我是若川。今天分享這篇&#xff0c;相信讀完會有些收獲。本文經作者授權轉載&#xff0c;原文鏈接&#xff1a;https://juejin.cn/post/6980671091526074404個人簡介19年底12月進入字節實習&#xff0c; 第二年7月畢業轉正。到前幾天正好全職一周年。進入公…

app用戶隱私協議相關法律_隱私圖標和法律設計

app用戶隱私協議相關法律During its 2020 Worldwide Developers Conference, Apple spent time on one of today’s hottest topics — privacy. During the past couple of years, Apple has been rolling out various public campaigns aiming to position itself as a compa…

HTTP referer

簡言之&#xff0c;HTTP Referer是header的一部分&#xff0c;當瀏覽器向web服務器發送請求的時候&#xff0c;一般會帶上Referer&#xff0c;告訴服務器我是從哪個頁面鏈接過來的&#xff0c;服務器籍此可以獲得一些信息用于處理。比如從我主頁上鏈接到一個朋友那里&#xff0…