vue和react總結

1、總結一下Vue和React的區別

相同點：

    1.都支持服務器端渲染

    2.都有Virtual DOM,組件化開發,經過props參數進行父子組件數據的傳遞,都實現webComponent規範

    3.數據驅動視圖

    4.都有支持native的方案,React的React native,Vue的weex

    5.都有管理狀態，React有redux,Vue有本身的Vuex（自適應vue，量身定作）

不一樣點：

       1.React嚴格上只針對MVC的view層,Vue則是MVVM模式

       2.virtual DOM不同,vue會跟蹤每個組件的依賴關係,不須要從新渲染整個組件樹.

           而對於React而言,每當應用的狀態被改變時,所有組件都會從新渲染,因此react中會須要shouldComponentUpdate這個生命週期函數方法來進行控制

       3.組件寫法不同, React推薦的作法是 JSX + inline style, 也就是把HTML和CSS全都寫進JavaScript了,即'all in js';

           Vue推薦的作法是webpack+vue-loader的單文件組件格式,即html,css,jd寫在同一個文件;

       4.數據綁定: vue實現了數據的雙向綁定,react數據流動是單向的

       5.state對象在react應用中不可變的,須要使用setState方法更新狀態;

         在vue中,state對象不是必須的,數據由data屬性在vue對象中管理；

 

2、Vue.js特色:

簡潔：頁面由HTML模板+Json數據+Vue實例組成

數據驅動：自動計算屬性和追蹤依賴的模板表達式

組件化：用可複用、解耦的組件來構造頁面

輕量：代碼量小，不依賴其餘庫

快速：精確有效批量DOM更新

板友好：可經過npm，bower等多種方式安裝，很容易融入.

能夠說：低耦合，可重用性，獨立開發，可測試

1. vue的指令：

v-moudel;v-for;v-if;v-bind;v-on;v-text;v-html;v-class;v-style;v-clock;v-pre;v-once.

2. 如何註冊自定義指令：

(1).全局指令

// 註冊一個全局自定義指令 `v-focus`
Vue.directive('focus', {
  // 當被綁定的元素插入到 DOM 中時……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

(2).組件內指令

directives: {
   focus: {
     // 指令的定義
     inserted: function (el) {
       el.focus()
     }
   }
 }

3. 如何理解vue的虛擬dom;

虛擬DOM就是JavaScript對象，就是在沒有真實渲染DOM以前作的操做。

好比：(1)、createElement（'Button'）;(2)、DocumentFragment（文檔碎片 ）就是虛擬dom操做

1.在標準dom機制下：在同一位置對比先後的dom節點，發現節點改變了，會繼續比較該節點的子節點，一層層對比，找到不一樣的節點，而後更新節點。

        2.在react的diff算法下，在同一位置對比先後dom節點,只要發現不一樣，就會刪除操做前的domm節點（包括其子節點），替換爲操做後的dom節點。

diff算法的處理方法，對操做先後的dom樹同一層的節點進行對比，一層一層對比。

4.如何理解vue中MVVM模式？

MVVM全稱是Model-View-ViewModel;vue是以數據爲驅動的，一旦建立dom和數據就保持同步，每當數據發生變化時，dom也會變化。DOMListeners和DataBindings是實現雙向綁定的關鍵。DOMListeners監聽頁面全部View層DOM元素的變化，當發生變化，Model層的數據隨之變化；DataBindings監聽Model層的數據，當數據發生變化，View層的DOM元素隨之變化。

5.vue的做用？中<keep-alive>

把切換出去的組件保留在緩存中，能夠保留組件的狀態或者避免從新渲染。Vue的內置組件，能在組件切換過程當中將狀態保留在內存中，防止重複渲染DOM。

<keep-alive include="test-keep-alive">

  <!-- 將緩存name爲test-keep-alive的組件 -->

  <component></component>

</keep-alive>

<keep-alive include="a,b">

  <!-- 將緩存name爲a或者b的組件，結合動態組件使用 -->

  <component :is="view"></component>

</keep-alive>

<!-- 使用正則表達式，需使用v-bind -->

<keep-alive :include="/a|b/">

  <component :is="view"></component>

</keep-alive>

<!-- 動態判斷 -->

<keep-alive :include="includedComponents">

  <router-view></router-view>

</keep-alive>

<keep-alive exclude="test-keep-alive">

  <!-- 將不緩存name爲test-keep-alive的組件 -->

  <component></component>

</keep-alive>
keep-alive生命週期鉤子函數：activated、deactivated；使用<keep-alive>會將數據保留在內存中，若是要在每次進入頁面的時候獲取最新的數據，須要在activated階段獲取數據，承擔原來created鉤子中獲取數據的任務。

6.vue生命週期的理解？

7. 組件之間的傳值通訊？

1.父組件向子組件傳值：

(1)子組件在props中建立一個屬性，用來接收父組件傳過來的值；

(2)在父組件中註冊子組件；

(3)在子組件標籤中添加子組件props中建立的屬性；

(4)把須要傳給子組件的值賦給該屬性

2.子組件向父組件傳值：

(1)子組件中須要以某種方式（如點擊事件）的方法來觸發一個自定義的事件；

(2)將須要傳的值做爲$emit的第二個參數，該值將做爲實參傳給響應事件的方法；

(3)在父組件中註冊子組件並在子組件標籤上綁定自定義事件的監聽。

3.頁面跳轉經過路由帶參數傳遞數據
       this.$router.push({

name: 'routePage',

query/params: {

routeParams: params

}
})
須要注意的是，實用params去傳值的時候，在頁面刷新時，參數會消失，用query則不會有這個問題。

獲取頁面中的參數值

  let type = this.$route.params.type

4.      vuex傳值

// 1.index.js頁面代碼

import Vue from 'vue'

import Vuex from 'vuex'

import mutations from './mutations'

import actions from './actions'

import getters from './getters'

Vue.use(Vuex)

const state = {

  order: {} //聲明order對象

}

export default new Vuex.Store({

  state,

  mutations,

  actions,

  getters

})

//2. getters.js頁面的代碼

export default {

 // 聲明獲取order的方法

  getOrder (state) {

    return state.order

  }

}

 

//3. mutation.js頁面的代碼

 

export default {

//設置order的值

  SET_ORDER (state, order) {

    state.order = order

  }

// 4.在頁面中設置調用set方法設置全局order的值

this.$store.commit('SET_ORDER', order)// SET_ORDER爲order值的設置方法的方法名

 

// 5.獲取全局的order值

 // 從vuex中獲取order

let template = this.$store.state.order

 

8. vuex是什麼？怎麼使用？哪一種功能場景使用它？

vue框架中狀態管理。在main.js引入store，注入。新建了一個目錄store，….. export 。場景有：單頁應用中，組件之間的狀態。音樂播放、登陸狀態、加入購物車

9.vue的路由守衛

 

三種，一種是全局導航鉤子：router.beforeEach(to,from,next)，做用：跳轉前進行判斷攔截。第二種：組件內的鉤子；第三種：單獨路由獨享組件
11、scss是什麼？在vue.cli中的安裝使用步驟是？有哪幾大特性？

答：css的預編譯。

使用步驟：

第一步：用npm 下三個loader（sass-loader、css-loader、node-sass）

第二步：在build目錄找到webpack.base.config.js，在那個extends屬性中加一個拓展.scss

第三步：仍是在同一個文件，配置一個module屬性

第四步：而後在組件的style標籤加上lang屬性 ，例如：lang=」scss」

有哪幾大特性:

1、能夠用變量，例如（$變量名稱=值）；

2、能夠用混合器，例如（）

3、能夠嵌套

 

12、mint-ui是什麼？怎麼使用？說出至少三個組件使用方法？

 答：基於vue的前端組件庫。npm安裝，而後import樣式和js，vue.use（mintUi）全局引入。在單個組件局部引入：import {Toast} from ‘mint-ui’。組件一：Toast(‘登陸成功’)；組件二：mint-header；組件三：mint-swiper

13、axios是什麼？怎麼使用？描述使用它實現登陸功能的流程？

 答：請求後臺資源的模塊。npm install axios -S裝好，而後發送的是跨域，需在配置文件中config/index.js進行設置。後臺若是是Tp5則定義一個資源路由。js中使用import進來，而後.get或.post。返回在.then函數中若是成功，失敗則是在.catch函數中

14、導航鉤子有哪些？它們有哪些參數？

 答：導航鉤子有：a/全局鉤子和組件內獨享的鉤子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave 

參數：有to（去的那個路由）、from（離開的路由）、next（必定要用這個函數才能去到下一個路由，若是不用就攔截）最經常使用就這幾種

15、Vue的雙向數據綁定原理是什麼？

 答：vue.js 是採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調。

 

具體步驟：

 

第一步：須要observe的數據對象進行遞歸遍歷，包括子屬性對象的屬性，都加上 setter和getter

這樣的話，給這個對象的某個值賦值，就會觸發setter，那麼就能監聽到了數據變化

 

第二步：compile解析模板指令，將模板中的變量替換成數據，而後初始化渲染頁面視圖，並將每一個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變更，收到通知，更新視圖

 

第三步：Watcher訂閱者是Observer和Compile之間通訊的橋樑，主要作的事情是:

1、在自身實例化時往屬性訂閱器(dep)裏面添加本身

2、自身必須有一個update()方法

3、待屬性變更dep.notice()通知時，能調用自身的update()方法，並觸發Compile中綁定的回調，則功成身退。

 

第四步：MVVM做爲數據綁定的入口，整合Observer、Compile和Watcher三者，經過Observer來監聽本身的model數據變化，經過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通訊橋樑，達到數據變化 -> 視圖更新；視圖交互變化(input) -> 數據model變動的雙向綁定效果。

17、請說下封裝 vue 組件的過程？

 

答：首先，組件能夠提高整個項目的開發效率。可以把頁面抽象成多個相對獨立的模塊，解決了咱們傳統項目開發：效率低、難維護、複用性等問題。 而後，使用Vue.extend方法建立一個組件，而後使用Vue.component方法註冊組件。子組件須要數據，能夠在props中接受定義。而子組件修改好數據後，想把數據傳遞給父組件。能夠採用emit方法。

18、請說出vue.cli項目中src目錄每一個文件夾和文件的用法？

答：assets文件夾是放靜態資源；components是放組件；router是定義路由相關的配置;view視圖；app.vue是一個應用主組件；main.js是入口文件

19、vuex有哪幾種屬性？

有五種，分別是 State、 Getter、Mutation 、Action、 Module

vuex的State特性

A、Vuex就是一個倉庫，倉庫裏面放了不少對象。其中state就是數據源存放地，對應於通常Vue對象裏面的data

B、state裏面存放的數據是響應式的，Vue組件從store中讀取數據，如果store中的數據發生改變，依賴這個數據的組件也會發生更新

C、它經過mapState把全局的 state 和 getters 映射到當前組件的 computed 計算屬性中

vuex的Getter特性

A、getters 能夠對State進行計算操做，它就是Store的計算屬性

B、 雖然在組件內也能夠作計算屬性，可是getters 能夠在多組件之間複用

C、 若是一個狀態只在一個組件內使用，是能夠不用getters

vuex的Mutation特性

Action 相似於 mutation，不一樣在於：Action 提交的是 mutation，而不是直接變動狀態；Action 能夠包含任意異步操做。

20、v-show和v-if指令的共同點和不一樣點

v-show指令是經過修改元素的display的CSS屬性讓其顯示或者隱藏

v-if指令是直接銷燬和重建DOM達到讓元素顯示和隱藏的效果

21、active-class是哪一個組件的屬性？

vue-router模塊的router-link組件。

22、第一次頁面加載會觸發哪幾個鉤子

答：第一次頁面加載時會觸發 beforeCreate, created, beforeMount, mounted 這幾個鉤子

23、vue如何實現按需加載配合webpack設置

webpack中提供了require.ensure()來實現按需加載。之前引入路由是經過import 這樣的方式引入，改成const定義的方式進行引入。

不進行頁面按需加載引入方式：import home from '../../common/home.vue'

進行頁面按需加載的引入方式：const home = r => require.ensure( [], () => r (require('../../common/home.vue')))

24、vuejs與angularjs以及react的區別？

1.與AngularJS的區別

相同點：

都支持指令：內置指令和自定義指令。

都支持過濾器：內置過濾器和自定義過濾器。

都支持雙向數據綁定。

都不支持低端瀏覽器。 

不一樣點：

1.AngularJS的學習成本高，好比增長了Dependency Injection特性，而Vue.js自己提供的API都比較簡單、直觀。

2.在性能上，AngularJS依賴對數據作髒檢查，因此Watcher越多越慢。

Vue.js使用基於依賴追蹤的觀察而且使用異步隊列更新。全部的數據都是獨立觸發的。

對於龐大的應用來講，這個優化差別仍是比較明顯的。

2.與React的區別

相同點：

React採用特殊的JSX語法，Vue.js在組件開發中也推崇編寫.vue特殊文件格式，對文件內容都有一些約定，二者都須要編譯後使用。

中心思想相同：一切都是組件，組件實例之間能夠嵌套。

都提供合理的鉤子函數，可讓開發者定製化地去處理需求。

都不內置列數AJAX，Route等功能到核心包，而是以插件的方式加載。

在組件開發中都支持mixins的特性。

不一樣點：

React依賴Virtual DOM,而Vue.js使用的是DOM模板。React採用的Virtual DOM會對渲染出來的結果作髒檢查。

Vue.js在模板中提供了指令，過濾器等，能夠很是方便，快捷地操做DOM。

react

 

1，react的生命週期

 初始化    1、getDefaultProps() 2、getInitialState() 3、componentWillMount() 4、 render() 5、componentDidMount()

更新     6 、componentWillReceiveProps(nextProps)

 7、shouldComponentUpdate(nextProps, nextState)

          8、componentWillUpdata(nextProps, nextState)    9、render()

           10、componentDidUpdate()

卸載       11、componentWillUnmount()

 

1，react的原理

  Reactjs一個用來構建用戶界面的JavaScript庫,至關於MVC架構中的V層框架，與市面上其餘框架不一樣的，React把每一個組件當成了一個狀態機，組件內部經過state來維護組件狀態的變化，當組件的狀態發生變化時，React經過虛擬DOM技術來增量並高效的更新真實的DOM。

 

2、react性能優化方案

（1）重寫shouldComponentUpdate來避免沒必要要的dom操做。

（2）使用 production 版本的react.js。

（3）使用key來幫助React識別列表中全部子組件的最小變化。

參考連接：

https://segmentfault.com/a/1190000006254212

3、爲何虛擬dom會提升性能?

虛擬dom至關於在js和真實dom中間加了一個緩存，利用dom diff算法避免了沒有必要的dom操做，從而提升性能。

具體實現步驟以下：

用 JavaScript 對象結構表示 DOM 樹的結構；而後用這個樹構建一個真正的 DOM 樹，插到文檔當中

當狀態變動的時候，從新構造一棵新的對象樹。而後用新的樹和舊的樹進行比較，記錄兩棵樹差別

把2所記錄的差別應用到步驟1所構建的真正的DOM樹上，視圖就更新了。

參考連接：

https://www.zhihu.com/question/29504639?sort=created

 

4、diff算法?

把樹形結構按照層級分解，只比較同級元素。

給列表結構的每一個單元添加惟一的key屬性，方便比較。

React 只會匹配相同 class 的 component（這裏面的class指的是組件的名字）

合併操做，調用 component 的 setState 方法的時候, React 將其標記爲 dirty.到每個事件循環結束, React 檢查全部標記 dirty 的 component 從新繪製.

選擇性子樹渲染。開發人員能夠重寫shouldComponentUpdate提升diff的性能。

參考連接：

https//segmentfault.com/a/1190000000606216

 

 

5、redux中間件

中間件提供第三方插件的模式，自定義攔截 action -> reducer 的過程。變爲 action -> middlewares -> reducer 。這種機制可讓咱們改變數據流，實現如異步 action ，action 過濾，日誌輸出，異常報告等功能。

常見的中間件：

redux-logger：提供日誌輸出

redux-thunk：處理異步操做

redux-promise：處理異步操做，actionCreator的返回值是promise

 

6、redux有什麼缺點

1.一個組件所須要的數據，必須由父組件傳過來，而不能像flux中直接從store取。

2.當一個組件相關數據更新時，即便父組件不須要用到這個組件，父組件仍是會從新render，可能會有效率影響，或者須要寫複雜的shouldComponentUpdate進行判斷。

 

 

6，redux的原理

1. 首先用戶發出action。 store.dispatch(action);

2.而後，Store 自動調用 Reducer，而且傳入兩個參數：當前 State 和收到的 Action。 Reducer 會返回新的 State 。 let nextState = todoApp(previousState, action);

3.State 一旦有變化，Store 就會調用監聽函數。

 

 

6， 

7. react和vue有哪些不一樣，說說你對這兩個框架的見解

相同點

· 都支持服務器端渲染

· 都有Virtual DOM,組件化開發,經過props參數進行父子組件數據的傳遞,都實現webComponent規範

· 數據驅動視圖

· 都有支持native的方案,React的React native,Vue的weex

不一樣點

· React嚴格上只針對MVC的view層,Vue則是MVVM模式

· virtual DOM不同,vue會跟蹤每個組件的依賴關係,不須要從新渲染整個組件樹.而對於React而言,每當應用的狀態被改變時,所有組件都會從新渲染,因此react中會須要shouldComponentUpdate這個生命週期函數方法來進行控制

· 組件寫法不同, React推薦的作法是 JSX + inline style, 也就是把HTML和CSS全都寫進JavaScript了,即'all in js'; Vue推薦的作法是webpack+vue-loader的單文件組件格式,即html,css,jd寫在同一個文件;

· 數據綁定: vue實現了數據的雙向綁定,react數據流動是單向的

· state對象在react應用中不可變的,須要使用setState方法更新狀態;在vue中,state對象不是必須的,數據由data屬性在vue對象中管理

8.什麼是mvvm mvc是什麼區別 原理

1、MVC（Model-View-Controller）

MVC是比較直觀的架構模式，用戶操做->View（負責接收用戶的輸入操做）->Controller（業務邏輯處理）->Model（數據持久化）->View（將結果反饋給View）。

MVC使用很是普遍，好比JavaEE中的SSH框架

 

3、MVVM（Model-View-ViewModel）

若是說MVP是對MVC的進一步改進，那麼MVVM則是思想的徹底變革。它是將「數據模型數據雙向綁定」的思想做爲核心，所以在View和Model之間沒有聯繫，經過ViewModel進行交互，並且Model和ViewModel之間的交互是雙向的，所以視圖的數據的變化會同時修改數據源，而數據源數據的變化也會當即反應view。

9，shouldComponentupdate的做用是啥爲何它這麼重要？

容許咱們手動地判斷是否要進行組件更新，根據組件的應用場景設置函數的合理返回值可以幫咱們避免沒必要要的更新

10、React項目用過什麼腳手架？Mern? Yeoman?

Mern：MERN是腳手架的工具，它能夠很容易地使用Mongo, Express, React and NodeJS生成同構JS應用。它最大限度地減小安裝時間，並獲得您使用的成熟技術來加速開發。

11、簡述flux 思想

Flux 的最大特色，就是數據的"單向流動"。

1.用戶訪問 View

2.View 發出用戶的 Action

3.Dispatcher 收到 Action，要求 Store 進行相應的更新

4.Store 更新後，發出一個"change"事件

5.View 收到"change"事件後，更新頁面