VUE 各類遇到的問題以及面試題

原理

1.你知道vue的模板語法用的是哪一個web模板引擎的嗎？說說你對這模板引擎的理解.

mustache，主要是使用{{}}進行數據渲染。

2.你知道v-model的原理嗎？那雙向綁定的原理呢？

v-model是一個語法糖，真正實現雙向綁定仍是依靠v-bind：綁定響應式數據。以及觸發input事件並傳遞數據（核心和重點） 雙向綁定的原理：經過Observer把數據劫持（Object.defineProperty()），加入到訂閱器（Dep）,訂閱器收集訂閱者（watch），視圖經過編譯（Compile） 解析指令（Directive）等一系列操做收集給訂閱者，最後經過觸發數據變化update通知全部的訂閱者完成數據驅動。 直白的理解爲：Object.defineProperty()從新定義了set和get方法，修改觸發set方法賦值。獲取觸發get方法取值，並經過數據劫持發佈信息。

3.你知道vue中key的原理嗎？說說你對它的理解

便於diff算法的更新，key的惟一性，能讓diff算法更快的找到須要更新的dom節點。

4.Vue.Observable你有了解過嗎？

vue2.6發佈的一個新的api，能夠處理簡單的跨組件共享數據狀態的問題。
精簡版的vuex。

5.你知道style加scoped屬性的用途和原理嗎？

1.用途：防止全局同名css污染。
2.原理：在標籤上添加v-data-something屬性，再在選擇器加上對應[v-data-something],即css帶屬性選擇器，以此完成相似做用域的選擇方式。

6.$nextTick的做用

// 官方文檔：下次DOM更新循環結束執行延遲迴調，在修改數據以後馬上調用這個方法，就會獲取更新後的DOM。

//何時用到Vue.$nextTick();

//1.created初始化狀態的時候沒有掛載dom元素，因此此時須要操做dom元素就必須使用$nextTick();
//2.mounted不會承諾全部的子組件也都一塊兒被掛載，若是你但願等到整個視圖都渲染完畢，能夠用$nextTick()替換mounted。

mounted:function(){
   this.$nextTick(()=>{
       
   })
}

 

文件路徑

1.怎麼解決vue打包後靜態資源圖片失效的問題？，那又怎麼解決動態設置img的src不生效呢？

1.找到config/index.js配置文件，找到build打包對象裏的assetsPublicPath屬性，將默認值：'/'，修改成：'./'。
2.由於動態添加的src被當作靜態資源處理了，沒有進行編譯，因此要加上require。
<img :src="require('@/assets/images/xxx.png')" />

2.分析下vue項目本地開發完後部署到服務器後報404是什麼緣由？

1.檢查nginx（服務器）配置，是否正確配置資源映射條件。
2.檢查vue.config.js中是否配置了pubilcPath屬性，檢查是否和項目資源文件在服務器擺放的位置同樣。

 3.在vue項目中如何配置favicon？

1.在html中添加mate標籤
2.在vue-cil中開發環境webpack.dev.config.js中配置，和生產環境webpack.prod.config.js中配置。

4.使用vue後怎麼針對搜索引擎作SEO優化？

使用服務端渲染，vue官方推薦nuxt.js

生命週期

1.Vue生命週期能夠分爲幾個階段？

8個階段
1.beforeCreate：建立前,（data和methods都沒初始化）
2.created：建立後，(data和methods已經初始化)
3.beforeMount：載入前,（在內存中已經編譯好了模板，可是尚未掛載到頁面上，dom尚未生成）
4.mounted：載入後,（Vue實例已經初始化完成了，此刻dom已經生成）
5.beforeUpdate：更新前,（此刻頁面的數據是舊的，data的數據是更新的了，也就是頁面尚未和最新的數據同步）
6.updated：更新後（頁面的數據已經和更新的數據同步了）,
7.beforeDestroy：銷燬前（此刻data，mothods，指令，過濾器都處於可用狀態）,
8.destroyed：銷燬後（此刻全部的data，mothods，指令等等，都處於不可用狀態）

2.Vue在created和mounted這兩個生命週期中請求的數據有什麼區別？

1.在created請求時，是在頁面渲染出來以前作的事情，若是數據過大，可能形成頁面白屏太久，由於created尚未dom元素生成。而且也不能操做dom元素
2.在mounted請求時，是在頁面渲染出來以後作的事情，此時能夠操做dom元素。

3.跟keep-alive有關的生命週期是哪些？描述下這些生命週期

1.activated： 頁面第一次進入的時候，鉤子觸發的順序是created->mounted->activated
2.deactivated: 頁面退出的時候會觸發deactivated，當再次前進或者後退的時候只觸發activated

4.第一次加載頁面時會觸發哪幾個鉤子？

1.beforeCreate
2.created
3.beforeMount
4.mounted

組件

1.如何經過子組件訪問父組件的實例

this.$parent :拿到父組件的實例
this.$children拿到子組件實例（數組）

2.如何訪問子組件的實例或者子元素

//父組件
<template>
    //給子組件綁定ref屬性
    <base-alert ref="baseAlert"></base-alert>
</template>
使用this.$refs.baseAlert獲取到子組件，而且能夠調用子組件this.$refs.baseAlert.add()方法。

3.vue怎麼實現強制刷新組件？

//強制刷新某組件
<SomeComponent :key='theKey'>
//選項裏綁定data
data(){ return{ theKey:0 } } //刷新key達到刷新組件的目的
theKey++;

4.vue自定義事件中父組件如何接收子組件的多個參數？

//子組件提交多個參數
var data = {
    'name':'1',
    'name2':'2'
}
this.$emit('func',data)

 

5.vue給組件綁定自定義事件無效怎麼解決？

1、組件外部加修飾符：.native
//父組件
<div>
     <my-children @click.native='onClick'></my-children>
</div>
二、組件內部添加$emit()方法提交事件

6.vue若是想擴展某個現有的組件時，該怎麼作？

1.使用slot插槽。
2.使用mixin混入。
3.使用vue.extends直接擴展。(優先級比mixin高)
4.使用HOC高階組件。

7.vue爲何要求組件模板只能有一個根元素？

就像一個HTML文檔只能有一個根元素同樣....
多個根元素必將致使沒法構成一顆樹
因此解釋了 <template></template>只有一個<div>根元素。

8.vue中什麼是遞歸組件？

//當前註冊一個vue組件定義 name 爲 'node-tree' ，在組件 template 內部調用 實現遞歸。
//tree.vue
<template>
        <template v-for="item in parentItem.list">
            <node-tree v-if="item.list&&item.list.length!==0" :parent-item="item" >
                <!--無限遞歸，-->
            </node-tree>
        </template>
</template>
<script>
    export default{
        name:'nodeTree',
    }
</script>

9.vue邊界狀況有哪些？

1.訪問元素&組件
   訪問根實例
   訪問父組件實例
   訪問子組件實例或子元素
   依賴注入
2.程序化的事件偵聽器
   $on(event,,,) ：偵聽一個事件
   $once(event,,,)：一次性偵聽一個事件
   $off(event,,,)：中止偵聽一個事件
3.循環引用
   3.1：遞歸組件
   3.2：組件之間的循環引用

10.vue組件中定時器要怎麼銷燬？

const time = setInterval(()=>{ //do.somthing
},500) //經過$once監聽定時器，在beforeDestroy鉤子能夠被清除。
this.$once('hook:beforeDestroy',()=>{ clearInterval(time) })

11.vue組件會在什麼狀況下被銷燬？

在組件中使用v-if的時候。

12.vue組件裏寫的原生addEventListeners監聽事件，能夠用手動銷燬嗎？爲何？

能夠用手動銷燬，由於一方面是綁定屢次，另外一方面是函數沒有釋放會形成內存溢出。

13.你瞭解函數式組件嗎？

須要提供一個render方法，接收一個參數（createElement函數）,方法內根據業務邏輯寫需求，createElement建立vnodes，最後return vnodes createElement函數接收三個參數，1：html標籤或自定義組件。2：一個object（包含props，on...等等），3:children（經過createElement構建，或者字符串）

 

問題知識點-HTML

1.Vue渲染模板時怎麼保留模板中的HTML註釋呢?

//模板標籤添加 comments 屬性
<template comments> ... </template>

2.如何修改分隔符"{{}}"?

//對於laravel+vue開發已經成爲常態(php)，laravel框架開發下咱們的分隔符"{{}}"是和vue+webapck+node是同樣的。因此咱們要修改咱們的分隔符。

var vm =new Vue({
     el:"app",
     delimiters:['${' , '}'], //修改定界符'{{}}';
    data(){}
})
//最後laravel框架下的分割符變成了${}

 3.slot（插槽）的理解有多少？

//插銷顯示與否：應根據父組件在引入子組件時，子組件中是否存在模板。

1.匿名插槽：在父組件中只能出現一個。 2.具名插槽：在父組件中能夠出現多個 3.做用於插槽：在插槽中要綁定數據， <slot name="up" :data="data"></slot> export default { data: function(){ return { data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba'] } },

 4.如何優化首頁的加載速度？

1.http請求控制次數。 2.異步加載數據，異步路由。 3.分屏加載，按需加載，延遲加載圖片，cdn靜態資源緩存。

 

問題知識點-CSS

 1.Vue的：class和;style有幾種表達方式？

:class 綁定變量，綁定對象，綁定一個數組，綁定三元運算符
:style 綁定變量，綁定對象，綁定函數返回值，綁定三元運算符

問題知識點-JS

1.Vue中怎麼重置data

1.Object.assign()方法：用於將全部可枚舉屬性的值從一個或多個源對象複製到目標對象。
2.this.$data：獲取當前狀態下的data。
3.this.$option.data：獲取該組件初始化狀態下的data。
4.Object.assign(this.$data,this.$option.data);

2.watch的屬性用箭頭函數定義結果會怎麼樣？

this爲undefined，由於箭頭函數綁定了父級做用域的山下文，因此this將不會按照指望指向vue實例。

3.在vue項目中若是methods的方法用箭頭函數定義結果會怎麼樣？

由於箭頭函數默認綁定了父級做用域的上下文，因此this將不會綁定vue實例，因此this是undefined。

4.你有使用過babel-polyfill模塊嗎？主要是用來作什麼的？ 

babel默認只進行轉換語法，而不轉換新的api。因此想要轉換新的api還須要對應的轉換插件。或者使用polyfill模擬新api。

5.說說你對vue的錯誤處理的瞭解？

vue錯誤處理有兩種，
1.errorCaptured：是組件內部鉤子，能夠捕獲到本組件以及子孫組件拋出的錯誤，接收參數有error，vm，info三個參數，return false後能夠阻止錯誤繼續向上拋出、
2.errorHandler：爲全局鉤子，使用vue.config.errorHandler配置，接收參數和errorCaptured一致，2.6後可捕獲v-on與promise鏈的錯誤，可用於統一錯誤處理與錯誤兜底。

6. 在vue事件中傳入$event，使用e.target和e.currentTarget有什麼區別？

e.target：屬於事件發生者（鼠標觸發的元素）
e.currentTarget：屬於事件綁定的元素。

7.vue變量名若是以_、$開頭的屬性會發生什麼問題？怎麼訪問到它們的值？

以_或者$開頭的屬性 不會被vue實例代理，由於它們可能會和vue內置屬性，api方法衝突，
咱們可使用vm.$data._property的方式訪問這些屬性。

8.vue使用v-for遍歷對象時，是按照什麼順序遍歷的？如何保證順序？

1.會先判斷對象是否存在iterator接口，若是有循環執行next()方法。
2.沒有iterator的狀況下，會調用Object.Keys()方法，在不一樣的瀏覽器中，js引擎不能保證輸出的順序是一致的。
3.若是想要保證輸出的順序一致，能夠將對象放進數組中，做爲數組的元素。

 9.說下$attrs和$listeners的使用場景

$attrs：獲取父級以上的全部（非props屬性）的屬性。
$listeners：調用在父級以上的全部定義的方法。

10.EventBus事件總線註冊在全局上時，路由切換的時候重複觸發事件，該如何解決呢？ 

1、EventBus的使用 //建立EventBus
import Vue from 'vue' export default new Vue; 2、在main.js導入eventbus，而後掛載在vue原型上 import bus from './utils/eventBus'; Vue.prototyle.bus = bus; 3、發送事件 //在觸發事件的地方發送事件
this.bus.$emit(this.$route.path);$emit()裏面接收一個string字符串事件名， 4、接收事件 //事件已經發送，接下來只須要在須要接收事件的地方接收這個事件，而後對事件進行響應就能夠了。
this.bus.$on(this.$route.path,()=>{ this.getData(); }) //接收事件一樣須要一個事件名。

5、事件重複觸發的問題 //咱們只須要在組件的beforeDestroy或者destroy生命週期中執行銷燬方法。
beforeDestroy(){ this.bus.$off(this.$route.path) } 六、若是使用this.$route.path做爲事件名，那麼雖然咱們在生命週期註銷了事件，可是仍是發現事件會執行屢次，緣由在於咱們在beforeDestroy中，this.$router.path根本不是咱們發送和響應事件時候的路由了，而是將要跳轉的頁面路由。因此只要咱們在當前頁面用一個變量將當前路由存下來。用這個變量做爲變量名註銷事件便可。

11.Vue組件中寫name選項有什麼做用？

1.使用keep-alive時，能夠搭配組件name進行緩存過濾 2.DOM作遞歸組件時須要調用自身name。 3.vue-devtools調式工具裏顯示的組件名稱是有vue中name決定的

12.Vue中的provide和inject是什麼？

provide：是一個對象，或者是返回對象的函數，裏面包含要給子孫後代的東西，也就是屬性和屬性值。（再也不須要逐級往上找值）
inject：是一個字符串數組，或者是一個對象，屬性值能夠是一個對象，包含from，和default默認值。

13.v-if和v-for同時出現的優先級問題？

//v-for的優先級比v-if高。因此同時出現的時候，先給v-for套一層template做爲父級元素，再在父級元素進行v-if判斷

<template v-if>
    <div v-for></div>
<template>

 

指令與修飾符

1.v-once的使用場景有哪些？

表單提交，可防止用戶在請求未響應時再次點擊屢次觸發。

2.vue修飾符.lazy的理解？

由input事件改變爲change事件。

 3.經常使用的指令

1.v-if 、2.v-for、3.v-on、4.v-bind、5.v-once 、
6.v-foucs、7.v-blur、8.v-model、 9.v-hide、10.v-show

4.v-cloak和v-pre指令的理解

1.v-cloak：是指在HTML渲染以前定義的一個指令屬性，一般用於解決網絡延遲頁面顯示Vue源碼的問題。 <div id='app' v-cloak> {{context}} </div>

//CSS
[v-cloak]{ display：none；//隱藏{{context}}源碼的顯示。
} 2.v-pre：跳過添加v-pre指令的元素以及它的全部子元素的編譯過程。 <span v-pre>{{msg}}</span>
//即便在data定義了msg，這裏仍然會在頁面顯示{{msg}}

 5.指令的鉤子有哪些？

1.bind：只調用一次，指令第一次綁定到元素時調用，在這裏能夠進行一次性初始化設置 2.inserted：被綁定元素插入父節點時調用（僅保證父節點的存在，但不必定已被插入文檔中） 3.update：所在組件的VNode更新時調用。可是可能發生在其子VNode更新以前。指令的值可能發生了變化。也可能沒有。 4.componentUpated：指令所在的組件的VNode及其子VNode所有更新後調用。 5.unbind：只調用一次，指令與元素解綁時調用

 6.prevent.self與self.prevent的前後順序問題

//prevent.self 阻止元素全部自身的點擊事件
<div @click="fun()">
    <a href="@/pages/home/homeIndex" @click.prevent.self="fun1()">
        <span v-on:click="fun2()">sapn標籤</span>
    </a>    
</div>

//點擊span標籤 會觸發fun2和fun函數 可是 a標籤全部的事件都不會觸發，包括連接跳轉

//self.prevent 阻止元素自身的點擊事件
<div @click="fun()">
    <a href="@/pages/home/homeIndex" @click.self.prevent="fun1()">
        <span v-on:click="fun2()">sapn標籤</span>
    </a>    
</div>

//點擊span標籤 會觸發fun2和fun函數 可是 a標籤自身的點擊事件不會觸發，而會觸發連接跳轉