一個VUE項目的主樹：
assets文件夾是放靜態資源；
components是放組件；
router是定義路由相關的配置;
view視圖；
app.vue是一個應用主組件；
main.js是入口文件
知識點：
1.MVC和MVVM
MVC是Model-View- Controller的簡寫，分別表示：
Model（數據模型），用於存放數據
View（視圖），也就是用戶界面
Controller（y業務邏輯）是Model和View的協調者，Controller把Model中的數據拿過來給View使用
關系：用戶操作> View (負責接受用戶的輸入操作)>Controller（業務邏輯處理）>Model（數據持久化）>View（將結果通過View反饋給用戶）
缺點：1.所有業務邏輯都在Controller里操作，邏輯復雜且不利於維護，
2.大量的DOM 操作使頁面渲染性能降低，加載速度變慢，影響用戶體驗。
3.當 Model 頻繁發生變化，需要主動更新到View ；當用戶的操作導致Model發生變化，同樣需要將變化的數據同步到Model中， 這樣的工作不僅繁瑣，而且很難維護復雜多變的數據狀態。
MVVM是Model-View-ViewModel的簡寫，分別表示：
Movel（數據模型）
View（視圖）
ViewModel 是一個同步View 和 Model的對象
核心是雙向數據綁定，View和Model之間並沒有直接的聯系，是通過ViewModel進行交互，View的變動，自動反映在ViewModel上，反之亦然，這樣就保證視圖和數據的一致性。
2.vue的優點是什么？
· 低耦合。視圖（View）可以獨立於Model變化和修改，一個ViewModel可以綁定到不同的"View"上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。
· 可重用性。一些視圖邏輯放在一個ViewModel里面，讓很多view重用視圖邏輯。
· 獨立開發。開發人員可以專注於業務邏輯和數據的開發（ViewModel），設計人員可以專注於頁面設計。
· 可測試。界面素來是比較難於測試的，而現在測試可以針對ViewModel來寫。
3.vue的生命周期
第一對用於簡單的ajax請求，頁面初始化。
beforeCreate
實例對象剛創建，元素DOM和數據都還沒有初始化，沒有綁定屬性。
created
實例對象完成創建，屬性已綁定，但DOM未生成，數據data已經初始化完成，方法也已經可以調用，但是DOM為渲染。
第二對馬上渲染真實的DOM，獲取vnode信息，ajax請求。
beforeMount
組件掛載之前觸發，虛擬DOM創建已完成。DOM未完成掛載，數據也初始化完成，但是數據的雙向綁定還是顯示{{}}，這是因為Vue采用了Virtual DOM（虛擬Dom）技術，先占住了一個坑。
mounted
組件掛載完成觸發，真實DOM完成，數據和DOM都完成掛載，在上一個周期占位的數據把值給渲染進去。一般請求會放在這個地方，因為這邊請求改變數據之后剛好能渲染。
第三對
beforeUpdate
數據更新前觸發，diff算法對比之后重新渲染。只要是頁面數據改變了都會觸發，數據更新之前，頁面數據還是原來的數據，當你請求賦值一個數據的時候會執行這個周期，如果沒有數據改變不執行。
updated
組件更新完成，不能更改數據，負責死循環。只要是頁面數據改變了都會觸發，數據更新完畢，頁面的數據是更新完成的。beforeUpdate和updated要謹慎使用，因為頁面更新數據的時候都會觸發，在這里操作數據很影響性能和容易死循環。
第四對
beforeDestroy
實例對象銷毀之前觸發，清除計時器和事件。這個周期是在組件銷毀之前執行，在我項目開發中，覺得這個其實有點類似路由鈎子beforeRouterLeave,都是在路由離開的時候執行，只不過beforeDestroy無法阻止路由跳轉，但是可以做一些路由離開的時候操作，因為這個周期里面還可以使用data和method。比如一個倒計時組件，如果在路由跳轉的時候沒有清除，這個定時器還是在的，這時候就可以在這個里面清除計時器。
Destroyed
實例對象銷毀后觸發，剩余DOM空殼。
4.vue雙向綁定原理
Vue數據雙向綁定（即數據響應式），是利用了Object.defineProperty()數據劫持重新定義了，對象獲取屬性值get和設置屬性值set的操作來實現的。
監聽器Observer，劫持並監聽所有屬性，有變動的，就通知訂閱者。
訂閱者Watcher，可以收到屬性的變化通知並執行相應的函數，從而更新視圖。
解析器Compile，解析每個節點的相關指令，並根據初始化模板data數據以及初始化相應的訂閱器。替換數據v-model, v-on
5.組件的傳值
a.父組件與子組件傳值
父組件通過標簽上面定義傳值 ：eg='data' 父組件中 data(){return {data:'egdata'}}.
子組件通過props方法接受數據 props:['eg'] , 在props 中添加了元素之后，就不需要在 data 中再添加變量了.
b.子組件向父組件傳遞數據
子組件通過$emit方法傳遞參數觸發事件，在父組件監聽事件$on( )
子組件部分:
父組件中：
c.同級傳值
1.query或params傳參，this.$router.push( )
2.sessionstore傳參
6.路由之間跳轉
聲明式（標簽跳轉） 編程式（ js跳轉）
①.直接修改地址欄中的路由地址 ②通過router-link實現跳轉 ③通過js的編程的方式
vue路由兩種方式：name和<router-link>中的to傳參
<router-link:to = "{name: xxx, params: { key :value }}"> valuestring </router-link>
vue-router利用url傳參
7.vue計算屬性
watch：監聽屬性，監聽數的變化，監聽對象。
computed：計算屬性，對屬性業務邏輯的操作，不循環。它對數據處理后，緩存內存里面。方法對任務操作。
8.vuex是什么？怎么使用？哪種功能場景使用它？
vue框架中狀態管理，處理組件間的通訊。
使用：在main.js引入store，注入。新建一個目錄store，….. export 。
場景有：單頁應用中，組件之間的狀態。音樂播放、登錄狀態、加入購物車
main.js:
import store from './store'
new Vue({
el:'#app',
store
})
屬性有五種，分別是 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 可以包含任意異步操作。
（3）不用Vuex會帶來什么問題？
· 可維護性會下降，想修改數據要維護三個地方；
· 可讀性會下降，因為一個組件里的數據，根本就看不出來是從哪來的；
· 增加耦合，大量的上傳派發，會讓耦合性大大增加，本來Vue用Component就是為了減少耦合，現在這么用，和組件化的初衷相背。
9.Vue中引入組件的步驟?
1）采用ES6的import ... from ...語法或CommonJS的require()方法引入組件
2）對組件進行注冊,代碼如下
1. // 注冊
2. Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
使用組件<my-component></my-component>
10.vue.cli中怎樣使用自定義的組件？
第一步：在components目錄新建你的組件文件（smithButton.vue），script一定要export default {
第二步：在需要用的頁面（組件）中導入：import smithButton from ‘../components/smithButton.vue’
第三步：注入到vue的子組件的components屬性上面,components:{smithButton}
第四步：在template視圖view中使用，<smith-button> </smith-button>
問題有：smithButton命名，使用的時候則smith-button。
11.vue的虛擬DOM
Virtual DOM算法，簡單總結下包括幾個步驟：
- 用JS對象描述出DOM樹的結構，然后在初始化構建中，用這個描述樹去構建真正的DOM，並實際展現到頁面中
- 當有數據狀態變更時，重新構建一個新的JS的DOM樹，通過新舊對比DOM數的變化diff，並記錄兩棵樹差異
- 把步驟2中對應的差異通過步驟1重新構建真正的DOM，並重新渲染到頁面中，這樣整個虛擬DOM的操作就完成了，視圖也就更新了
12.自定義指令（v-check、v-focus）的方法有哪些？它有哪些鈎子函數？還有哪些鈎子函數參數？
全局定義指令：在vue對象的directive方法里面有兩個參數，一個是指令名稱，另外一個是函數。
組件內定義指令：directives
鈎子函數：bind（綁定事件觸發）、inserted(節點插入的時候觸發)、update（組件內相關更新）
鈎子函數參數：el、binding
13.怎么定義vue-router的動態路由？怎么獲取傳過來的動態參數？
在router目錄下的index.js文件中，對path屬性加上/:id。 使用router對象的params.id
14.active-class是哪個組件的屬性？嵌套路由怎么定義？
vue-router模塊的router-link組件。
嵌套路由顧名思義就是路由的多層嵌套。 一級路由里面使用children數組配置子路由，就是嵌套路由。
15.為什么避免 v-if 和 v-for 用在一起？
當 Vue 處理指令時，v-for 比 v-if 具有更高的優先級，這意味着 v-if 將分別重復運行於每個 v-for 循環中。通過v-if 移動到容器元素，不會再重復遍歷列表中的每個值。
16.為什么使用key？
當有相同標簽名的元素切換時，需要通過 key 特性設置唯一的值來標記以讓 Vue 區分它們，否則 Vue 為了效率只會替換相同標簽內部的內容。
17.4種vue當中的指令和它的用法
v-if：判斷是否隱藏；v-for：數據循環；v-bind:class：綁定一個屬性；v-model：實現雙向綁定
18.怎么定義vue-router的動態路由以及如何獲取傳過來的動態參數？
在router目錄下的index.js文件中，對path屬性加上/:id。使用router對象的params.id。
19.<keep-alive></keep-alive>的作用是什么?
<keep-alive></keep-alive> 包裹動態組件時，會緩存不活動的組件實例，主要用於保留組件狀態或避免重新渲染。
20.v-show和v-if指令的共同點和不同點
v-show指令是通過修改元素的display的CSS屬性讓其顯示或者隱藏
v-if指令是直接銷毀和重建DOM達到讓元素顯示和隱藏的效果
21.vue中v-if與v-show的區別以及使用場景
v-if 是通過控制dom節點的存在與否來控制元素的顯隱；
v-show是通過設置DOM元素的display樣式，block為顯示，none為隱藏；
v-if 有更高的切換消耗；
v-show有更高的初始渲染消耗；
v-if切換局部編譯/卸載的過程中合適地銷毀和重建內部的事件監聽和子組件；
v-show只是簡單的基於css切換；
場景：如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好
· v-show指令是通過修改元素的display的CSS屬性讓其顯示或者隱藏
· v-if指令是直接銷毀和重建DOM達到讓元素顯示和隱藏的效果
22.vue常用的修飾符
事件修飾符
.stop：用來阻止單擊事件的冒泡
.self：表示當前事件發生在元素本身而不是子元素的時候進行觸發
.prevent：表示提交事件不再進行重新加載
.capture：表示事件傾聽，在事件發生的時候進行調用
表單修飾符（重點）：
.lazy - 取代 input 監聽 change 事件
.number - 輸入字符串轉為有效的數字
.trim - 輸入首尾空格過濾
按鍵修飾符：
.enter
.tab
.delete
鼠標按鍵修飾符
.left
.right
.middle
23.axios是什么？怎么使用？它實現的登錄流程？
登陸流程為：1、提交登陸表單，拿到后台返回的數據 2、將數據存入vuex
登錄狀態token,和用戶名user存在sessionStorage里，以便組件使用,如果token為true表示用戶已經登陸
axios是基於promise（諾言）用於瀏覽器和node.js是http客戶端。
axios的作用是什么呢：axios主要是用於向后台發起請求的，還有在請求中做更多是可控功能。
特點：支持瀏覽器和node.js
支持promise
能攔截請求和響應
能轉換請求和響應數據
能取消請求
自動轉換JSON數據
瀏覽器支持防止CSRF（跨站請求偽造）