1.MVVM
model-view-viewModel，model是數據與業務邏輯，view是UI界面，viewModel是一個對象用於實現model與view的同步。
ViewModel 通過雙向數據綁定把 View 層和 Model 層連接了起來。

2.雙向數據綁定
vue.js 是采用數據劫持結合發布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變動時發布消息給訂閱者，觸發相應的監聽回調。

3.MVVM 與MVC
主要區別是controller控制器演變成了viewModel，不用手動將model數據更新到view，減少了大量dom操作，提升了頁面渲染性能。

4.生命周期
創建前/後：
　　在beforeCreate階段，vue實例的掛載元素el和數據對象data都為undefined，還未初始化。
　　在created階段，vue實例的數據對象data有了，el還沒有。
載入前/後：
　　在beforeMount階段，vue實例的$el和data都初始化了，但還是掛載之前為虛擬的dom節點，data.message還未替換。
　　在mounted階段，vue實例掛載完成，data.message成功渲染。
更新前/後：
　　當data變化時，會觸發beforeUpdate和updated方法。
銷毀前/後：
　　在執行destroy方法後，對data的改變不會再觸發周期函數，說明此時vue實例已經解除了事件監聽以及和dom的綁定，但是dom結構依然存在

5.父子組件通信
父組件在標簽上定義傳值，子組件通過props接受傳值；父組件在標簽上定義傳遞方法，子組件通過$emit調用父組件的方法並傳遞參數。

6.組件的定義使用
一般在components目錄創建自定義組件；在需要的頁面導入import from;在components屬性上面註入自定義組件；在template視圖view中使用；

7.關於路由
聲明式路由：<router-link :to="">
編程式路由：
　　router.push({ name: ‘user‘, params: { userId: 123 }});命名的路由
　　router.push({ path: ‘register‘, query: { plan: ‘private‘ }});帶查詢參數的路由，有path會忽視params

8.vue配合webpack 按需加載
不進行頁面按需加載引入方式：import home from ‘../../common/home.vue‘
進行頁面按需加載的引入方式：const home = r => require.ensure( [], () => r (require(‘../../common/home.vue‘)))

9.關於store
state：全局狀態；
getter：store的擴展，類似state的計算屬性
mapState/mapGetter輔助函數幫助我們生成計算屬性，一般結合擴展運算符...mapState()用於vue實例中的computed：
mutations:包含事件類型和回調函數：
state: {
　　count: 1
},
mutations: {
　　increment (state,n) {
　　　　// 變更狀態
　　　　state.count += n;
　　}
}
調用：store.commit(‘increment‘,10);
mutation 都是同步事務
actions: actions 提交的是 mutations，而不是直接變更狀態;actions可以包含異步操作；實際的購物車示例，涉及到調用異步 API 和分發多重 mutation
actions: {
　　checkout ({ commit, state }, products) {
　　　　// 把當前購物車的物品備份起來
　　　　const savedCartItems = [...state.cart.added]
　　　　// 發出結賬請求，然後樂觀地清空購物車
　　　　commit(types.CHECKOUT_REQUEST)
　　　　// 購物 API 接受一個成功回調和一個失敗回調
　　　　shop.buyProducts(
　　　　　　products,
　　　　　　// 成功操作
　　　　　　() => commit(types.CHECKOUT_SUCCESS),
　　　　　　// 失敗操作
　　　　　　() => commit(types.CHECKOUT_FAILURE, savedCartItems)
　　　　)
　　}
}
module:模塊兒

10.<keep-alive></keep-alive> 緩存不活動的組件實例，主要用於保留組件狀態或避免重新渲染。

11.v-el提供一個在頁面上已存在的 DOM 元素作為 Vue 實例的掛載目標.可以是 CSS 選擇器，也可以是一個 HTMLElement 實例

12.vue使用插件的步驟
一般在入口js文件main.js中vue實例化之前，采用import導入，或者采用require導入，然後vue.use()
例如：
import ElementUI from ‘element-ui‘
import VueAwesomeSwiper from ‘vue-awesome-swiper‘
Vue.use(ElementUI)
Vue.use(VueAwesomeSwiper)

13.vue中常用的生命周期鉤子函數
created:實例已經創建完成之後調用，實例已經完成數據觀測，屬性和方法的運算，watch/event事件回調。掛在階段沒有開始，$el屬性目前還不可見；
mounted:el被新創建的$el替換，並掛載到實例上去之後調用該鉤子，
activated: keep-alive 組件激活時調用

14.activeclass 是vue-router模塊的router-link組件的屬性。

15.怎麽定義vue-router的動態路由？如何獲取傳過來的動態參數？
在router目錄下的index.js文件中，對path屬性加上/:id；
使用router對象的params.id；this.$route.query或者this.$route.params

16.vue-router有哪幾種導航鉤子？
全局導航鉤子：
　　//定義一個路由
　　const router = new VueRouter({ ... })
　　// 點擊導航前調用
　　router.beforeEach((to, from, next) => {})
　　// 點擊導航後調用
　　router.afterEach(route => {})
單個路由獨享的鉤子：
　　const router = new VueRouter({
　　　　routes: [
　　　　　　{
　　　　　　　　path: ‘/foo‘,
　　　　　　　　component: Foo,
　　　　　　　　beforeEnter: (to, from, next) => {},
　　　　　　}
　　　　]
　　});
組件內的鉤子：
　　beforeRouteEnter (to, from, next) {},
　　beforeRouteUpdate (to, from, next) {},
　　beforeRouteLeave (to, from, next) {}
　　router.beforeEach(to,from,next)，作用：跳轉前進行判斷攔截。

17.什麽是vue生命周期
答： Vue 實例從創建到銷毀的過程，就是生命周期。也就是從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，我們稱這是 Vue 的生命周期。

18.vue生命周期的作用是什麽
答：它的生命周期中有多個事件鉤子，讓我們在控制整個Vue實例的過程時更容易形成好的邏輯。

19.vue生命周期總共有幾個階段
答：可以總共分為8個階段：創建前/後, 載入前/後,更新前/後,銷毀前/銷毀後

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

21.DOM 渲染在 哪個周期中就已經完成
答：DOM 渲染在 mounted 中就已經完成了。

22.簡單描述每個周期具體適合哪些場景
beforecreate : 可以在這加個loading事件，在加載實例時觸發
created : 初始化完成時的事件寫在這裏，如在這結束loading事件，異步請求也適宜在這裏調用
mounted : 掛載元素，獲取到DOM節點
updated : 如果對數據統一處理，在這裏寫上相應函數
beforeDestroy : 可以做一個確認停止事件的確認框
nextTick : 更新數據後立即操作dom
　　//改變數據
　　vm.message = ‘changed‘
　　//想要立即使用更新後的DOM。這樣不行，因為設置message後DOM還沒有更新
　　console.log(vm.$el.textContent) // 並不會得到‘changed‘
　　//這樣可以，nextTick裏面的代碼會在DOM更新後執行
　　Vue.nextTick(function(){
　　　　console.log(vm.$el.textContent) //可以得到‘changed‘
　　})

23.說出至少4種vue當中的指令和它的用法？
v-if：判斷是否隱藏；v-for：數據循環；v-bind:綁定一個屬性；v-model：實現雙向綁定

24.vue-loader是什麽？使用它的用途有哪些？
.vue文件的一個加載器，解析和轉換.vue文件，將其中的js css html提取並交由相應的解析器。
用途：js可以寫es6、style樣式可以scss或less、template可以加jade等

25.scss是什麽？在vue.cli中的安裝使用步驟是？有哪幾大特性？
答：css的預編譯。
使用步驟：
第一步：先裝css-loader、node-loader、sass-loader等加載器模塊
第二步：在build目錄找到webpack.base.config.js，在那個extends屬性中加一個拓展.scss
第三步：在同一個文件，配置一個module屬性
第四步：然後在組件的style標簽加上lang屬性 ，例如：lang=”scss”
特性:
可以用變量，例如（$變量名稱=值）；
可以用混合器，例如（）
可以嵌套

26.為什麽使用key？
避免某些標簽元素的復用；采用v-for渲染列表時，如果數據項的順序變了，如果不用key，vue就會復用已存在的元素，達不到想要的真實順序。

27.VNode是什麽？虛擬 DOM是什麽？
Vue在 頁面上渲染的節點，及其子節點稱為“虛擬節點 (Virtual Node)”，簡寫為“VNode”。“虛擬 DOM”是由 Vue 組件樹建立起來的整個 VNode 樹的稱呼。

28.$set
Vue 不能檢測到對象屬性的添加或刪除。Vue 不能檢測以下變動的數組：
1. 當你利用索引直接設置一個項時，例如： vm.item[index] = newValue
2. 當你修改數組的長度時，例如： vm.items.length = newLength
可以使用Vue.set(object, key, value) 和 this.$set(object, key, value)

29.插槽<slot>

30.axios是什麽？怎麽使用？描述使用它實現登錄功能的流程？
答：請求後臺資源的模塊。npm install axios -S裝好，然後發送的是跨域，需在配置文件中config/index.js進行設置。
後臺如果是Tp5則定義一個資源路由。js中使用import進來，然後.get或.post。返回在.then函數中如果成功，失敗則是在.catch函數中

31.axios+tp5進階中，調用axios.post(‘api/user’)是進行的什麽操作？axios.put(‘api/user/8′)呢？
答：跨域，添加用戶操作，更新操作。

32.自定義指令（v-check、v-focus）的方法有哪些？它有哪些鉤子函數？還有哪些鉤子函數參數？
答：
全局定義指令：在vue對象的directive方法裏面有兩個參數，一個是指令名稱，另外一個是函數。
組件內定義指令：directives
鉤子函數：bind（綁定事件觸發）、inserted(節點插入的時候觸發)、update（組件內相關更新）
鉤子函數參數：el、binding

33.Vue的雙向數據綁定原理是什麽？(vue data是怎麽實現的？)
答：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變更的雙向綁定效果。

34.聊聊你對Vue.js的template編譯的理解？
答：簡而言之，就是先轉化成AST樹，再得到的render函數返回VNode（Vue的虛擬DOM節點）
詳情步驟：
首先，通過compile編譯器把template編譯成AST語法樹（abstract syntax tree 即 源代碼的抽象語法結構的樹狀表現形式），
compile是createCompiler的返回值，createCompiler是用以創建編譯器的。另外compile還負責合並option。
然後，AST會經過generate（將AST語法樹轉化成render funtion字符串的過程）得到render函數，render的返回值是VNode，
VNode是Vue的虛擬DOM節點，裏面有（標簽名、子節點、文本等等）

自己總結的前端知識點（vue部分）