VUE

vue.js的兩個核心是什麼？

數據驅動和組件化

請問 v-if 和 v-show 有什麼區別？

相同點： 兩者都是在判斷DOM節點是否要顯示

不同點：

a.實現方式： v-if是根據後面數據的真假值判斷直接從Dom樹上刪除或重建元素節點。  v-show只是在修改元素的css樣式，也就是display的屬性值，元素始終在Dom樹上。

b.編譯過程：v-if切換有一個局部編譯/卸載的過程，切換過程中合適地銷燬和重建內部的事件監聽和子組件；  v-show只是簡單的基於css切換；

c.編譯條件：v-if是惰性的，如果初始條件爲假，則什麼也不做；只有在條件第一次變爲真時纔開始局部編譯； v-show是在任何條件下（首次條件是否爲真）都被編譯，然後被緩存，而且DOM元素始終被保留；

d.性能消耗：v-if有更高的切換消耗，不適合做頻繁的切換；  v-show有更高的初始渲染消耗，適合做頻繁的額切換；

vue常用的修飾符

a、按鍵修飾符

.delete（捕獲“刪除”和”退格“鍵）:用法上和事件修飾符一樣，掛載在v-on:後面，語法：v-on:keyup.xxx=’yyy’  <input class = 'aaa' v-model="inputValue" @keyup.delete="onKey"/>

b、系統修飾符

可以用如下修飾符來實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器：

.ctrl、.alt、.shift、.meta

c、鼠標按鈕修飾符

.left、.right、.middle
這些修飾符會限制處理函數僅響應特定的鼠標按鈕。如：<button @click.middle ="onClick">A</button>，鼠標滾輪單擊觸發   Click默認是鼠標左鍵單擊

d、其他修飾符

.lazy
在默認情況下，v-model 在每次 input 事件觸發後將輸入框的值與數據進行同步 ，我們可以添加 lazy 修飾符，從而轉變爲使用 change事件進行同步：

<!-- 在“change”時而非“input”時更新 -->
<input v-model.lazy="msg" >

.number
如果想自動將用戶的輸入值轉爲數值類型，可以給 v-model 添加 .number修飾符：

<input v-model.number="age" type="number">

這通常很有用，因爲即使在type="number"時，HTML 輸入元素的值也總會返回字符串。如果這個值無法被 parseFloat()解析，則會返回原始的值。

.trim
如果要自動過濾用戶輸入的首尾空白字符，可以給 v-model 添加 trim 修飾符：

<input v-model.trim="msg">

vue中 key 值的作用

 使用key來給每個節點做一個唯一標識。

key的作用主要有以下兩個：

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

假設Vue實例的data屬性中有一個叫numbers的變量，它的值是[1, 2, 3, 7, 8, 9]：

<div v-for="num in numbers">
  {{num}}
</div>

這種情況下應當是渲染了6個<div>元素，其中的內容分別對應numbers中6個數字，此時如果numbers變成了[0, 1, 2, 3, 7, 8, 9]，即在數組頭部插入了一個數字0，在沒有key屬性的情況下，渲染輸出的更新步驟是這樣的：

原先內容爲1的<div>元素內容變成0，原先內容爲2的<div>元素內容變成1，……以此類推，最後新增一個<div>元素，內容爲9。

在這種情況下，Vue會通過改變原來元素的內容和增加/減少元素來完成這個改變，因爲沒有key屬性，Vue無法跟蹤每個節點，只能通過這樣的方法來完成變更。

讓我們對以上代碼進行一個小修改：

<div v-for="(num, index) in numbers" :key="index">
  {{num}}
</div>

我這裏用index變量，根據列表渲染的規則，它實際上對應了數組中每個元素的索引，這樣做的好處是它可以使得每個元素的key值都不同，這是很重要的，如果我們要利用key屬性的優點，必須保證同一父元素的所有子元素有不同的key屬性。

此時如果numbers從[1, 2, 3, 7, 8, 9]變成了[0, 1, 2, 3, 7, 8, 9]，渲染輸出的更新步驟就變化了：

新增一個<div>元素，它的內容爲0，並將它插入原先內容爲1的元素之前。

在有了key屬性之後，Vue會記住元素們的順序，並根據這個順序在適當的位置插入/刪除元素來完成更新，這種方法比沒有key屬性時的就地複用策略效率更高。

強制替換元素，觸發過渡效果：

key屬性還有另外一種使用方法，即強制替換元素，從而可以觸發組件的生命週期鉤子或者觸發過渡。因爲當key改變時，Vue認爲一個新的元素產生了，從而會新插入一個元素來替換掉原有的元素。

<transition>
  <span :key="text">{{text}}</span>
</transition>

這裏如果text發生改變，整個<span>元素會發生更新，因爲當text改變時，這個元素的key屬性就發生了改變，在渲染更新時，Vue會認爲這裏新產生了一個元素，而老的元素由於key不存在了，所以會被刪除，從而觸發了過渡。

假如沒有key屬性：

<transition>
  <span>{{text}}</span>
</transition>

那麼當text改變時，Vue會複用元素，只改變<span>元素的內容，而不會有新的元素被添加進來，也不會有舊的元素被刪除。

同理，key屬性被用在組件上時，當key改變時會引起新組件的創建和原有組件的刪除，此時組件的生命週期鉤子就會被觸發。

Vue 組件中 data 爲什麼必須是函數

當data選項是一個函數的時候，返回的是一個獨立的對象，這樣各個實例中的data不會相互影響。

vue生命週期鉤子函數有哪些？

總共分爲8個階段：

創建前/後

beforeCreated：vue實例的掛載元素$el和數據對象data都爲undefined，還未初始化。

created：vue實例的數據對象data有了，$el還沒有。

載入前/後

beforeMount：vue實例的$el和data都初始化了，但還是掛載之前爲虛擬的dom節點，data.message還未替換。

mounted：vue實例掛載完成，data.message成功渲染。

更新前/後

當data變化時，會觸發beforeUpdate和updated方法。

銷燬前/後

beforeDestroy和destroy

vue 的雙向綁定的原理是什麼

詳情請查看Vue原理剖析

vue事件中如何使用event對象

1、使用不帶圓括號的形式，event 對象將被自動當做實參傳入；

2、使用帶圓括號的形式，我們需要使用 $event 變量顯式傳入 event 對象。

//不帶圓括號，自動傳入enevt
<button v-on:click="click">click me</button>
methods: {
    click(event) {
        console.log(typeof event);    // object
    }
}
//帶圓括號，使用$event 變量顯式傳入 event 對象
<button v-on:click="click($event, 233)">click me</button>

click(event, val) {
    console.log(typeof event);    // object
}

vue中 keep-alive 組件的作用

<keep-alive>是Vue的內置組件，當使用它包裹動態組件時，會緩存不活動的組件實例，將組件狀態保留在內存中，防止重複渲染DOM，而不是銷燬它們。詳情請查看keep-alive詳解

vue更新數組或對象觸發視圖更新

使用Vue.set( target, propertyName/index, value )，或者vm.$set()，vm是vue實例：

參數：

• {Object | Array} target
• {string | number} propertyName/index
• {any} value

向響應式對象中添加一個屬性，並確保這個新屬性同樣是響應式的，且觸發視圖更新。它必須用於向響應式對象上添加新屬性，因爲 Vue 無法探測普通的新增屬性 (比如 this.myObject.newProperty = 'hi')，正確的方法是：Vue.set(this.myObject, 'newProperty ', 'hi');

對於數組，當修改數組的長度時，或者利用索引直接改變數組的一個元素時，不會觸發視圖更新，需要使用Vue.use()，或者使用數組的push、splice等方法。

解決非工程化項目初始化頁面閃動問題

vue頁面在加載的時候閃爍花括號{}}，v-cloak指令和css規則如[v-cloak]{display:none}一起用時，這個指令可以隱藏未編譯的Mustache標籤直到實例準備完畢。

/*css樣式*/
[v-cloak] {
   display: none;
}

v-model語法糖的組件中的使用

v-model 主要是用於表單上數據的雙向綁定和在組件上使用。

表單上的數據雙向綁定：

<input type="text" v-model="mes">  

此時mes值就與input的值進行雙向綁定， 實際上上面的代碼是下面代碼的語法糖。

<input  v-bind:value="mes"  v-on:input="mes= $event.target.value"/>

組件上的使用：

 

父組件

 <InputBox v-model="mes"></InputBox>

根據上面講的v-model語法糖，所以 InputBox那行代碼也可以寫成

<InputBox v-bind:value="value"   v-on:input="mes= $event.target.value"></InputBox>

子組件：

但是單選複選框不會觸發input事件，只會觸發change事件。所以在子組件我們需要自定義v-model。

vue等單頁面應用及其優缺點

單頁面應用（SPA），是指只有一個主頁面的應用，瀏覽器一開始要加載所有必須的 html, js, css。所有的頁面內容都包含在這個所謂的主頁面中，然後在交互的時候由路由程序動態載入，單頁面的頁面跳轉，僅刷新局部資源。多應用於pc端。

優點：

• 用戶體驗好，快，內容的改變不需要重新加載整個頁面，基於這一點spa對服務器壓力較小
• 前後端分離
• 頁面效果會比較炫酷（比如切換頁面內容時的專場動畫）

缺點：

• 不利於seo
• 導航不可用，如果一定要導航需要自行實現前進、後退。（由於是單頁面不能用瀏覽器的前進後退功能，所以需要自己建立堆棧管理）
• 初次加載時耗時多
• 頁面複雜度提高很多

vue添加自定義指令

使用Vue.directive(id, [definition])，id是指令的名稱，在使用時加上‘v-’，definition是一個對象，這個對象的屬性是directive的鉤子函數：

bind: 只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數可以定義一個在綁定時執行一次的初始化動作。

inserted: 被綁定元素插入父節點時調用（父節點存在即可調用，不必存在於 document 中）。

update: 被綁定元素所在的模板更新時調用，而不論綁定值是否變化。通過比較更新前後的綁定值，可以忽略不必要的模板更新

componentUpdated: 被綁定元素所在模板完成一次更新週期時調用。unbind: 只調用一次， 指令與元素解綁時調用。

大多數情況下，我們可能想在 bind 和 update 鉤子上做重複動作，並且不想關心其它的鉤子函數。此時可以簡寫成如下形式:

Vue.directive('test',function(el,binding){
    //el是event對象
    //binding是一個對象，可以訪問它的value屬性，來獲取傳給該指令的值
    console.log(binding.value);
})
//使用
<div v-test="{a:'aa',b:'bb'}"></div>