【面試】924- 35 道 Vue 面試題，真香
1.h5底部輸入框被鍵盤遮擋問題
如果你遇到h5頁(yè)面這個(gè)問題，當(dāng)輸入框在最底部，點(diǎn)擊軟鍵盤后輸入框會(huì)被遮擋，可以如下解決問題：
var getHeight = $(document).height();
$(window).resize(function(){
if($(document).height() < getHeight) {
$('#footer').css('position','static');
}else {
$('#footer').css('position','absolute');
}
});
2.觸屏即播放
$('html').one('touchstart',function(){
audio.play()
})
3.阻止旋轉(zhuǎn)屏幕時(shí)自動(dòng)調(diào)整字體大小
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
4.主流網(wǎng)站布局
頁(yè)面分為3個(gè)部分：頁(yè)面的頂部header，底部footer，中間部分（側(cè)欄side和主要部分main）。
下面代碼展示：
<body>
// 頁(yè)面層容器
<div id="container">
// 頁(yè)面頭部
<div id="header"></div>
// 頁(yè)面主體
<div id="main">>
// 側(cè)邊欄
<div id="side">
</div>
</div>
// 頁(yè)面底部
<div id="footer"></div>
</div>
</body>
設(shè)計(jì)頁(yè)面樣式代碼如下：
<style type="text/css">
body{
font: 12px 微軟雅黑;
margin: 0px;
text-align: center;
background: #fff;
}
// 頁(yè)面層容器
#container {
width: 100%;
}
#header {
width: 800px;
margin: 0 auto;
height: 100px;
background: #FFCC99;
}
#main {
width: 800px;
margin: 0 auto;
height: 400px;
}
#side {
float: left;
width: 20em;
background: red;
padding: 15px 0;
}
#foot {
width: 800px;
margin: 0 auto;
height: 50px;
background: #00ffff;
}
</style>
效果圖如下：
5.什么是MVVM框架？
MVVM框架是一個(gè)Model-View-ViewModel框架，其中ViewModel連接模型Model和視圖View。
在vue.js中的MVVM模式：
vue.js是通過數(shù)據(jù)驅(qū)動(dòng)的，vue.js實(shí)例化對(duì)象將dom和數(shù)據(jù)進(jìn)行綁定，一旦綁定，dom和數(shù)據(jù)將保持同步，每當(dāng)數(shù)據(jù)發(fā)生變化，dom也會(huì)隨著變化；ViewModel是Vue.js的核心，它是Vue.js的一個(gè)實(shí)例。Vue.js會(huì)針對(duì)某個(gè)HTML元素進(jìn)行實(shí)例化，這個(gè)HTML元素可以是body，也可以是某個(gè)css選擇器所指代的元素。DOM Listeners和Data Bindings是實(shí)現(xiàn)雙向綁定的關(guān)鍵。DOM Listeners監(jiān)聽頁(yè)面所有View層中的DOM元素，當(dāng)發(fā)生變化時(shí)，Model層的數(shù)據(jù)隨之變化。Data Bindings會(huì)監(jiān)聽Model層的數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，View層的DOM元素也隨之變化。
6.active-class是哪個(gè)組件的屬性
它是vue-router模塊的router-link組件的屬性
7.如何定義vue-router的動(dòng)態(tài)路由
在靜態(tài)路由名稱前面添加冒號(hào)，如設(shè)置id動(dòng)態(tài)路由參數(shù)，為路由對(duì)象的path屬性設(shè)置/:id
8.如何獲取傳過來的動(dòng)態(tài)參數(shù)
在組件中，使用$router對(duì)象的params.id，如$route.params.id
9.vue-router有哪幾種導(dǎo)航的鉤子
有三種，第一種是全局導(dǎo)航鉤子，router.beforeEach(to,from,next)，作用是跳轉(zhuǎn)前進(jìn)行判斷攔截；第二種是組件內(nèi)的鉤子；第三種是單獨(dú)路由獨(dú)享組件。
導(dǎo)航鉤子又叫導(dǎo)航守衛(wèi)，又分為全局鉤子，單個(gè)路由獨(dú)享鉤子和組件級(jí)鉤子。
全局鉤子有beforeEach,beforeResolve,afterEach，單個(gè)路由獨(dú)享鉤子有：beforeEnter
組件級(jí)鉤子有：beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave：它們有以下參數(shù)：
to表示即將要進(jìn)入的目標(biāo)路由對(duì)象；from表示當(dāng)前導(dǎo)航正要離開的路由；next表示一定要用這個(gè)函數(shù)才能到達(dá)下一個(gè)路由，如果不用就會(huì)遭到攔截。
10.mint-ui是什么
mint-ui它是基于Vue.js的前端組件庫(kù)，用npm安裝，然后通過import導(dǎo)入樣式和JavaScript代碼，vue.use(mintUi)用于實(shí)現(xiàn)全局引入，import {Toast} from 'mint-ui'用能于在單個(gè)組件局部引入
11.v-model是什么
v-model是vue.js的一條指令，實(shí)現(xiàn)數(shù)據(jù)的雙向綁定
雙向數(shù)據(jù)綁定的原理：
vue.js使用es5提供的屬性特性功能，結(jié)合發(fā)布者-訂閱者模式，通過Object.defineProperty()為各個(gè)屬性定義get,set特性方法，在數(shù)據(jù)發(fā)送改變時(shí)給訂閱者發(fā)布消息，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。
過程：a，對(duì)需要觀察的數(shù)據(jù)對(duì)象進(jìn)行遞歸遍歷，包含子屬性對(duì)象的屬性，設(shè)置
set和get特性方法；當(dāng)給這個(gè)對(duì)象的某個(gè)值賦值時(shí)，會(huì)觸發(fā)綁定的set特性方法，就能起到監(jiān)聽數(shù)據(jù)的變化。b，用compile解析模板指令，將模板中的變量替換成數(shù)據(jù)，然后初始化渲染頁(yè)面視圖，并將每個(gè)指令對(duì)應(yīng)的節(jié)點(diǎn)綁定更新函數(shù)，添加監(jiān)聽數(shù)據(jù)的訂閱者，一旦數(shù)據(jù)有變動(dòng)，就會(huì)收到通知，并更新視圖。c，Watcher訂閱者是Observer和Compile之間通信的橋梁：在自身實(shí)例化時(shí)向?qū)傩杂嗛喥?code style="margin-right: 2px;margin-left: 2px;padding: 2px 4px;max-width: 100%;font-size: 14px;border-radius: 4px;color: rgb(30, 107, 184);background-color: rgba(27, 31, 35, 0.05);font-family: 'Operator Mono', Consolas, Monaco, Menlo, monospace;word-break: break-all;box-sizing: border-box !important;overflow-wrap: break-word !important;">dep里面添加自己；自身必須有一個(gè)update()方法；在dep.notice()發(fā)布通知時(shí)，能調(diào)用自身的update()方法，并觸發(fā)Compile中綁定的回調(diào)函數(shù)。d，MVVM是數(shù)據(jù)綁定的入口，整合了Observer，Compile和Wathcher三者，通過Observer來監(jiān)聽自己的model數(shù)據(jù)變化，通過Compile來解析編譯模板指令，最終利用Watcher來搭起Observer和Compile之間的通信橋梁，達(dá)到數(shù)據(jù)變化通知視圖更新的效果，利用視圖交互，變化更新數(shù)據(jù)model變更的雙向綁定效果。
12.vue.js中標(biāo)簽如何綁定事件
第一種方式，使用v-on；第二種方式，使用@語法糖
13.vuex是什么
vuex是vue.js框架實(shí)現(xiàn)的狀態(tài)管理系統(tǒng)。使用vuex，要引入store，并注入vue.js組件中，在組件內(nèi)部可以通過$store訪問store對(duì)象；使用場(chǎng)景，在單頁(yè)應(yīng)用中，用于組件之間的通信，如音樂播放，登錄狀態(tài)管理，加入購(gòu)物車等
vuex可以說是一種開發(fā)模式或框架，它是對(duì)vue.js框架數(shù)據(jù)層面的擴(kuò)展，通過狀態(tài)集中管理驅(qū)動(dòng)組件的變化，應(yīng)用的狀態(tài)集中放在store中，改變狀態(tài)的方式是提交mutations，這是個(gè)同步的事務(wù)，異步的邏輯應(yīng)該封裝在action中。
14.在vue中說說你知道的自定義指令
自定義指令兩種：一種全局自定義指令，vue.js對(duì)象提供了directive方法，可以用來自定義指令，directive方法接收兩個(gè)參數(shù)，一個(gè)是指令名稱，另一個(gè)是函數(shù)；第二種是局部自定義指令，通過組件的directives屬性定義。
15.vue.js中常用的4種指令
v-if判斷對(duì)象是否隱藏；v-for循環(huán)渲染；v-bind綁定一個(gè)屬性；v-model實(shí)現(xiàn)數(shù)據(jù)雙向綁定
在v-if循環(huán)中實(shí)現(xiàn)v-model數(shù)據(jù)的雙向綁定：
有時(shí)需要?jiǎng)?chuàng)建
input，并用v-model實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。此時(shí)可以為v-model綁定數(shù)組的一個(gè)成語selected[$index]，這樣可以給不同的input綁定不同的v-model:
<div v-for="(item,index) in arrDa">
<input type="text" v-model="arrData[index]">
<h1>{{arrDa[index]}}</h1>
</div>
16.vue-router是什么
vue-router是vue.js的路由插件，（常用router-link和router-view）
17.vue.js的生命周期
共分8個(gè)階段：
beforeCreate
在實(shí)例初始化之后，數(shù)據(jù)觀測(cè)者
data observer和event/watcher事件配置之前調(diào)用
created
在實(shí)例創(chuàng)建完成后立即調(diào)用，此時(shí)，實(shí)例已完成：觀測(cè)者，屬性和方法的運(yùn)算，
watch/event事件回調(diào)，掛載階段還沒開始，$el屬性目前不可見。
beforeMount
在掛載開始之前調(diào)用，相關(guān)的
render函數(shù)首次調(diào)用。
mounted
el被新創(chuàng)建的vm.$el替換，并且在掛載到實(shí)例上之后再調(diào)用該鉤。如果root實(shí)例掛載了一個(gè)文檔內(nèi)元素，當(dāng)調(diào)用mounted時(shí)vm.$el也在文檔內(nèi)。
beforeUpdate
在數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬
dom重新渲染和打補(bǔ)丁之前。
updated
由于數(shù)據(jù)更改導(dǎo)致的虛擬
dom重新渲染和打補(bǔ)丁，在這之后會(huì)調(diào)用該鉤子。
beforeDestroyed
在實(shí)例銷毀之前調(diào)用，在這一步，實(shí)例仍然完全可用。
destroyed
在vue.js實(shí)例銷毀后調(diào)用，vue.js實(shí)例指示的所有東西都會(huì)解除綁定，所有的事件監(jiān)聽會(huì)被移除，所有的子實(shí)例也會(huì)被銷毀。
如果使用組件的keep-alive功能時(shí)，增加兩個(gè)周期：
activated在keep-alive組件激活時(shí)調(diào)用；deactivated在keep-alive組件停用時(shí)調(diào)用。
<keep-alive>包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷毀它們。<keep-alive>是一個(gè)抽象組件，它自身不會(huì)渲染一個(gè)DOM元素，也不會(huì)出現(xiàn)在父組件鏈中。
當(dāng)在<keep-alive>內(nèi)切換組件時(shí)，它的activated和deactivated這兩個(gè)生命周期鉤子函數(shù)將會(huì)執(zhí)行。
<keep-alive>
<component :is="view"></component>
</keep-alive>
增加一個(gè)周期鉤子：ErrorCaptured表示當(dāng)捕獲一個(gè)來自子孫組件的錯(cuò)誤時(shí)調(diào)用。
18.描述封裝vue組件的作用過程
組件可以提升整個(gè)項(xiàng)目的開發(fā)效率，能夠把頁(yè)面抽象成多個(gè)相對(duì)獨(dú)立的模塊，解決了傳統(tǒng)項(xiàng)目開發(fā)中效率低，難維護(hù)，復(fù)用性等問題。
使用Vue.extend方法創(chuàng)建一個(gè)組件，使用Vue.component方法注冊(cè)組件，子組件需要數(shù)據(jù)，可以在props中接收數(shù)據(jù)，而子組件修改好數(shù)據(jù)后，想要把數(shù)據(jù)傳遞給父組件，可以使用emit方法。
使用自定義組件：
在components目錄中新建組件文件，腳本一定要導(dǎo)出暴露的接口；導(dǎo)入需要用到的頁(yè)面；將導(dǎo)入的組件注入vue.js的子組件的components屬性中；在template的視圖中使用自定義組件。
創(chuàng)建組件
<div id="app">
<dada></dada>
</div>
<template id="demo">
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script type="text/javascript">
// 定義組件類
var dada = Vue.extend({
template: '#demo',
data:function() {
return {
msg: 'dadaqianduan.cn'
}
}
})
// 注冊(cè)組件
Vue.component('dada',dada);
// 定義Vue實(shí)例化對(duì)象
var app = new Vue({
el: '#app',
data: {}
})
</script>
19.vue-loader是什么
vue-loader它是解析.vue文件的一個(gè)加載器，將template/js/style轉(zhuǎn)換成javascript模塊；通過這個(gè)vue-loader，javascript可以寫EMAScript6語法，style樣式可以應(yīng)用scss或less，template可以添加jade語法。。。
20.在vue.cli項(xiàng)目中的src目錄說明
assets文件夾存放靜態(tài)資源;components存放組件;router定義路由相關(guān)的配置;view是視圖;app.vue是一個(gè)應(yīng)用主組件;main.js是入口文件。
21.對(duì)vue.js的template編譯的理解
首先轉(zhuǎn)化成AST抽象語法樹，Abstract Syntax Tree，就是將源代碼語法結(jié)構(gòu)抽象成樹狀表現(xiàn)形式，然后通過render函數(shù)進(jìn)行渲染，并返回VNode（Vue.js的虛擬dom節(jié)點(diǎn)）。
通過
compile編譯器把template編譯成AST，compile是createCompiler的返回值，createCompiler用來創(chuàng)建編譯器，compile還負(fù)責(zé)合并option；AST會(huì)經(jīng)過generate-將AST轉(zhuǎn)換成render function字符串的過程-得到render函數(shù)，render的返回值是VNode，VNode是Vue.js的虛擬DOM節(jié)點(diǎn)，里面有標(biāo)簽名，子節(jié)點(diǎn)，文本等。
22.v-show指令和v-if指令的區(qū)別
它們都是條件渲染指令，不同的是，v-show的值無論是true或false元素都會(huì)存在于html頁(yè)面中，而v-if的值為true時(shí)，元素才會(huì)存在于html頁(yè)面中。
v-show指令是通過修改元素的style屬性值實(shí)現(xiàn)的。
23.讓css只在當(dāng)前組件中起作用
只需要在style標(biāo)簽中添加scoped屬性，<style scoped></style>
24.在vue.js中如何實(shí)現(xiàn)路由嵌套
路由嵌套會(huì)將其他組件渲染到該組件內(nèi)，而不是使整個(gè)頁(yè)面跳轉(zhuǎn)到router-view定義組件渲染的位置，要進(jìn)行頁(yè)面跳轉(zhuǎn)，要將頁(yè)面渲染到根組件內(nèi)。首先實(shí)例化根組件，在根組件中定義組件渲染容器，然后，掛載路由，當(dāng)切換路由時(shí)，將會(huì)切換整個(gè)頁(yè)面。
new Vue({
el: '#dada',
router: router,
template: '<router-view></router-view>'
})
25.在vue.js中的ref屬性有什么作用
可以直接訪問組件內(nèi)部的一些元素，定義屬性可以在組件內(nèi)部通過this.$refs屬性，，訪問設(shè)置ref屬性的元素，這是一個(gè)原生的DOM元素，要使用原生DOM API操作它們。
26.在vue.js開發(fā)環(huán)境下調(diào)用接口，如何避免跨域
在config/index.js內(nèi)對(duì)proxyTable項(xiàng)進(jìn)行如下配置：
proxyTable: {
'/api': {
target: 'http://xxx.com',
changeOrign: true,
pathRewrite: {
'^/api': ''
}
}
}
27.axios是什么
axios是vue2.0中用來替換vue-resource.js插件的一個(gè)模塊，是一個(gè)請(qǐng)求后臺(tái)資源的模塊
使用npm install axios來安裝axios
import Vue from 'vue'
import axios from 'axios';
Vue.prototype.$http = axios;
new Vue({
el: 'dada',
data: {
mag: ''
},
template: '<h1>{{msg}}</h1>',
created: function() {
this.$http.get('data.json').then(res=>{
this.msg = res.data.data
})
}
})
當(dāng)調(diào)用axios.post('api/user')時(shí)，表示發(fā)送post異步請(qǐng)求。
28.sass是什么
sass是一種css預(yù)編譯語言，用npm安裝加載程序；在webpack.config.js中配置sass加載程序
module: {
// 加載程序
loaders: {
// 加載scss
{
test: /\.scss$/,
loader: 'vue-style-loader!css-loader!sass-loader'
}
}
}
29.什么情況下會(huì)產(chǎn)生片段實(shí)例
模板包含多個(gè)頂級(jí)元素；模板只包含普通文本；模板只包含其他組件，模板只包含一個(gè)元素指令，如vue-router的<router-view>；模板根節(jié)點(diǎn)有一個(gè)流程 控制指令，如v-if或v-for
這些情況讓實(shí)例有未知數(shù)量的頂級(jí)元素，模板將把它的DOM內(nèi)容當(dāng)作片段。片段實(shí)例仍然會(huì)正確地渲染內(nèi)容。不過，模板沒有一個(gè)根節(jié)點(diǎn)，它的$el指向一個(gè)錨節(jié)點(diǎn)，即一個(gè)空的文本節(jié)點(diǎn)。
在
vue2.0中，組件的模板只允許有權(quán)只有一個(gè)根節(jié)點(diǎn)。
30. 實(shí)現(xiàn)多個(gè)根據(jù)不同條件顯示不同文字的方法
<div id="app">
<input type="text" v-model="inputValue">
<h1>{{showValue}}</h1>
</div>
var app = new Vue({
el: '#app',
data: {
inputValue: ''
},
computed: {
showValue: function() {
return this.inputValue || '請(qǐng)輸入內(nèi)容'
}
}
})
31.什么是數(shù)據(jù)的丟失
如果在初始化時(shí)沒有定義數(shù)據(jù)，之后更新的數(shù)據(jù)是無法觸發(fā)頁(yè)面渲染更新的，這部分?jǐn)?shù)據(jù)是丟失的數(shù)據(jù)，這種現(xiàn)象叫數(shù)據(jù)的丟失。
32.如何檢測(cè)數(shù)據(jù)的變化
通過直接索引設(shè)置元素： app.arr[0]=修改數(shù)據(jù)的長(zhǎng)度： app.arr.length
為了解決該問題，Vue.js擴(kuò)展了觀察數(shù)組，為它添加了一個(gè)$set()方法，用該方法修改的數(shù)組，能觸發(fā)視圖更新，檢測(cè)數(shù)據(jù)變化。
app.$set(app.arr, 5, 500);
由于javascript特性的限制，vue.js不能檢測(cè)到對(duì)象屬性的添加或刪除，因?yàn)?code style="margin-right: 2px;margin-left: 2px;padding: 2px 4px;max-width: 100%;font-size: 14px;border-radius: 4px;color: rgb(30, 107, 184);background-color: rgba(27, 31, 35, 0.05);font-family: 'Operator Mono', Consolas, Monaco, Menlo, monospace;word-break: break-all;box-sizing: border-box !important;overflow-wrap: break-word !important;">Vue.js在初始化時(shí)將數(shù)組轉(zhuǎn)化為getter/setter，所以屬性必須在data對(duì)象中定義，才能在初始化時(shí)讓vue.js轉(zhuǎn)換它并讓它響應(yīng)。
var data = {
obj: {
a: 1
}
}
var app = new Vue({
el: '#app',
data: data
})
app.ojb.a = 10
app.obj.b = 20 // 不是響應(yīng)的
data.obj.b = 20 // 不是響應(yīng)的
如果需要在實(shí)例創(chuàng)建之后添加屬性并且讓它能夠響應(yīng)，使用$set實(shí)例方法：
app.$set(app.obj, 'b', 200)
對(duì)于普通數(shù)據(jù)對(duì)象，可以全局方法Vue.set(object,key,value)
Vue.set(data.obj, 'b', 250)
33.vue.js文件中的樣式覆蓋不生效的問題
在style上加上scoped可以讓樣式私有化，只針對(duì)當(dāng)前vue.js文件中的代碼有效，不會(huì)對(duì)別的文件中的代碼造成影響，有時(shí)，引入第三方UI，在vue.js文件中進(jìn)行樣式覆蓋不生效，大概是因?yàn)?code style="margin-right: 2px;margin-left: 2px;padding: 2px 4px;max-width: 100%;font-size: 14px;border-radius: 4px;color: rgb(30, 107, 184);background-color: rgba(27, 31, 35, 0.05);font-family: 'Operator Mono', Consolas, Monaco, Menlo, monospace;word-break: break-all;box-sizing: border-box !important;overflow-wrap: break-word !important;">style上的scoped導(dǎo)致的。
可以將需要覆蓋樣式的這部分代碼放到單獨(dú)的css文件中，在main.js文件導(dǎo)入即可。
34.如何解決數(shù)據(jù)層級(jí)結(jié)構(gòu)太深
在開發(fā)中，常出現(xiàn)異步獲取數(shù)據(jù)的情況，有時(shí)數(shù)據(jù)層次太深，如：
<text v-text="a.b.c.d"></text>
可以使用vm.$set手動(dòng)定義一層數(shù)據(jù)：vm.$set("dada", a.b.c.d)
35.vue.js頁(yè)面的閃爍
在vue.js有一個(gè)v-cloak指令，該指令一直保持在元素上，直到關(guān)聯(lián)實(shí)例結(jié)束編譯。當(dāng)和css使用時(shí)，這個(gè)指令可以隱藏未編譯的標(biāo)簽，直到實(shí)例編譯結(jié)束：<div>不會(huì)顯示，直到編譯結(jié)束。
[v-cloak] {
display: none;
}
<div v-cloak>{{dada}}</div>
回復(fù)“加群”與大佬們一起交流學(xué)習(xí)~
點(diǎn)擊“閱讀原文”查看 120+ 篇原創(chuàng)文章