reactjs和vuejs有哪些區(qū)別

1.1.4 條件渲染和列表渲染

• v-if條件渲染一組數(shù)

• 我們用 v-for 指令根據(jù)一組數(shù)組的選項(xiàng)列表進(jìn)行渲染。v-for 指令需要使用 item in items 形式的特殊語法，items 是源數(shù)據(jù)數(shù)組并且 item 是數(shù)組元素迭代的別名。

1.1.5 事件處理器

• 通過v-on給元素注冊(cè)事件

• 使用 v-on 有幾個(gè)好處：

• 掃一眼 HTML 模板便能輕松定位在 JavaScript 代碼里對(duì)應(yīng)的方法。

• 因?yàn)槟銦o須在 JavaScript 里手動(dòng)綁定事件，你的 ViewModel 代碼可以是非常純粹的邏輯，和 DOM 完全解耦，更易于測(cè)試。

• 當(dāng)一個(gè) ViewModel 被銷毀時(shí)，所有的事件處理器都會(huì)自動(dòng)被刪除。你無須擔(dān)心如何自己清理它們。

1.1.6 表單控件

• v-model在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定

• 它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來更新元素。

1.1.7 計(jì)算屬性

• 在Vue中引入了計(jì)算屬性來處理模板中放入太多的邏輯會(huì)讓模板過重且難以維護(hù)的問題，這樣不但解決了上面的問題，而且也同時(shí)讓模板和業(yè)務(wù)邏輯更好的分離。

• 簡(jiǎn)單來說，假如data里面有屬性a=1，然后你需要一個(gè)變量跟著a變化，例如b=a+1，那么就需要用到計(jì)算屬性，Vue實(shí)例的computed屬性中，設(shè)置b為其屬性，其表現(xiàn)為一個(gè)函數(shù)，返回值是b的值。

1.1.8 ajax數(shù)據(jù)請(qǐng)求

• vue2.0中數(shù)據(jù)請(qǐng)求推薦使用axios

• Vue 的依賴追蹤是【原理上不支持雙向綁定，v-model 只是通過監(jiān)聽 DOM 事件實(shí)現(xiàn)的語法糖】

• vue的依賴追蹤是通過 Object.defineProperty 把data對(duì)象的屬性全部轉(zhuǎn)為 getter/setter來實(shí)現(xiàn)的；當(dāng)改變數(shù)據(jù)的某個(gè)屬性值時(shí)，會(huì)觸發(fā)set函數(shù),獲取該屬性值的時(shí)候會(huì)觸發(fā)get函數(shù)，通過這個(gè)特性來實(shí)現(xiàn)改變數(shù)據(jù)時(shí)改變視圖；也就是說只有當(dāng)數(shù)據(jù)改變時(shí)才會(huì)觸發(fā)視圖的改變，反過來在操作視圖時(shí)，只能通過DOM事件來改變數(shù)據(jù)，再由此來改變視圖，以此來實(shí)現(xiàn)雙向綁定

• 雙向綁定是在同一個(gè)組件內(nèi)，將數(shù)據(jù)和視圖綁定起來，和父子組件之間的通信并無什么關(guān)聯(lián)；

• 組件之間的通信采用單向數(shù)據(jù)流是為了組件間更好的解耦，在開發(fā)中可能有多個(gè)子組件依賴于父組件的某個(gè)數(shù)據(jù)，假如子組件可以修改父組件數(shù)據(jù)的話，一個(gè)子組件變化會(huì)引發(fā)所有依賴這個(gè)數(shù)據(jù)的子組件發(fā)生變化，所以vue不推薦子組件修改父組件的數(shù)據(jù)，直接修改props會(huì)拋出警告

1.2 react沒有數(shù)據(jù)雙向綁定

• react是單向數(shù)據(jù)流

• react中通過將state（Model層）與View層數(shù)據(jù)進(jìn)行雙向綁定達(dá)數(shù)據(jù)的實(shí)時(shí)更新變化，具體來說就是在View層直接寫JS代碼Model層中的數(shù)據(jù)拿過來渲染，一旦像表單操作、觸發(fā)事件、ajax請(qǐng)求等觸發(fā)數(shù)據(jù)變化，則進(jìn)行雙同步

1.2.1事件處理

• React 元素的事件處理和 DOM元素的很相似。但是有一點(diǎn)語法上的不同:

• React事件綁定屬性的命名采用駝峰式寫法，而不是小寫。

• 如果采用 JSX 的語法你需要傳入一個(gè)函數(shù)作為事件處理函數(shù)，而不是一個(gè)字符串(DOM元素的寫法)

• 在 React 中另一個(gè)不同是你不能使用返回 false 的方式阻止默認(rèn)行為。你必須明確的使用 preventDefault。

• 當(dāng)你使用 ES6 class 語法來定義一個(gè)組件的時(shí)候，事件處理器會(huì)成為類的一個(gè)方法。一般需要顯式的綁定this，例如

  this.handleClick = this.handleClick.bind(this);

• 你必須謹(jǐn)慎對(duì)待 JSX 回調(diào)函數(shù)中的 this，類的方法默認(rèn)是不會(huì)綁定 this 的。如果你忘記綁定 this.handleClick 并把它傳入 onClick, 當(dāng)你調(diào)用這個(gè)函數(shù)的時(shí)候 this 的值會(huì)是 undefined。

1.2.2 條件渲染

• React 中的條件渲染和 JavaScript 中的一致，使用 JavaScript 操作符 if 或條件運(yùn)算符來創(chuàng)建表示當(dāng)前狀態(tài)的元素，然后讓 React 根據(jù)它們來更新 UI。

• 你可以通過用花括號(hào)包裹代碼在 JSX 中嵌入任何表達(dá)式 ，也包括 JavaScript 的邏輯與 &&，它可以方便地條件渲染一個(gè)元素。之所以能這樣做，是因?yàn)樵?JavaScript 中，true && expression 總是返回 expression，而 false && expression 總是返回 false。因此，如果條件是 true，&& 右側(cè)的元素就會(huì)被渲染，如果是 false，React 會(huì)忽略并跳過它。

• 條件渲染的另一種方法是使用 JavaScript 的條件運(yùn)算符 condition ? true : false。

1.2.3 列表渲染

• 你可以通過使用{}在JSX內(nèi)構(gòu)建一個(gè)元素集合，使用Javascript中的map()方法循遍歷數(shù)組

• Keys可以在DOM中的某些元素被增加或刪除的時(shí)候幫助React識(shí)別哪些元素發(fā)生了變化。因此你應(yīng)當(dāng)給數(shù)組中的每一個(gè)元素賦予一個(gè)確定的標(biāo)識(shí)。一個(gè)元素的key最好是這個(gè)元素在列表中擁有的一個(gè)獨(dú)一無二的字符串。通常，我們使用來自數(shù)據(jù)的id作為元素的key。

1.2.4 表單操作

• HTML表單元素與React中的其他DOM元素有所不同,因?yàn)楸韱卧厣鷣砭捅Ａ粢恍﹥?nèi)部狀態(tài)。

• 當(dāng)用戶提交表單時(shí)，HTML的默認(rèn)行為會(huì)使這個(gè)表單會(huì)跳轉(zhuǎn)到一個(gè)新頁(yè)面。在React中亦是如此。但大多數(shù)情況下，我們都會(huì)構(gòu)造一個(gè)處理提交表單并可訪問用戶輸入表單數(shù)據(jù)的函數(shù)。實(shí)現(xiàn)這一點(diǎn)的標(biāo)準(zhǔn)方法是使用一種稱為“受控組件”的技術(shù)。其值由React控制的輸入表單元素稱為“受控組件”。this.setState({value: event.target.value});

• 當(dāng)你有處理多個(gè)受控的input元素時(shí)，你可以通過給每個(gè)元素添加一個(gè)name屬性，來讓處理函數(shù)根據(jù) event.target.name的值來選擇做什么。

1.2.5 狀態(tài)提升

• 在React中，狀態(tài)分享是通過將state數(shù)據(jù)提升至離需要這些數(shù)據(jù)的組件最近的父組件來完成的。這就是所謂的狀態(tài)提升。this.props.xxx

• 在React應(yīng)用中，對(duì)應(yīng)任何可變數(shù)據(jù)理應(yīng)只有一個(gè)單一“數(shù)據(jù)源”。通常，狀態(tài)都是首先添加在需要渲染數(shù)據(jù)的組件中。此時(shí)，如果另一個(gè)組件也需要這些數(shù)據(jù)，你可以將數(shù)據(jù)提升至離它們最近的父組件中。你應(yīng)該在應(yīng)用中保持 自上而下的數(shù)據(jù)流，而不是嘗試在不同組件中同步狀態(tài)。

2.組件化以及組件數(shù)據(jù)流

2.1 react中的組件及數(shù)據(jù)流

• React是單向數(shù)據(jù)流，數(shù)據(jù)主要從父節(jié)點(diǎn)傳遞到子節(jié)點(diǎn)（通過props）。如果頂層（父級(jí)）的某個(gè)props改變了，React會(huì)重渲染所有的子節(jié)點(diǎn)。

• react中實(shí)現(xiàn)組件有兩種實(shí)現(xiàn)方式，一種是createClass方法，另一種是通過ES2015的思想類繼承React.Component來實(shí)現(xiàn)

• 在React應(yīng)用中，按鈕、表單、對(duì)話框、整個(gè)屏幕的內(nèi)容等，這些通常都被表示為組件。

• React推崇的是函數(shù)式編程和單向數(shù)據(jù)流：給定原始界面（或數(shù)據(jù)），施加一個(gè)變化，就能推導(dǎo)出另外一個(gè)狀態(tài)（界面或者數(shù)據(jù)的更新）

• 組件可以將UI切分成一些的獨(dú)立的、可復(fù)用的部件，這樣你就只需專注于構(gòu)建每一個(gè)單獨(dú)的部件。組件從概念上看就像是函數(shù)，它可以接收任意的輸入值（稱之為“props”），并返回一個(gè)需要在頁(yè)面上展示的React元素。
  1. Props的只讀性

• 無論是使用函數(shù)或是類來聲明一個(gè)組件，它決不能修改它自己的props。

• 所有的React組件必須像純函數(shù)那樣使用它們的props。

props與State的區(qū)別

- props是property的縮寫，可以理解為HTML標(biāo)簽的attribute。不可以使用this.props直接修改props，因?yàn)閜rops是只讀的，props是用于整個(gè)組件樹中傳遞數(shù)據(jù)和配置。在當(dāng)前組件訪問props，使用this.props。

- props是一個(gè)組件的設(shè)置參數(shù)，可以在父控件中選擇性設(shè)置。父組件對(duì)子控件的props進(jìn)行賦值，并且props的值不可改變。一個(gè)子控件自身不能改變自己的 props。

- state:當(dāng)一個(gè)組件 mounts的時(shí)候，state如果設(shè)置有默認(rèn)值的會(huì)被使用，并且state可能時(shí)刻的被改變。一個(gè)子控件自身可以管理自己的state，但是需要注意的是，無法管理其子控件的state。所以可以認(rèn)為，state是子控件自身私有的。

- 每個(gè)組件都有屬于自己的state，state和props的區(qū)別在于前者(state)只存在于組件內(nèi)部，只能從當(dāng)前組件調(diào)用this.setState修改state值（不可以直接修改this.state?。?。

- props是一個(gè)父組件傳遞給子組件的數(shù)據(jù)流，可以一直的被傳遞到子孫組件中。然而 state代表的是子組件自身的內(nèi)部狀態(tài)。從語義上講，改變組件的狀態(tài)，可能會(huì)導(dǎo)致dom結(jié)構(gòu)的改變或者重新渲染。而props是父組件傳遞的參數(shù)，所以可以被用于初始化渲染和改變組件自身的狀態(tài)，雖然大多數(shù)時(shí)候組件的狀態(tài)是又外部事件觸發(fā)改變的。我們需要知道的是，無論是state改變，還是父組件傳遞的 props改變，render方法都可能會(huì)被執(zhí)行。

- 一般我們更新子組件都是通過改變state值，更新新子組件的props值從而達(dá)到更新。

2.1.1 組件之間的通信

1、父子組件數(shù)通信

• 父與子之間通props屬性進(jìn)行傳遞

• 子與父之間，父組件定義事件，子組件觸發(fā)父組件中的事件時(shí)，通過實(shí)參的形式來改變父組件中的數(shù)據(jù)來通信

即：
- * 父組件更新組件狀態(tài) —–props—–>　子組件更新
- * 子組件更新父組件狀態(tài) —–需要父組件傳遞回調(diào)函數(shù)—–> 子組件調(diào)用觸發(fā)

2、非父子組件之間的通信，嵌套不深的非父子組件可以使共同父組件，觸發(fā)事件函數(shù)傳形參的方式來實(shí)現(xiàn)

兄弟組件：

（1） 按照React單向數(shù)據(jù)流方式，我們需要借助父組件進(jìn)行傳遞，通過父組件回調(diào)函數(shù)改變兄弟組件的props。
- 其實(shí)這種實(shí)現(xiàn)方式與子組件更新父組件狀態(tài)的方式是大同小異的。

（2） 當(dāng)組件層次很深的時(shí)候，在這里，React官方給我們提供了一種上下文方式，可以讓子組件直接訪問祖先的數(shù)據(jù)或函數(shù)，無需從祖先組件一層層地傳遞數(shù)據(jù)到子組件中。

2.1.2 組件的生命周期

construtor() //創(chuàng)建組件
componentWillMount() //組件掛載之前
componentDidMount() // 組件掛載之后
componentWillReceiveProps() // 父組件發(fā)生render的時(shí)候子組件調(diào)用該函數(shù)
shouldComponentUpdate() // 組件掛載之后每次調(diào)用setState后都會(huì)調(diào)用該函數(shù)判斷是否需要重新渲染組件，默認(rèn)返回true
componentDidUpdate() // 更新
render() //渲染，react中的核心函數(shù)
componentWillUnmount() //組件被卸載的時(shí)候調(diào)用，一般在componentDidMount注冊(cè)的事件需要在這里刪除

2.2 vue中的組件和數(shù)據(jù)流

2.2.1 組件化應(yīng)用構(gòu)建

• 組件系統(tǒng)是 Vue 的另一個(gè)重要概念，因?yàn)樗且环N抽象，允許我們使用小型、獨(dú)立和通?？蓮?fù)用的組件構(gòu)建大型應(yīng)用。

• 在 Vue 里，一個(gè)組件本質(zhì)上是一個(gè)擁有預(yù)定義選項(xiàng)的一個(gè) Vue 實(shí)例

• 在一個(gè)大型應(yīng)用中，有必要將整個(gè)應(yīng)用程序劃分為組件，以使開發(fā)可管理。

• 組件(component)是 Vue 最強(qiáng)大的功能之一。組件可以幫助你擴(kuò)展基本的 HTML 元素，以封裝可重用代碼。在較高層面上，組件是 Vue 編譯器附加行為后的自定義元素。在某些情況下，組件也可以是原生 HTML 元素的形式，以特定的 is 特性擴(kuò)展。

• 組件中，data必須是一個(gè)函數(shù)

• 組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生 HTML 元素的形式，以 is 特性擴(kuò)展。

2.2.2 響應(yīng)式

• 當(dāng)一個(gè) Vue 實(shí)例被創(chuàng)建時(shí)，它向 Vue 的響應(yīng)式系統(tǒng)中加入了其 data 對(duì)象中能找到的所有的屬性。當(dāng)這些屬性的值發(fā)生改變時(shí)，視圖將會(huì)產(chǎn)生“響應(yīng)”，即匹配更新為新的值。

• 當(dāng)這些數(shù)據(jù)改變時(shí)，視圖會(huì)進(jìn)行重渲染。值得注意的是只有當(dāng)實(shí)例被創(chuàng)建時(shí) data 中存在的屬性是響應(yīng)式的。

2.2.3 組件的生命周期

• 每個(gè) Vue 實(shí)例在被創(chuàng)建之前都要經(jīng)過一系列的初始化過程。例如需要設(shè)置數(shù)據(jù)監(jiān)聽、編譯模板、掛載實(shí)例到 DOM、在數(shù)據(jù)變化時(shí)更新 DOM 等。同時(shí)在這個(gè)過程中也會(huì)運(yùn)行一些叫做生命周期鉤子的函數(shù)，給予用戶機(jī)會(huì)在一些特定的場(chǎng)景下添加他們自己的代碼。

• 比如 created 鉤子可以用來在一個(gè)實(shí)例被創(chuàng)建之后執(zhí)行代碼，也有一些其它的鉤子，在實(shí)例生命周期的不同場(chǎng)景下調(diào)用，如 mounted、updated、destroyed。鉤子的 this 指向調(diào)用它的 Vue 實(shí)例。

• 生命周期圖示：
  

2.2.3 組件之間的通信

• Vue默認(rèn)的是單向數(shù)據(jù)流，這是Vue直接提出來說明的，父組件默認(rèn)可以向子組件傳遞數(shù)據(jù)，但是子組件向父組件傳遞數(shù)據(jù)就需要額外設(shè)置了。

• Vue 也支持雙向綁定，默認(rèn)為單向綁定，數(shù)據(jù)從父組件單向傳給子組件。在大型應(yīng)用中使用單向綁定讓數(shù)據(jù)流易于理解。

• 父子組件之間的數(shù)據(jù)通信是通過Prop和自定義事件實(shí)現(xiàn)的，而非父子組件可以使用訂閱/發(fā)布模式實(shí)現(xiàn)（類似于Angualr中的非父子指令之間的通信），再?gòu)?fù)雜一點(diǎn)也是建議使用狀態(tài)管理（vuex）。

• 在 Vue 中，父子組件之間的關(guān)系可以概述為：props 向下，events 向上。父組件通過 props 向下傳遞數(shù)據(jù)給子組件，子組件通過 events 發(fā)送消息給父組件。

1.父向子

- 每個(gè)組件實(shí)例都有自己的孤立隔離作用域。也就是說，不能（也不應(yīng)該）直接在子組件模板中引用父組件數(shù)據(jù)。要想在子組件模板中引用父組件數(shù)據(jù)，可以使用 props 將數(shù)據(jù)向下傳遞到子組件。

- 每個(gè) prop 屬性,都可以控制是否從父組件的自定義屬性中接收數(shù)據(jù)。子組件需要使用 props 選項(xiàng)顯式聲明 props，以便它可以從父組件接收到期望的數(shù)據(jù)。

- 動(dòng)態(tài)Props，類似于將一個(gè)普通屬性綁定到一個(gè)表達(dá)式，我們還可以使用 v-bind 將 props 屬性動(dòng)態(tài)地綁定到父組件中的數(shù)據(jù)。無論父組件何時(shí)更新數(shù)據(jù)，都可以將數(shù)據(jù)向下流入到子組件中

2.子向父

- 使用自定義事件
- 每個(gè) Vue 實(shí)例都接入了一個(gè)事件接口(events interface)，也就是說，這些 Vue 實(shí)例可以做到：
- 使用 on(eventName)監(jiān)聽一個(gè)事件?使用emit(eventName) 觸發(fā)一個(gè)事件

3. 非父子組件通信
- 可以使用一個(gè)空的 Vue 實(shí)例作為一個(gè)事件總線中心(central event bus)，用emit觸發(fā)事件，on監(jiān)聽事件

3.狀態(tài)管理

3.1 react中的狀態(tài)管理：Flux

• Redux 是 React 生態(tài)環(huán)境中最流行的 Flux 實(shí)現(xiàn)。Redux 事實(shí)上無法感知視圖層，所以它能夠輕松的通過一些簡(jiǎn)單綁定和 Vue 一起使用。
  創(chuàng)建actions
  創(chuàng)建store
  創(chuàng)建dispatcher
  在view層調(diào)用action中的方法

• 就是各類component

• 在dispatcher中通過register來給每個(gè)action注對(duì)應(yīng)的的store中的方法

• store中包含應(yīng)用的狀態(tài)和邏輯，用來管理應(yīng)用中不同的狀態(tài)和邏輯，相當(dāng)于Model層

• 定義動(dòng)作，事件觸發(fā)需要用dispatcher來調(diào)用

• 行為，如增加操作、刪除操作、更新操作，就是一堆函數(shù)。

3.2 vue中的狀態(tài)管理vuex

• vuex借鑒了 Flux、Redux、和 The Elm Architecture。與其他模式不同的是，Vuex 是專門為 Vue.js 設(shè)計(jì)的狀態(tài)管理庫(kù)，以利用 Vue.js 的細(xì)粒度數(shù)據(jù)響應(yīng)機(jī)制來進(jìn)行高效的狀態(tài)更新。這使得它能夠更好地和 Vue 進(jìn)行整合，同時(shí)提供簡(jiǎn)潔的 API 和改善過的開發(fā)體驗(yàn)。

• 組件不允許直接修改屬于 store 實(shí)例的 state，而應(yīng)執(zhí)行 action 來分發(fā) (dispatch) 事件通知 store 去改變，我們最終達(dá)成了 Flux 架構(gòu)。這樣約定的好處是，我們能夠記錄所有 store 中發(fā)生的 state 改變，同時(shí)實(shí)現(xiàn)能做到記錄變更 (mutation)、保存狀態(tài)快照、歷史回滾/時(shí)光旅行的先進(jìn)的調(diào)試工具。

• 每一個(gè) Vuex 應(yīng)用的核心就是 store（倉(cāng)庫(kù)）?！皊tore”基本上就是一個(gè)容器，它包含著你的應(yīng)用中大部分的狀態(tài)

• Vuex 和單純的全局對(duì)象有以下兩點(diǎn)不同：

  1、Vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時(shí)候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會(huì)相應(yīng)地得到高效更新。

  2、你不能直接改變 store 中的狀態(tài)。改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個(gè)狀態(tài)的變化，從而讓我們能夠?qū)崿F(xiàn)一些工具幫助我們更好地了解我們的應(yīng)用。

  3、State

• Vuex 使用單一狀態(tài)樹——是的，用一個(gè)對(duì)象就包含了全部的應(yīng)用層級(jí)狀態(tài)。至此它便作為一個(gè)“唯一數(shù)據(jù)源 (SSOT)”而存在。這也意味著，每個(gè)應(yīng)用將僅僅包含一個(gè) store 實(shí)例。單一狀態(tài)樹讓我們能夠直接地定位任一特定的狀態(tài)片段，在調(diào)試的過程中也能輕易地取得整個(gè)當(dāng)前應(yīng)用狀態(tài)的快照。這也意味著，每個(gè)應(yīng)用將僅僅包含一個(gè) store 實(shí)例。

• 從state中獲取狀態(tài)值，有時(shí)候我們需要從 store 中的 state 中派生出一些狀態(tài)，例如對(duì)列表進(jìn)行過濾并計(jì)數(shù)。

  1、Mutation

  2、Action

  3、Module

• Action 類似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接變更狀態(tài)。

• Action 可以包含任意異步操作。

• dispatch分發(fā)action

• 更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。Vuex 中的 mutation 非常類似于事件：每個(gè) mutation 都有一個(gè)字符串的 事件類型 (type) 和 一個(gè) 回調(diào)函數(shù) (handler)。這個(gè)回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方，并且它會(huì)接受 state 作為第一個(gè)參數(shù)。

• 你不能直接調(diào)用一個(gè) mutation handler。這個(gè)選項(xiàng)更像是事件注冊(cè)：“當(dāng)觸發(fā)一個(gè)類型為 increment 的 mutation 時(shí)，調(diào)用此函數(shù)?！币獑拘岩粋€(gè) mutation handler，你需要以相應(yīng)的 type 調(diào)用 store.commit 方法

• 由于使用單一狀態(tài)樹，應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對(duì)象。當(dāng)應(yīng)用變得非常復(fù)雜時(shí)，store 對(duì)象就有可能變得相當(dāng)臃腫。

• Vuex 允許我們將 store 分割成模塊（module）。每個(gè)模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進(jìn)行同樣方式的分割

4.路由

• 兩者的路由很相似，都是利用了組件化思想

4.1 react中的路由

• 在路由庫(kù)的問題上，React 選擇把問題交給社區(qū)維護(hù)，因此創(chuàng)建了一個(gè)更分散的生態(tài)系統(tǒng)。但相對(duì)的，React 的生態(tài)系統(tǒng)相比 Vue 更加繁榮。

• react中，需要引入react-router庫(kù)，
  使用時(shí)，路由器Router就是React的一個(gè)組件。

• Router組件本身只是一個(gè)容器，真正的路由要通過Route組件定義。

• Route組件定義了URL路徑與組件的對(duì)應(yīng)關(guān)系。你可以同時(shí)使用多個(gè)Route組件。

- Link組件用于取代元素，生成一個(gè)鏈接，允許用戶點(diǎn)擊后跳轉(zhuǎn)到另一個(gè)路由。它基本上就是元素的React 版本，可以接收Router的狀態(tài)。

4.2 vue中的路由

• Vue 的路由庫(kù)和狀態(tài)管理庫(kù)都是由官方維護(hù)支持且與核心庫(kù)同步更新的。

• 使用 Vue.js ，我們已經(jīng)可以通過組合組件來組成應(yīng)用程序，當(dāng)你要把 vue-router 添加進(jìn)來，我們需要做的是，將組件(components)映射到路由(routes)，然后告訴 vue-router 在哪里渲染它們。

  HTML中：

  
Hello App!
  

    
    
    
    Go to Foo
    Go to Bar