p { 
  
  
  
    font-size: 2em; 
  
  
  
    text-align: center; 
  
  
  
  } 
  
  
  

 
 
 

 
 
 

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

 
 
 

  
  
  

  
  
  
  class="static" 
  
  
  
  :class="{ active: isActive, 'text-danger': hasError }" 
  
  
  
>

 
 
 

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

 
 
 

  
  
  
function Nav({ left, right }) { 
  
  
  
  return ( 
  
  
  
    
  
  
  
      {left}

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

 
 
 

針對(duì)事件地指令：

 
 
 

  
  
  
 
  
  
  
 ...  
  
  
  
 
  
  
  
 ... 
 
 
 

還有其他更多的指令。

指令還支持修飾符。

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

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

 
 
 

  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  

  
  
  
 
  
  
  
...and more!
 
 
 

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

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

它將轉(zhuǎn)換為：

 
 
 

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

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

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

太酷了。

8、表單輸入綁定

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

從文檔中發(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 鼓勵(lì)（并要求）您學(xué)習(xí)學(xué)習(xí)數(shù)據(jù)實(shí)際是如何設(shè)置以及它是如何變化的。這意味著，如果您曾經(jīng)用普通 JS 寫過一個(gè)表單，您將更了解其運(yùn)行原理。 與 Vue.js 不同，后者幫您把這些特性都抽象出來了。

9、自定義指令

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

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

 
 
 

  
  
  
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 中，你可能會(huì)編寫一個(gè)自定義組件來完成相同的事情，但對(duì)于這種簡單任務(wù)而言有些重

10、用 TypeScript 編寫

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

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

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

總結(jié)

我是要放棄 React 并開始專門使用 Vue.js 嗎？不，我仍然非常喜歡作為“庫”的 React 并且坦率地講，我已經(jīng)很精通編寫 React 程序了。

但是，我很希望看到 React 能從 Vue.js 中汲取一些靈感并整合到其中，如果只能從本文中提到的幾個(gè)點(diǎn)中選擇一個(gè)，我絕對(duì)選風(fēng)格指南。我很期盼能看到 React 有一個(gè)官方支持和維護(hù)的風(fēng)格指南。

希望我能讓你看到一些你不知道 Vue.js！我很確信自己真的很喜歡 Vue.js 的哲學(xué)！