Vue React在某些語法上的使用差異

react、vue都是當前非常熱門的前端js框架，兩者的效能都非常好，這篇部落格主要是作為筆記，用於區分react、vue一些功能相同但語法不同的對比，以防止混淆兩者。

一、vue、react模板

vue.js 使用了基於 html 的模版語法：

資料繫結最常見的形式就是使用}（雙大括號）

>}}
}<
/div>

動態繫結屬性使用v-bind:name="變數名"或語法糖方式:name="變數名"。

class=""
>
<
/div>
class=""
>
<
/div>

react使用jsx語法：

資料繫結或者js語法都使用{}(單大括號)

>
<
/div>

屬性繫結同樣使用{}

>
<
/div>

注意：react中想要給元素新增類,需要使用classname.

二、vue模板有指令，而react沒有

vue指令：

vue中有這些指令，可以很方便的渲染列表，繫結事件，控制是否隱藏元素。那麼react中沒有指令之說，那麼要想實現渲染列表，控制隱藏元素就相對vue更複雜。

1.示例：渲染列表

var arr=[1
,2,3
,4,5
]

vue:

>
>
v-for
="(item,index) in arr"
:key
="index"
>
}li>
ul>
template
>

react:

export
default
class
***extends
react.component
>
<
/li>})
}<
/ul>)}
}

react實現渲染列表使用了array.map()方法。

2.示例：控制元素的顯示隱藏

var isshow=
true
;

vue:無論是控制元素還是控制項的顯示、隱藏都可以使用v-if指令。

"isshow"
>哈哈哈<
/div>
或"isshow"
>我是helloworld元件<
/hello-world>

react:控制元素顯示、隱藏可以使用條件渲染，而元件的顯示隱藏只需返回null。

export
default
class
***extends
react.component
<
/div>)}
}或export
default
class
***extends
react.component
}

當isshow為true時，span標籤可顯示，同樣可以使用三目運算發控制某元素的顯示、隱藏。控制項的顯示可以在呼叫元件時，可以在父元件向子元件傳值,通過props控制子元件的顯示隱藏。

三、元件的使用

區別：四、父傳子資料

react、vue中父元件向子元件傳遞資料都是通過props,兩者用法也不同。

父傳子資料：

var name=
"張三"
var obj=

vue:

模擬在父元件使用子元件：
父："name"
:obj=
"obj"
>
<
/child-component>
<
/template>
----
----
----
----
----
----
----
----
----
----
----
----
子：}<
/h1>
}<
/span>
<
/div>
<
/template>
export
default}}
,		name:
}}

react:

import childcomponent from
'./***x'
reactdom.
render
(/>
,	document.
getelementbyid()
)------
----
----
----
----
----
----
----
----
----
----
--import proptypes from
'prop-types'
export
default
class
childcomponent
extends
react.component
//設定props資料型別
static proptypes=
render()
<
/h1>
<
/span>
<
/span>)}
}

由於在父元件obj物件使用了擴充套件運算子，所以傳過來的是物件裡面的屬性，因此直接使用this.props.age,而不是this.props.obj.age。

注意：react設定props預設值和資料型別還需分開設定，相比於vue就更。。。

五、元件私有資料

vue中私有資料可通過data,computed定義，而react使用state定義,它們修改資料方式差別也很大。

vue:


}<
/span>
<
/div>
<
/template>
export
default
}mounted()
,3000)}
}

react:

import react from
'react'
;export
default
class
***extends
react.component
}componentdidmount()
)},3000)}
render()
<
/span>
}}

vue中修改data資料可直接使用this.***=『***xx』,而react修改state則需要使用this.setstate(),並且this.setstate還是非同步修改state，因為每次修改資料都會引起重繪,react為了更好的效能，通常會當有幾個state改變時才會修改state，即多個state修改才引起一次重繪，優化了效能。

github上適合練習的vue react專案

1.初步練手但不是很全的vue2.0專案三天 2.vue3.0 釘釘專案 3.惠樂遊 pc首頁 vue cli3.0 4.vue3.0入門專案仿b站移動端使用的技術棧前台 vue vue router vuex axios mui 後端開放介面 node.js 資料庫 mongodb 此處只有...

Python與C在語法上的不同總結（一二）

在學習了c語言的一些基本知識後，我因專業所需開始學習python。為了將二者區分，不至於在編寫時出現語法錯誤，於是寫此總結，對二者編寫上的不同做乙個區分。再說區別之前，還要說一下相同之處。二者在程式流程框架上大體一致。條件迴圈兩大結構體，函式塊的呼叫等。因此學習了c語言在學python會顯得輕鬆...

資料庫oracle與mysql在語法上的區別

資料庫oracle與mysql在語法上的區別不是很多，但是也有一些。下面是部分參考 1，oracle沒有offet,limit，在mysql中我們用它們來控制顯示的行數，最多的是分頁了。oracle要分頁的話，要換成rownum。2，oracle建表時，沒有auto increment，所有要想讓表...

Vue React在某些語法上的使用差異

github上適合練習的vue react專案

Python與C在語法上的不同總結（一 二）

資料庫oracle與mysql在語法上的區別

相關推薦

Python與C在語法上的不同總結（一二）