但如果內(nèi)部內(nèi)容邊龐大之后，雖然能很好運(yùn)行，但有一點(diǎn)尷尬。

Vue.js 采用了插槽的方法，我認(rèn)為它的 API 更簡潔。

      
          
    
          
                   
Here might be a page title
             
A paragraph for the main content.
      
And another one.
              
Here's some contact info
      

Vue.js 使用插槽（受Web Component 規(guī)則草案的啟發(fā)）清楚地指明內(nèi)容在組件內(nèi)部的位置。

Vue.js 為反復(fù)執(zhí)行的任務(wù)提供了捷徑。在這種情況下，可以使用插槽來簡化上面的示例：

          
Here might be a page title
              
A paragraph for the main content.
      
And another one.
              
Here's some contact info
      

7、指令修飾符

我認(rèn)為 Vue.js 指令修飾符的功能真的很酷。

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

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

指令的作用是在表達(dá)式的值發(fā)生變化時(shí)以響應(yīng)地方式將副作用施加到 DOM

例如:

// If "seen" variable is false then this p tag is not rendered  Now you see me

針對事件地指令：

   ...      ... 

還有其他更多的指令。

指令還支持修飾符。

使用通用指令執(zhí)行通用操作很開發(fā)友好。

對于事件處理指令（v-on），有很多修飾符：

               ...and more!

如果你想在 React 中執(zhí)行這樣的操作，可以創(chuàng)建一個輔助函數(shù)或一個自定義組件。但與指令修飾符地方式相比并不簡潔。

我很好奇是否有人可以開發(fā)一個 Babel JSX 超集，然后就可以編寫如下代碼了：

它將轉(zhuǎn)換為：

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

這不在 React 的討論范圍內(nèi)，但我仍然認(rèn)為這會是一次生產(chǎn)效率地大提升。

還有更多的 Vue.js 修飾符。比如按鍵修飾符：

太酷了。

8、表單輸入綁定

當(dāng)將數(shù)據(jù)綁定到輸入元素時(shí)，v-model 指令會有非常有趣的特性。

從文檔中發(fā)現(xiàn)，v-model 內(nèi)部使用了不同的屬性，并為不同的輸入元素發(fā)出不同的事件:

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

•  復(fù)選框和單選按鈕使用 checked 屬性和 change 事件；

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

這樣做的好處是，您無需關(guān)心數(shù)據(jù)是如何同步的，您只需關(guān)心它是如何為你服務(wù)的。

讓我們比較一下 React 和 Vue.js 是如何進(jìn)行綁定：

// Input  ////////  // React    // Vue.js    // Checkboxes and Radiobuttons  ////////  // React    // Vue.js    // Select ////////  // React        A    // Vue.js        A  

發(fā)現(xiàn)其中的不同了嗎？

現(xiàn)在，我要為 React 辯護(hù)了，React 鼓勵（并要求）您學(xué)習(xí)學(xué)習(xí)數(shù)據(jù)實(shí)際是如何設(shè)置以及它是如何變化的。這意味著，如果您曾經(jīng)用普通 JS 寫過一個表單，您將更了解其運(yùn)行原理。 與 Vue.js 不同，后者幫您把這些特性都抽象出來了。

9、自定義指令

像任何好的框架一樣，您可以在 Vue.js 中創(chuàng)建自己的自定義指令。

Vue.js 確實(shí)關(guān)注“代碼重用和抽象的主要形式是組件”，但這里有一個使用自定義指令不錯的例子，通過v-focus在 mount 時(shí)自動聚焦到元素上：

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 element      el.focus()    }  })  

在 React 中，你可能會編寫一個自定義組件來完成相同的事情，但對于這種簡單任務(wù)而言有些重

10、用 TypeScript 編寫

最后，Vue.js 最近正在用 TypeScript 重寫。

這意味著它們對 TypeScript 支持都是一流的，因?yàn)榭蚣鼙旧硎蔷褪怯?TypeScript 編寫的。

其實(shí) React 用什么編寫并不重要，我也不認(rèn)為它有什么太大的區(qū)別，但看到 Vue.js 也用 TypeScript 編寫仍然是一件很不錯事。

感謝各位的閱讀，以上就是“Vue和React的比較”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Vue和React的比較這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！