前端vue面試題大全

1、對MVVM的理解

MVVM全稱是Model-View-ViewModel

Model 表明數據模型，數據和業務邏輯都在Model層中定義；泛指後端進行的各類業務邏輯處理和數據操控，對於前端來講就是後端提供的 api 接口。View 表明UI視圖，負責數據的展現；視圖層，也就是用戶界面。前端主要由 HTML 和 CSS 來構建 。ViewModel 負責監聽 Model 中數據的改變而且控制視圖的更新，處理用戶交互操做；

Vue是以數據爲驅動的，Vue自身將DOM和數據進行綁定，一旦建立綁定，DOM和數據將保持同步，每當數據發生變化，DOM會跟着變化。 ViewModel是Vue的核心，它是Vue的一個實例。Vue實例時做用域某個HTML元素上的這個HTML元素能夠是body，也能夠是某個id所指代的元素。

2、vue常見指令

1. v-textv-text 主要用來更新 textContent，能夠等同於 JS 的 text 屬性。

<span v-text="name"></span>
或
<span>插值表達式{{name}}</span>

2. v-html等同於 JS 的 innerHtml 屬性

<div v-html="content"></div>

3. v-cloak用來保持在元素上直到關聯實例結束時進行編譯 解決閃爍問題

<div id="app" v-cloak>
    <div>
        {{msg}}
    </div>
</div>
<script type="text/javascript">
    new Vue({
      el:'#app',
      data:{
        msg:'hello world'
      }
    })
</script>

正常在頁面加載時會閃爍，先顯示：

<div>
    {{msg}}
</div>

編譯後才顯示：

<div>
    hello world!
</div>

能夠用 v-cloak 指令解決插值表達式閃爍問題，v-cloak 在 css 中用屬性選擇器設置爲 display: none;

4. v-oncev-once 關聯的實例，只會渲染一次。以後的從新渲染，實例極其全部的子節點將被視爲靜態內容跳過，這能夠用於優化更新性能

<span v-once>This will never change:{{msg}}</span>  //單個元素
<div v-once>//有子元素
    <h1>comment</h1>
    <p>{{msg}}</p>
</div>
<my-component v-once:comment="msg"></my-component>  //組件
<ul>
    <li v-for="i in list">{{i}}</li>
</ul>

上面的例子中，msg,list 即便產生改變，也不會從新渲染。

5. v-ifv-if 能夠實現條件渲染，Vue 會根據表達式的值的真假條件來渲染元素

<a v-if="true">show</a>

6. v-elsev-else 是搭配 v-if 使用的，它必須緊跟在 v-if 或者 v-else-if 後面，不然不起做用

<a v-if="true">show</a>
<a v-else>hide</a>

7. v-else-ifv-else-if 充當 v-if 的 else-if 塊, 能夠鏈式的使用屢次。能夠更加方便的實現 switch 語句。

<div v-if="type==='A'">
    A
</div>
<div v-else-if="type==='B'">
    B
</div>
<div v-else-if="type==='C'">
    C
</div>
<div v-else>
    Not A,B,C
</div>

8. v-show也是用於根據條件展現元素。和 v-if 不一樣的是，若是 v-if 的值是 false，則這個元素被銷燬，不在 dom 中。可是 v-show 的元素會始終被渲染並保存在 dom 中，它只是簡單的切換 css 的 dispaly 屬性。

<span v-show="true">hello world</span >

注意：v-if 有更高的切換開銷 v-show 有更高的初始渲染開銷。所以，若是要很是頻繁的切換， 則使用 v-show 較好；若是在運行時條件不太可能改變，則 v-if 較好

9. v-for用 v-for 指令根據遍歷數組來進行渲染

<div v-for="(item,index) in items"></div>   //使用in，index是一個可選參數，表示當前項的索引

10. v-bindv-bind 用來動態的綁定一個或者多個特性。沒有參數時，能夠綁定到一個包含鍵值對的對象。經常使用於動態綁定 class 和 style。以及 href 等。簡寫爲一個冒號【 ：】

<div id="app">
    <div :class="{'is-active':isActive, 'text-danger':hasError}"></div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            isActive: true,  
            hasError: false    
        }
    })
</script>

編譯後

<div class = "is-active"></div>

11. v-model用於在表單上建立雙向數據綁定

<div id="app">
    <input v-model="name">
    <p>hello {{name}}</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            name:'小明'
        }
    })
</script>

model 修飾符有

.lazy（在 change 事件再同步） > v-model.lazy .number（自動將用戶的輸入值轉化爲數值類型） > v-model.number .trim（自動過濾用戶輸入的首尾空格） > v-model.trim

12. v-onv-on 主要用來監聽 dom 事件，以便執行一些代碼塊。表達式能夠是一個方法名。 簡寫爲：【 @ 】

<div id="app">
    <button @click="consoleLog"></button>
</div>
<script>
    var app = new Vue({
        el: '#app',
        methods:{
            consoleLog:function (event) {
                console.log(1)
            }
        }
    })
</script>

事件修飾符

.stop 阻止事件繼續傳播 .prevent 事件再也不重載頁面 .capture 使用事件捕獲模式,即元素自身觸發的事件先在此到處理，而後才交由內部元素進行處理 .self 只當在 event.target 是當前元素自身時觸發處理函數 .once 事件將只會觸發一次 .passive 告訴瀏覽器你不想阻止事件的默認行爲

三 、v-if 和 v-show 有什麼區別？

共同點：v-if 和 v-show 都能實現元素的顯示隱藏

區別：

1. v-show 只是簡單的控制元素的 display 屬性 而 v-if 纔是條件渲染（條件爲真，元素將會被渲染，條件爲假，元素會被銷燬） 2. v-show 有更高的首次渲染開銷，而 v-if 的首次渲染開銷要小的多 3. v-if 有更高的切換開銷，v-show 切換開銷小 4. v-if 有配套的 v-else-if 和 v-else，而 v-show 沒有 5. v-if 能夠搭配 template 使用，而 v-show 不行

4、如何讓CSS只在當前組件中起做用?

將組件樣式加上 scoped

<style scoped>
	...
</style>

5、 keep-alive的做用是什麼?

keep-alive包裹動態組件時，會緩存不活動的組件實例, 主要用於保留組件狀態或避免從新渲染。

6、在Vue中使用插件的步驟

一、採用ES6的 import … from … 語法 或 CommonJSd的 require() 方法引入插件 二、使用全局方法 Vue.use( plugin ) 使用插件,能夠傳入一個選項對象 Vue.use(MyPlugin, { someOption: true })

7、Vue 生命週期

8、Vue 組件間通訊有哪幾種方式

Vue 組件間通訊只要指如下 3 類通訊：父子組件通訊、隔代組件通訊、兄弟組件通訊

9、computed 和 watch 的區別和運用的場景

computed： 是計算屬性，依賴其它屬性值，而且 computed 的值有緩存，只有它依賴的屬性值發生改變，
下一次獲取 computed 的值時纔會從新計算 computed 的值

watch： 更多的是「觀察」的做用，相似於某些數據的監聽回調 ，每當監聽的數據變化時都會執行回調進行後續操做

運用場景：
	當咱們須要進行數值計算，而且依賴於其它數據時，應該使用 computed
	當咱們須要在數據變化時執行異步或開銷較大的操做時，應該使用 watch

10、vue-router 路由模式有幾種

1. Hash: 使用 URL 的 hash 值來做爲路由。支持全部瀏覽器。

2. History: 以來 HTML5 History API 和服務器配置。參考官網中 HTML5 History 模式

3. Abstract: 支持全部 javascript 運行模式。若是發現沒有瀏覽器的 API，路由會自動強制進入這個模式。

11、SPA 單頁面的理解，它的優缺點分別是什麼

SPA（ single-page application ）僅在 Web 頁面初始化時加載相應的 HTML、JavaScript 和 CSS 一旦頁面加載完成，SPA 不會由於用戶的操做而進行頁面的從新加載或跳轉 取而代之的是利用路由機制實現 HTML 內容的變換, UI 與用戶的交互，避免頁面的從新加載 優勢：

一、用戶體驗好、快，內容的改變不須要從新加載整個頁面，避免了沒必要要的跳轉和重複渲染 二、基於上面一點，SPA 相對對服務器壓力小 三、先後端職責分離，架構清晰，前端進行交互邏輯，後端負責數據處理

缺點：

一、初次加載耗時多：爲實現單頁 Web 應用功能及顯示效果， 須要在加載頁面的時候將 JavaScript、CSS 統一加載，部分頁面按需加載 二、前進後退路由管理：因爲單頁應用在一個頁面中顯示全部的內容， 因此不能使用瀏覽器的前進後退功能，全部的頁面切換須要本身創建堆棧管理 三、SEO 難度較大：因爲全部的內容都在一個頁面中動態替換顯示，因此在 SEO 上其有着自然的弱勢