一、總結一下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對象中管理；
二、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是什么區別 原理
一、MVC（Model-View-Controller）
MVC是比較直觀的架構模式，用戶操作->View（負責接收用戶的輸入操作）->Controller（業務邏輯處理）->Model（數據持久化）->View（將結果反饋給View）。
MVC使用非常廣泛，比如JavaEE中的SSH框架
三、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"事件后，更新頁面