Vue系列常用的知識點整理

一、對於MVVM和MVC的理解？

MVVM

MVVM 是 Model-View-ViewModel 的縮寫。
Model代表數據模型，也可以在Model中定義數據修改和操作的業務邏輯。
View 代表UI 組件，它負責將數據模型轉化成UI 展現出來。
ViewModel 監聽模型數據的改變和控制視圖行爲、處理用戶交互，簡單理解就是一個同步View 和 Model的對象，連接Model和View。
在MVVM架構下，View 和 Model 之間並沒有直接的聯繫，而是通過ViewModel進行交互，Model 和 ViewModel 之間的交互是雙向的，因此View 數據的變化會同步到Model中，而Model 數據的變化也會立即反應到View 上。
ViewModel 通過雙向數據綁定把 View 層和 Model 層連接了起來，而View 和 Model 之間的同步工作完全是自動的，無需人爲干涉，因此開發者只需關注業務邏輯，不需要手動操作DOM, 不需要關注數據狀態的同步問題，複雜的數據狀態維護完全由 MVVM 來統一管理。

MVC

MVC是Model-View- Controller的簡寫。即模型-視圖-控制器。
M和V指的意思和MVVM中的M和V意思一樣。
C即Controller指的是頁面業務邏輯。使用MVC的目的就是將M和V的代碼分離。‘MVC是單向通信。也就是View跟Model，必須通過Controller來承上啓下。MVC和MVVM的區別並不是VM完全取代了C，ViewModel存在目的在於抽離Controller中展示的業務邏輯，而不是替代Controller，其它視圖操作業務等還是應該放在Controller中實現。也就是說MVVM實現的是業務邏輯組件的重用。由於mvc出現的時間比較早，前端並不那麼成熟，很多業務邏輯也是在後端實現，所以前端並沒有真正意義上的MVC模式。而我們今天再次提起MVC，是因爲大前端的來到，出現了MVVM模式的框架。

二、Vue的生命週期

beforeCreate（創建前）在數據觀測和初始化事件還未開始
created（創建後）完成數據觀測，屬性和方法的運算，初始化事件，el屬性還沒有顯示出來
beforeMount（載入前）在掛載開始之前被調用，相關的render函數首次被調用。實例已完成以下的配置：編譯模板，把data裏面的數據和模板生成html。注意此時還沒有掛載html到頁面上。
mounted（載入後）在el 被新創建的 vm.$el 替換，並掛載到實例上去之後調用。實例已完成以下的配置：用上面編譯好的html內容替換el屬性指向的DOM對象。完成模板中的html渲染到html頁面中。此過程中進行ajax交互。
beforeUpdate（更新前）在數據更新之前調用，發生在虛擬DOM重新渲染和打補丁之前。可以在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程。
updated（更新後）在由於數據更改導致的虛擬DOM重新渲染和打補丁之後調用。調用時，組件DOM已經更新，所以可以執行依賴於DOM的操作。然而在大多數情況下，應該避免在此期間更改狀態，因爲這可能會導致更新無限循環。該鉤子在服務器端渲染期間不被調用。
beforeDestroy（銷燬前）在實例銷燬之前調用。實例仍然完全可用。
destroyed（銷燬後）在實例銷燬之後調用。調用後，所有的事件監聽器會被移除，所有的子實例也會被銷燬。該鉤子在服務器端渲染期間不被調用。

1.什麼是vue生命週期？
Vue 實例從創建到銷燬的過程，就是生命週期。從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、銷燬等一系列過程，稱之爲 Vue 的生命週期。

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

3.vue生命週期總共有幾個階段？
它可以總共分爲8個階段：創建前/後, 載入前/後,更新前/後,銷燬前/銷燬後。

4.第一次頁面加載會觸發哪幾個鉤子？
會觸發下面這幾個beforeCreate, created, beforeMount, mounted 。

5.DOM 渲染在哪個週期中就已經完成？
DOM 渲染在 mounted 中就已經完成了。

三、 Vue實現數據雙向綁定的原理

Object.defineProperty（）

vue實現數據雙向綁定主要是：採用數據劫持結合發佈者-訂閱者模式的方式，通過Object.defineProperty來劫持各個屬性的setter，getter，在數據變動時發佈消息給訂閱者，觸發相應監聽回調。當把一個普通 Javascript 對象傳給 Vue 實例來作爲它的 data 選項時，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉爲 getter/setter。用戶看不到 getter/setter，但是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。

vue的數據雙向綁定將MVVM作爲數據綁定的入口，整合Observer，Compile和Watcher三者，通過Observer來監聽自己的model的數據變化，通過Compile來解析編譯模板指令（vue中是用來解析 {{}}），最終利用watcher搭起observer和Compile之間的通信橋樑，達到數據變化 —>視圖更新；視圖交互變化（input）—>數據model變更雙向綁定效果。

四、Vue組件間的參數傳遞

1.父組件與子組件傳值

父組件傳給子組件：子組件通過props方法接受數據;
子組件傳給父組件：$emit方法傳遞參數

示例

//父組件自定義屬性 :showDate 
<index-header :showDate="showDate"></index-header>
//子組件顯示聲明需要的數據showDate 
export default {  
  props: ['showDate']  
}

示例

//子組件分發事件$emit('test')
<button @click='test'>click</button>
<p>{{showDate}}</p>
export default {  
  props: ['showDate']  ,
  methods:{
   test:function(){
    this.$emit("test")
  }
  }
}

2.非父子組件間的數據傳遞，兄弟組件傳值

1).eventBus(主要是現實途徑是在要相互通信的兄弟組件之中，都引入一個新的vue實例，然後通過分別調用這個實例的事件觸發和監聽來實現通信和參數傳遞。)
2).當組件比較複雜需要傳遞的數據比較多的時候可以使用vuex來管理。

五、VUE常用的指令和用法

數據渲染 v-text、v-html、v-model、{{}}

1、v-text

v-text是用於操作純文本，它會替代顯示對應的數據對象上的值。當綁定的數據對象上的值發生改變，插值處的內容也會隨之更新。注意：此處爲單向綁定，數據對象上的值改變，插值會發生變化；但是當插值發生變化並不會影響數據對象的值。其中：v-text可以簡寫爲{{}},並且支持邏輯運算。例如：

<div id="app">  
  {{ message }}  
</div>  
var app = new Vue({  
   el : '#app',  
   data : {  
    message : 'hello world'      
 }  
})

注：vue中有個指令叫做 v-once 可以通過v-once與v-text結合，實現僅執行一次性的插值

2、v-html

v-html用於輸出html，它與v-text區別在於v-text輸出的是純文本，瀏覽器不會對其再進行html解析，但v-html會將其當html標籤解析後輸出。

<div id="app">  
    <p v-html="html"></p>  
</div>  
var app = new Vue({  
        el: "#app",  
        data: {  
            html: "<b style='color:red'>v-html</b>"  
        }  
    });

3、v-model

v-model通常用於表單組件的綁定，例如input，select等。它與v-text的區別在於它實現的表單組件的雙向綁定，如果用於表單控件以外標籤是沒有用的。

<div id="app">  
  <input v-model="message " />  
</div>  
var app = new Vue({  
   el : '#app',  
   data : {  
    message : 'hello world'      
 }  
})

4、{{}}

{{}}是v-text的簡寫形式

控制模塊的顯示/隱藏 v-if、v-show

v-if 是“真正的”條件渲染，因爲它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷燬和重建。
v-show 就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。
一般來說**， v-if** 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。
因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件不太可能改變，則使用 v-if 較好。

<template>
    <div id="app">
        <div v-if="isIf">
            if
        </div>
        <div v-show="ifShow">
            show
        </div>
        <button @click="toggleShow">toggle</button>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data() {
            return {
                isIf : true,
                ifShow : true,
                loginType : "username"
            }
        },
        methods: {
            toggleShow : function(){
                this.ifShow = this.ifShow ? false : true;
                this.isIf = this.isIf ? false : true;
            }
        }
    }
</script>

v-for是一個循環指令，一般跟數組結合起來使用，例如：

<p id="wantuizhijia">
 <ol>
  <li v-for="site in sites">
   {{ site.name }}
  </li>
 </ol>
</p>
 
<script>
 new Vue({
  el: '#wantuizhijia',
  data: {
   sites: [
    { name: '蘇寧' },
    { name: '天貓' },
    { name: '淘寶' }
     { name: '京東' }
   ]
  }
 })
</script>

事件綁定 v-on

1、用於監聽DOM事件，典型的就是v-on:click**，處理的方法放在methods屬性裏會默認傳一個參數。**

<button @click="test">點擊</button>  
  
methods: {  
    test: function (evt) {  
        console.log(evt);  
    }  
}

這裏的evt，是標準的鼠標點擊事件，類似jquery的click事件的回調函數中的參數。
可以通過this來找到data屬性裏的值，例如：

data: {  
    items: "test"  
},  
methods: {  
    test: function (evt) {  
        console.log(this.items);  
        console.log(evt);  
    }  
}

這裏的this.items，就是data的items這個變量。

2、內聯語句處理器

給v-on事件傳一個固定參數

<button @click="test('a')">點擊搜索age</button>

當這個時候，函數的第一個參數就不是鼠標點擊事件了，而是字符串a

test: function (mes) {  
    console.log(mes);  
}

mes的值是’a’
$event 如果需要給他一個像上面一樣的鼠標點擊事件時，則使用$ event作爲參數（他和不傳參數時的默認鼠標事件對象是相同的）。
使用Vue實例的變量，如果需要傳一個data屬性裏的值，則直接放屬性名
例如：

<div id="app">  
    <a href="http://www.baidu.com" @click="test(items, $event)">點擊搜索age</a>  
</div>  
<script>  
    var test = {name: "test"};  
    var vm = new Vue({  
        el: '#app',  
        data: {  
            items: "test"  
        },  
        methods: {  
            test: function (msg, evt) {  
                console.log(msg);  
                evt.preventDefault();//阻止默認動作，比如這裏是頁面跳轉  
            }  
        }  
    })  
</script>

輸出：test和BUTTON

六、vuex是什麼？怎麼使用？哪種功能場景使用它？

只用來讀取的狀態集中放在store中；改變狀態的方式是提交mutations，這是個同步的事物；異步邏輯應該封裝在action中。
在main.js引入store，注入。新建了一個目錄store，…… export 。
場景有：單頁應用中，組件之間的狀態、音樂播放、登錄狀態、加入購物車

vuex 主要有state getter mutions actions。一般actions裏做異步請求 mution做同步

state
Vuex 使用單一狀態樹,即每個應用將僅僅包含一個store 實例，但單一狀態樹和模塊化並不衝突。存放的數據狀態，不可以直接修改裏面的數據。

mutations
mutations定義的方法動態修改Vuex 的 store 中的狀態或數據。

getters
類似vue的計算屬性，主要用來過濾一些數據。

action
actions可以理解爲通過將mutations裏面處裏數據的方法變成可異步的處理數據的方法，簡單的說就是異步操作數據。view 層通過 store.dispath 來分發 action。

const store = new Vuex.Store({ //store實例
      state: {
         count: 0
             },
      mutations: {                
         increment (state) {
          state.count++
         }
          },
      actions: { 
         increment (context) {
          context.commit('increment')
   }
 }
})

modules
項目特別複雜的時候，可以讓每一個模塊擁有自己的state、mutation、action、getters,使得結構非常清晰，方便管理。

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
 }
const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
 }

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
})

十二、一句話就能回答的面試題

1.css只在當前組件起作用
答：在style標籤中寫入scoped即可例如：

2.v-if 和 v-show 區別
答：v-if按照條件是否渲染，v-show是display的block或none；

3. $route和$ router的區別
答： $route是“路由信息對象”，包括path，params，hash，query，fullPath，matched，name等路由信息參數。而$ router是“路由實例”對象包括了路由的跳轉方法，鉤子函數等。

4.vue.js的兩個核心是什麼？
答：數據驅動、組件系統

5.vue幾種常用的指令
答：v-for 、 v-if 、v-bind、v-on、v-show、v-else

6.vue常用的修飾符？
答：.prevent: 提交事件不再重載頁面；.stop: 阻止單擊事件冒泡；.self: 當事件發生在該元素本身而不是子元素的時候會觸發；.capture: 事件偵聽，事件發生的時候會調用

7.v-on 可以綁定多個方法嗎？
答：可以

8.vue中 key 值的作用？
答：當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用“就地複用”策略。如果數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序，而是簡單複用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素。key的作用主要是爲了高效的更新虛擬DOM。

9.什麼是vue的計算屬性？
答：在模板中放入太多的邏輯會讓模板過重且難以維護，在需要對數據進行復雜處理，且可能多次使用的情況下，儘量採取計算屬性的方式。好處：①使得數據處理結構清晰；②依賴於數據，數據更新，處理結果自動更新；③計算屬性內部this指向vm實例；④在template調用時，直接寫計算屬性名即可；⑤常用的是getter方法，獲取數據，也可以使用set方法改變數據；⑥相較於methods，不管依賴的數據變不變，methods都會重新計算，但是依賴數據不變的時候computed從緩存中獲取，不會重新計算。

10.vue等單頁面應用及其優缺點
答：優點：Vue 的目標是通過儘可能簡單的 API 實現響應的數據綁定和組合的視圖組件，核心是一個響應的數據綁定系統。MVVM、數據驅動、組件化、輕量、簡潔、高效、快速、模塊友好。
缺點：不支持低版本的瀏覽器，最低只支持到IE9；不利於SEO的優化（如果要支持SEO，建議通過服務端來進行渲染組件）；第一次加載首頁耗時相對長一些；不可以使用瀏覽器的導航按鈕需要自行實現前進、後退。

11.怎麼定義 vue-router 的動態路由? 怎麼獲取傳過來的值
答：在 router 目錄下的 index.js 文件中，對 path 屬性加上 /:id，使用 router 對象的 params.id 獲取。

往後將整理更多的vue知識分享給大家