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

原理php

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

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

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

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

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

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

4.Vue.Observable你有了解過嗎?node

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

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

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

6.$nextTick的做用nginx

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

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

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

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

 

文件路徑laravel

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

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標籤自身的點擊事件不會觸發,而會觸發連接跳轉
相關文章
相關標籤/搜索