前端面試題整理—Vue篇

 一、對vue的理解，有什麼特色，vue爲何不能兼容IE8及如下瀏覽器

　　vue是一套用於構建用戶界面的漸進式框架，核心是一個響應的數據綁定系統

　　vue是一款MVVM框架，基於雙向綁定數據，當數據發生變化時候，vue自身會進行一些運算

　　特色：簡潔輕量、數據驅動、組件化、模塊友好

　　vue.js使用了IE8沒法模擬的 ECMAScript 5 特性，沒有替代方案

 

二、簡述Vue雙向數據綁定的原理

　　主要是經過Object對象的defineProperty屬性，重寫data的set和get函數來實現的

　　vue是經過數據劫持的方式來作數據綁定，最核心的方法就是經過Object.defineProperty()來實現對屬性的劫持

　　在設置或者獲取的時候咱們就能夠在get或者set方法里加入其餘的觸發函數，達到監聽數據變更的目的

 

三、什麼是MVVM，和MVC的區別

　　MVVM是Model-View-ViewModel的縮寫

　　Model層表明數據模型

　　View表明組件視圖，負責將數據模型轉化成UI展示出來

　　ViewModel是一個同步 View 和 Model 的對象（雙向綁定）

　　在MVVM中，View和Model之間並無直接的聯繫，而是經過ViewModel進行交互，

　　Model和ViewModel之間的交互是雙向的，所以 經過視圖操做數據，也能經過數據操做視圖

　　MVC是Model-View- Controller的簡寫。即模型-視圖-控制器，使用MVC的目的是爲了將M和V相分離

　　MVVM與MVC最大的區別就是實現了View和Model的自動同步，也就是當Model的屬性改變時

　　咱們不用再手動操做Dom來改變View，而是改變後該屬性對應View層會自動改變

 

四、vue.js的兩個核心是什麼

　　數據驅動和組件化思想

 

五、vue與angular的區別

　　vue的雙向邦定是基於ES5中getter/setter來實現的，而angular是由本身實現一套模版編譯規則，須要進行所謂的「髒值」檢查，vue則不須要

　　vue須要提供一個el對象進行實例化，後續的全部做用範圍也是在el對象之下，而angular而是整個html頁面

 

六、說下vue的底層原理

　　Vue的模式是m-v-vm模式，即（model-view-modelView），經過modelView做爲中間層，進行雙向數據的綁定與變化

　　1）經過創建虛擬dom樹document.createDocumentFragment(),方法建立虛擬dom樹

　　2）一旦被監測的數據改變，會經過Object.defineProperty定義的數據攔截，截取到數據的變化

　　3）截取到的數據變化，從而經過訂閱——發佈者模式，觸發Watcher（觀察者）,從而改變虛擬dom的中的具體數據

　　4）最後經過更新虛擬dom的元素值，從而改變最後渲染dom樹的值，完成雙向綁定

 

七、簡述vue等單頁面應用及優缺點

　　單頁面應用，用戶全部的操做都在一個頁面完成

　　優勢：無刷新，用戶體驗好，共享資源只須要請求一次便可，採用組件化的思想，代碼結構更加規範化，便於修改和調整

　　缺點：對搜索引擎不友好、低版本不支持，第一次加載首頁耗時相對較長，不能使用瀏覽器導航按鈕，須要自行實現前進後退

 

八、React與Vue對比

　　相同點：

　　都支持服務器端渲染、數據驅動視圖，狀態管理

　　都有虛擬DOM、組件化開發、經過props參數進行父子組件數據的傳遞

　　不一樣點：

　　React嚴格上只針對MVC的C層,Vue則是MVVM模式

　　虛擬DOM方面

　　vue會跟蹤每個組件的依賴關係,不須要從新渲染整個組件樹，而React每當應用的狀態被改變時,所有組件都會從新渲染

　　視圖渲染方面

　　React採用JSX渲染到DOM，vue使用的是template模板

　　數據綁定方面

　　vue實現了數據的雙向綁定，react數據流動是單向的

　　state對象方面

　　react應用中不可變的,須要使用setState方法更新狀態

　　vue中,state對象不是必須的,數據由data屬性在vue對象中管理

 

九、前端組件化有什麼優點

　　1）提升開發效率

　　2）方便重複使用

　　3）便於協同開發

　　4）更容易管理維護

 

十、說一下vue的生命週期，當使用keep-alive屬性時，會增長哪兩個生命週期

　　建立前/後beforeCreate/created： 

　　在beforeCreated階段，vue實例的掛載元素el和數據對象data都爲undefined，還未初始化。在created階段，vue實例的數據對象data有了，el尚未

　　載入前/後beforeMount/mounted：

　　在beforeMount階段，vue實例的el和data都初始化了，但仍是掛載以前爲虛擬的dom節點，data還沒有替換。在mounted階段，vue實例掛載完成，data成功渲染。

　　更新前/後beforeUpdate/updated：

　　當data變化時，會觸發beforeUpdate和updated方法。不經常使用

　　銷燬前/後beforeDestory/destoryed：

　　beforeDestory是在vue實例銷燬前觸發，通常在這裏要經過removeEventListener解除手動綁定的事件

　　執行destroy方法後，vue實例已經解除了事件監聽以及dom的綁定，可是dom結構依然存在

 

　　在被keep-alive包含的組件/路由中，會多出兩個生命週期的鉤子:

　　activated 與 deactivated

 

十一、說說你對angular髒檢查理解　

　　angular中沒法判斷數據是否作了更改，因此設置了一些條件，當觸發這些條件以後就會執行一個檢測來遍歷全部的數據，對比剛纔更改的地方執行變化

　　這個檢查很不科學並且效率不高，有不少多餘的地方

 

十二、如何使css只在當前組件起做用

　　若是想寫的css只對當前組件起做用，則在style中寫入scoped

 

1三、vue中v-if和v-show的區別

　　v-if和v-show都是用來控制元素的渲染

　　v-if是根據後面數據的真假，來判斷DOM的添加刪除等操做

　　v-show只是在修改元素的css樣式（display屬性值）

　　v-if若是初始渲染條件爲真，就渲染，反之就不渲染

　　v-show無論初始條件是否爲真，都會被渲染

　　v-if有更高的切換消耗，不適合作頻繁的切換

　　 v-show有更高的初始渲染消耗，適合作頻繁的切換

 

 1四、vue有哪些修飾符

　　事件修飾符：stop、prevent、self、once

　　鍵盤修飾符：enter、space、up、down

　　表單修飾符修飾符：number、trim、lazy

 

1五、列舉vue的幾種經常使用指令　

　　v-if、v-show、v-for、v-on、v-bind、v-model、v-once

 

1六、v-on能夠綁定多個方法嗎？

　　能夠

<input v-on:keyup.enter="submit" v-on:focus="onFocus">

 

1七、vue中$mount與el區別

　　$mount和el二者在使用中沒有什麼區別，都是將實例化後的vue掛載到指定的DOM元素中
　　若是在實例化vue時指定el，則該vue將會渲染在el對應的DOM中
　　沒有指定el，則vue實例會處於一種「未掛載」的狀態，此時經過$mount來手動執行掛載

1八、vue事件修飾符怎麼使用，舉例說明

        <!-- 阻止單擊事件繼續傳播 -->
        <a v-on:click.stop="doThis"></a>
        <!-- 提交事件再也不重載頁面 -->
        <form v-on:submit.prevent="onSubmit"></form>
        <!-- 修飾符能夠串聯 -->
        <a v-on:click.stop.prevent="doThat"></a>
        <!-- 只有修飾符 -->
        <form v-on:submit.prevent></form>
        <!-- 點擊事件將只會觸發一次 -->
        <a v-on:click.once="doThis"></a>
        <!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
        <div v-on:click.self="doThat">...</div>    

 

1九、vue中key值和is的做用

　　使用key，vue會基於key的變化從新排列元素順序，而且移除key不存在的元素。能夠作優化處理

　　is能夠擴展原生html元素，也能夠綁定動態組件

 

20、組件中data爲何是函數

　　由於組件是用來複用的，JS 裏對象是引用關係，這樣做用域沒有隔離

　　而 new Vue 的實例，是不會被複用的，所以不存在引用對象的問題

 

2一、什麼是單向數據流動

　　這個概念出如今組件通訊。數據從父級流向子級，數據自己仍是父級的

　　若是操做子級要改變父級的數據，只能經過子級告知父級要操做哪一個數據

　　而後讓父級去修改本身的數據，修改完畢再傳給子級

 

2二、什麼是vue的計算屬性，有幾種用法

　　computed 計算屬性，能監聽vue中數據的變化，當數據發生變化時候會觸發

　　一、函數形式

       computed:{
            listenArr(){          
            //使用data中數據，自動幫你監聽數據的變化
            //返回的結果就是經過改變數據 作的另外一件事情         
            }
        }

　　二、對象形式

        computed:{
            listenArr:{
                get(){
                    //獲取時候
                },
                set(newVal){
                    //修改時候
                }
            }
        }
        //當使用get set時候，computed中定義的屬性爲一個對象
        //不使用get set時候，computed中定義的屬性能夠是一個函數
      

 

2三、說一下vue組件之間的傳遞

　　父級傳遞子級：

　　首先在子組件上加一個v-bind:自定義屬性,等於父級的數據，子組件經過props方法接收數據

　　子級傳遞父級：

　　在子組件上綁定一個自定義事件，而且傳入父級的「事件」處理函數

　　在子組件內部使用$emit監聽這個自定義事件，this.$emit('自定義事件名',參數)

 

2四、vue中computed和watch的區別

　　computed可以監聽vue數據上的變化，頁面上來就執行一次，每改變一次數據就又觸發，在操做數據的時候，會派生出另外一個事情

　　watch當指定數據發生變化時候觸發。一開始不會觸發，只有指定的數據發生變化就又觸發一次

　　watch能夠deep深度添加，computed不能夠

 

2五、對vue中nextTick的理解

　　vue中nextTick能夠拿到更新後的DOM元素

　　若是在mounted下不能準確拿到DOM元素，可使用nextTick

　　在Vue生命週期的created()鉤子函數進行的DOM操做必定要放在Vue.nextTick()的回調函數中

 

2六、自定義指令(v-check,v-focus) 方法有哪些? 它有哪些鉤子函數? 有哪些鉤子函數參數

　　全局定義指令：在vue對象的directive方法裏面有兩個參數,分別爲指令名稱、函數組件內定義指令：directives

　　鉤子函數: bind(綁定事件出發)、inserted(節點插入時候觸發)、update(組件內相關更新)

　　鉤子函數參數： el、binding

 

2七、如何優化SPA應用的首屏加載速度慢的問題

　　1）將公用的JS庫經過script標籤外部引入，讓瀏覽器並行下載資源文件，提升下載速度

　　2）在配置 路由時，頁面和組件使用懶加載方式引入，在調用組件時再加載對應的js文件

　　3）加一個首屏 loading 圖，提高用戶體驗

 

2八、請分別說出vue修飾符trim、number、lazy的做用

　　trim:用來過濾先後的空格

　　number:將用戶輸入的數據綁定爲number類型

　　lazy:使用了這個修飾符將會從「input事件」變成change事件進行同步

 

2九、vue-router 有哪幾種導航鉤子，它們有哪些參數

　　全局導航鉤子：to、from、next

　　組件內的鉤子：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

　　單個路由獨享的鉤子：beforeEnter

 

30、路由之間如何進行跳轉

　　聲明式（標籤跳轉） <router-link :to="xxx">

　　編程式（ js 跳轉） router.push('index')

 

3一、說一下懶加載（按需加載路由）

　　webpack 中提供了 require.ensure()來實現按需加載。之前引入路由是經過 import 這樣的方式引入，改成 const 定義的方式進行引入

　　不進行頁面按需加載引入方式

import  home   from '../common/home.vue'

　　進行頁面按需加載的引入方式：

const home = r => require.ensure( [], () => r (require('../common/home.vue')))

 

 3二、vue中$router和$route區別

　　router是VueRouter的一個對象，經過Vue.use(VueRouter)，和VueRouter構造函數獲得一個router的實例對象

　　route是一個跳轉的路由對象，每個路由都會有一個route對象

　　是一個局部的對象，能夠獲取對應的name,path,params,query等

 

3三、vue-loader是什麼？使用它的用途有哪些

　　vue文件的一個加載器，跟template/js/style轉換成js模塊

　　用途：js能夠寫es六、style樣式能夠scss或less、template能夠加jade等

 

3四、vue-router中query與params區別

　　 query和params二者都是在Vue路由中傳參

　　query用path來引入，params只能用name來傳遞，不能使用path 

　　query更像get請求（地址欄會顯示參數），而params更像post（不會在地址欄顯示參數）

 

3五、怎麼定義vue-router的動態路由？怎麼獲取傳過來的動態參數

　　在router目錄下的index.js文件中，對path屬性加上/:id

　　使用router對象的params.id

 

3六、嵌套路由怎麼定義

　　在 VueRouter 的參數中使用 children 配置，這樣就能夠很好的實現路由嵌套

　　children 裏面是子路由，固然子路由裏面還能夠繼續嵌套子路由

 

3七、active-class是哪一個組件的屬性？

　　vue-router模塊的router-link組件

 

3八、舉例vue經常使用的路由對象，以及做用

　　$route.name 當前路由的名稱

　　$route.path 當前路由對象的路徑

　　$route.meta 在路由裏面埋一個字段，當切換路由時候把信息傳過去

　　$route.query 查詢信息包含路由中查詢參數的鍵值對

　　$route.hash 當前路徑的哈希值，帶#

　　$route.params 預設的變量，切換時候經過parmas帶過去某個id的值

 

3九、請說出vue.cli項目中src目錄每一個文件夾和文件的用法

　　main.js是入口文件

　　app.vue是一個主組件

　　view放視圖頁面

　　components放組件

　　router是定義路由相關的配置

　　assets文件夾是放靜態資源

 

40、vue.cli中怎樣使用自定義的組件

　　第一步：在components目錄新建你的組件文件

　　第二步：在須要用的頁面（組件）中導入

　　第三步：注入到vue的子組件的components屬性上面

　　第四步：在template視圖view中使用

 

4一、什麼是vue生命週期，做用是什麼，第一次頁面加載會觸發哪幾個鉤子

　　vue實例從建立到銷燬的過程

　　也就是從開始建立、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，咱們稱這是 Vue 的生命週期

　　做用：生命週期中有多個事件鉤子，讓咱們在控制Vue實例的過程時更容易造成好的邏輯

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

 

4二、簡單描述每一個週期具體適合哪些場景

　　beforecreate : 能夠在這加個loading事件，在加載實例時觸發

　　created : 初始化完成時的操做，好比結束loading事件，也能夠操做異步請求

　　mounted : 掛載元素，獲取到DOM節點，推薦使用nextTick

　　updated : 若是對數據統一處理，在這裏寫上相應函數

　　beforeDestroy : 能夠作一個確認中止事件的確認框，關掉定時器

　　destroyed：當前組件已被刪除，清空相關內容

 

4三、說一下vue中slot插槽

　　插槽就是vue實現的一套內容分發的API，將插槽元素做爲承載分發內容的出口。

　　在組件模板中默認佔一個位置，當使用組件標籤時候，組件標籤的內容會自動替換掉內容

　　slot中能夠設置一些默認的內容，若是傳遞了內容則會替換掉，若是沒有名字的標籤會默認放到default中

 

4四、computed、watch各是一個對象時，它們有哪些選項？ computed 和 methods 有什麼區別？ computed 是否能依賴其它組件的數據？

　　computed有get set兩個選項

　　watch有handler deep 是否深度，immeditate 是否當即執行

　　methods是一個對象，能夠在對象中定義一個個方法，能接受參數，而computed不能

　　computed是能夠緩存的，methods不會

　　computed能夠依賴其餘computed，甚至是其餘組件的data

 

4五、如何理解Vue中的Render渲染函數

　　Vue通常使用template來建立HTML，而後有的時候，咱們須要使用javascript來建立html，這時候咱們須要使用render函數

　　render函數return一個createElement組件中的子元素存儲在組件實列中

　　createElement返回的是包含的信息會告訴VUE頁面上須要渲染什麼樣的節點。咱們稱這樣的節點爲虛擬DOM

 

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

　　vuex是vue框架中的狀態管理器

　　在main.js引入store，注入，新建了一個目錄store，export導出

　　適用場景：單頁應用中，組件之間的狀態。音樂播放、登陸狀態、加入購物車

 

4七、在Vue生命週期的created()鉤子函數進行的DOM操做必定要放在Vue.nextTick() 回調函數中。緣由是什麼呢

　　在 created() 鉤子函數執行的時候DOM其實並未進行任何渲染，而此時進行 DOM 操做無異於徒勞，

　　因此在數據變化後要執行的某個操做，而這個操做須要使用隨數據改變而改變的DOM結構的時候，這個操做都應該放進Vue.nextTick() 的回調函數中

 

4八、vuex中store的特性是什麼

　　vuex 就是一個倉庫，倉庫裏放了不少對象。

　　其中 state 就是數據源存放地，對應於通常 vue 對象裏面的 data

　　state 裏面存放的數據是響應式的，vue 組件從 store 讀取數據，如果 store 中的數據發生改變，依賴這相數據的組件也會發生改變

　　它經過 mapState 把全局的 state 和 getters 映射到當前組件的 computed 計算屬性

 

4九、vue中ajax請求代碼應該寫在組件的 methods 中仍是vuex的action中？

　　若是請求來的數據不是要被其餘組件公用，僅僅在請求的組件內使用，就不須要放入 vuex 的 state 裏

　　若是被其餘地方複用，請將請求放入 action 裏，方便複用，幷包裝成 promise 返回

 

50、說一下vuex的思想

　　Vuex 的思想是 當咱們在頁面上點擊一個按鈕，它會觸發(dispatch)一個action, action 隨後會執行(commit)一個mutation, mutation 當即會改變state,

　　 state 改變之後,咱們的頁面會state 獲取數據，頁面發生了變化。 Store 對象，包含了咱們談到的全部內容，action, state, mutation