Vue.js筆試題解決業(yè)務中常見問題

程序源代碼

關(guān)注

共 7687字，需瀏覽 16分鐘

 ·

2021-01-15 00:24

哪吒人生信條：如果你所學的東西 處于喜歡 才會有強大的動力支撐。

把你的前端拿捏得死死的，每天學習得爽爽的，微信搜索【程序員哆啦A夢】關(guān)注這個不一樣的程序員，如果你所學的東西 處于喜歡 才會有強大的動力支撐。

感謝不負每一份熱愛前端的程序員，不論前端技能有多奇葩，歡迎關(guān)注加我入群vx:xiaoda0423

前言

希望可以通過這篇文章，能夠給你得到幫助。(感謝一鍵三連)

1.h5底部輸入框被鍵盤遮擋問題

如果你遇到h5頁面這個問題，當輸入框在最底部，點擊軟鍵盤后輸入框會被遮擋，可以如下解決問題：

var?getHeight?=?$(document).height();

$(window).resize(function(){
?if($(document).height()???$('#footer').css('position','static');
?}else?{
??$('#footer').css('position','absolute');
?}
});

2.觸屏即播放

$('html').one('touchstart',function(){
?audio.play()
})

3.阻止旋轉(zhuǎn)屏幕時自動調(diào)整字體大小

html,?body,?form,?fieldset,?p,?div,?h1,?h2,?h3,?h4,?h5,?h6?{-webkit-text-size-adjust:none;}

4.主流網(wǎng)站布局

頁面分為3個部分：頁面的頂部header，底部footer，中間部分（側(cè)欄side和主要部分main）。

下面代碼展示：

?//?頁面層容器
?"container">
??//?頁面頭部
??"header">


??//?頁面主體
??"main">>
???//?側(cè)邊欄
???"side">
???


??


??//?頁面底部
??"footer">


?

設(shè)計頁面樣式代碼如下：

type="text/css">
?body{
??font:?12px?微軟雅黑;
??margin:?0px;
??text-align:?center;
??background:?#fff;
?}
?
?//?頁面層容器
?#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;
?}

效果圖如下：

5.什么是MVVM框架？

MVVM框架是一個Model-View-ViewModel框架，其中ViewModel連接模型Model和視圖View。

在vue.js中的MVVM模式：

vue.js是通過數(shù)據(jù)驅(qū)動的，vue.js實例化對象將dom和數(shù)據(jù)進行綁定，一旦綁定，dom和數(shù)據(jù)將保持同步，每當數(shù)據(jù)發(fā)生變化，dom也會隨著變化；ViewModel是Vue.js的核心，它是Vue.js的一個實例。Vue.js會針對某個HTML元素進行實例化，這個HTML元素可以是body，也可以是某個css選擇器所指代的元素。DOM Listeners和Data Bindings是實現(xiàn)雙向綁定的關(guān)鍵。DOM Listeners監(jiān)聽頁面所有View層中的DOM元素，當發(fā)生變化時，Model層的數(shù)據(jù)隨之變化。Data Bindings會監(jiān)聽Model層的數(shù)據(jù)，當數(shù)據(jù)發(fā)生變化時，View層的DOM元素也隨之變化。

6.active-class是哪個組件的屬性

它是vue-router模塊的router-link組件的屬性

7.如何定義vue-router的動態(tài)路由

在靜態(tài)路由名稱前面添加冒號，如設(shè)置id動態(tài)路由參數(shù)，為路由對象的path屬性設(shè)置/:id

8.如何獲取傳過來的動態(tài)參數(shù)

在組件中，使用$router對象的params.id，如$route.params.id

9.vue-router有哪幾種導航的鉤子

有三種，第一種是全局導航鉤子，router.beforeEach(to,from,next)，作用是跳轉(zhuǎn)前進行判斷攔截；第二種是組件內(nèi)的鉤子；第三種是單獨路由獨享組件。

導航鉤子又叫導航守衛(wèi)，又分為全局鉤子，單個路由獨享鉤子和組件級鉤子。

全局鉤子有beforeEach,beforeResolve,afterEach，單個路由獨享鉤子有：beforeEnter

組件級鉤子有：beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave：它們有以下參數(shù)：

to表示即將要進入的目標路由對象；from表示當前導航正要離開的路由；next表示一定要用這個函數(shù)才能到達下一個路由，如果不用就會遭到攔截。

10.mint-ui是什么

mint-ui它是基于Vue.js的前端組件庫，用npm安裝，然后通過import導入樣式和JavaScript代碼，vue.use(mintUi)用于實現(xiàn)全局引入，import {Toast} from 'mint-ui'用能于在單個組件局部引入

11.v-model是什么

v-model是vue.js的一條指令，實現(xiàn)數(shù)據(jù)的雙向綁定

雙向數(shù)據(jù)綁定的原理：

vue.js使用es5提供的屬性特性功能，結(jié)合發(fā)布者-訂閱者模式，通過Object.defineProperty()為各個屬性定義get,set特性方法，在數(shù)據(jù)發(fā)送改變時給訂閱者發(fā)布消息，觸發(fā)相應的監(jiān)聽回調(diào)。

過程：a，對需要觀察的數(shù)據(jù)對象進行遞歸遍歷，包含子屬性對象的屬性，設(shè)置set和get特性方法；當給這個對象的某個值賦值時，會觸發(fā)綁定的set特性方法，就能起到監(jiān)聽數(shù)據(jù)的變化。b，用compile解析模板指令，將模板中的變量替換成數(shù)據(jù)，然后初始化渲染頁面視圖，并將每個指令對應的節(jié)點綁定更新函數(shù)，添加監(jiān)聽數(shù)據(jù)的訂閱者，一旦數(shù)據(jù)有變動，就會收到通知，并更新視圖。c，Watcher訂閱者是Observer和Compile之間通信的橋梁：在自身實例化時向?qū)傩杂嗛喥?code style="font-size: 14px;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;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;">dep里面添加自己；自身必須有一個update()方法；在dep.notice()發(fā)布通知時，能調(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之間的通信橋梁，達到數(shù)據(jù)變化通知視圖更新的效果，利用視圖交互，變化更新數(shù)據(jù)model變更的雙向綁定效果。

12.vue.js中標簽如何綁定事件

第一種方式，使用v-on；第二種方式，使用@語法糖

13.vuex是什么

vuex是vue.js框架實現(xiàn)的狀態(tài)管理系統(tǒng)。使用vuex，要引入store，并注入vue.js組件中，在組件內(nèi)部可以通過$store訪問store對象；使用場景，在單頁應用中，用于組件之間的通信，如音樂播放，登錄狀態(tài)管理，加入購物車等

vuex可以說是一種開發(fā)模式或框架，它是對vue.js框架數(shù)據(jù)層面的擴展，通過狀態(tài)集中管理驅(qū)動組件的變化，應用的狀態(tài)集中放在store中，改變狀態(tài)的方式是提交mutations，這是個同步的事務，異步的邏輯應該封裝在action中。

14.在vue中說說你知道的自定義指令

自定義指令兩種：一種全局自定義指令，vue.js對象提供了directive方法，可以用來自定義指令，directive方法接收兩個參數(shù)，一個是指令名稱，另一個是函數(shù)；第二種是局部自定義指令，通過組件的directives屬性定義。

15.vue.js中常用的4種指令

v-if判斷對象是否隱藏；v-for循環(huán)渲染；v-bind綁定一個屬性；v-model實現(xiàn)數(shù)據(jù)雙向綁定

在v-if循環(huán)中實現(xiàn)v-model數(shù)據(jù)的雙向綁定：

有時需要創(chuàng)建input，并用v-model實現(xiàn)數(shù)據(jù)的雙向綁定。此時可以為v-model綁定數(shù)組的一個成語selected[$index]，這樣可以給不同的input綁定不同的v-model:

"(item,index)?in?arrDa">
?type="text"?v-model="arrData[index]">
?
{{arrDa[index]}}

16.vue-router是什么

vue-router是vue.js的路由插件，（常用router-link和router-view）

17.vue.js的生命周期

共分8個階段：

1. beforeCreate

在實例初始化之后，數(shù)據(jù)觀測者data observer和event/watcher事件配置之前調(diào)用

2. created

在實例創(chuàng)建完成后立即調(diào)用，此時，實例已完成：觀測者，屬性和方法的運算，watch/event事件回調(diào)，掛載階段還沒開始，$el屬性目前不可見。

3. beforeMount

在掛載開始之前調(diào)用，相關(guān)的render函數(shù)首次調(diào)用。

4. mounted

el被新創(chuàng)建的vm.$el替換，并且在掛載到實例上之后再調(diào)用該鉤。如果root實例掛載了一個文檔內(nèi)元素，當調(diào)用mounted時vm.$el也在文檔內(nèi)。

5. beforeUpdate

在數(shù)據(jù)更新時調(diào)用，發(fā)生在虛擬dom重新渲染和打補丁之前。

6. updated

由于數(shù)據(jù)更改導致的虛擬dom重新渲染和打補丁，在這之后會調(diào)用該鉤子。

7. beforeDestroyed

在實例銷毀之前調(diào)用，在這一步，實例仍然完全可用。

8. destroyed

在vue.js實例銷毀后調(diào)用，vue.js實例指示的所有東西都會解除綁定，所有的事件監(jiān)聽會被移除，所有的子實例也會被銷毀。

如果使用組件的keep-alive功能時，增加兩個周期：

• activated在keep-alive組件激活時調(diào)用；
• deactivated在keep-alive組件停用時調(diào)用。

包裹動態(tài)組件時，會緩存不活動的組件實例，而不是銷毀它們。是一個抽象組件，它自身不會渲染一個DOM元素，也不會出現(xiàn)在父組件鏈中。

當在內(nèi)切換組件時，它的activated和deactivated這兩個生命周期鉤子函數(shù)將會執(zhí)行。

?"view">

增加一個周期鉤子：ErrorCaptured表示當捕獲一個來自子孫組件的錯誤時調(diào)用。

18.描述封裝vue組件的作用過程

組件可以提升整個項目的開發(fā)效率，能夠把頁面抽象成多個相對獨立的模塊，解決了傳統(tǒng)項目開發(fā)中效率低，難維護，復用性等問題。

使用Vue.extend方法創(chuàng)建一個組件，使用Vue.component方法注冊組件，子組件需要數(shù)據(jù)，可以在props中接收數(shù)據(jù)，而子組件修改好數(shù)據(jù)后，想要把數(shù)據(jù)傳遞給父組件，可以使用emit方法。

使用自定義組件：

在components目錄中新建組件文件，腳本一定要導出暴露的接口；導入需要用到的頁面；將導入的組件注入vue.js的子組件的components屬性中；在template的視圖中使用自定義組件。

創(chuàng)建組件

"app">
?

"demo">
?

??
{{msg}}

?

19.vue-loader是什么

vue-loader它是解析.vue文件的一個加載器，將template/js/style轉(zhuǎn)換成javascript模塊；通過這個vue-loader，javascript可以寫EMAScript6語法，style樣式可以應用scss或less，template可以添加jade語法。。。

20.在vue.cli項目中的src目錄說明

1. assets文件夾存放靜態(tài)資源;
2. components存放組件;
3. router定義路由相關(guān)的配置;
4. view是視圖;
5. app.vue是一個應用主組件;
6. main.js是入口文件。

21.對vue.js的template編譯的理解

首先轉(zhuǎn)化成AST抽象語法樹，Abstract Syntax Tree，就是將源代碼語法結(jié)構(gòu)抽象成樹狀表現(xiàn)形式，然后通過render函數(shù)進行渲染，并返回VNode（Vue.js的虛擬dom節(jié)點）。

通過compile編譯器把template編譯成AST，compile是createCompiler的返回值，createCompiler用來創(chuàng)建編譯器，compile還負責合并option；AST會經(jīng)過generate-將AST轉(zhuǎn)換成render function 字符串的過程-得到render函數(shù)，render的返回值是VNode，VNode是Vue.js的虛擬DOM節(jié)點，里面有標簽名，子節(jié)點，文本等。

22.v-show指令和v-if指令的區(qū)別

它們都是條件渲染指令，不同的是，v-show的值無論是true或false元素都會存在于html頁面中，而v-if的值為true時，元素才會存在于html頁面中。

v-show指令是通過修改元素的style屬性值實現(xiàn)的。

23.讓css只在當前組件中起作用

只需要在style標簽中添加scoped屬性，

24.在vue.js中如何實現(xiàn)路由嵌套

路由嵌套會將其他組件渲染到該組件內(nèi)，而不是使整個頁面跳轉(zhuǎn)到router-view定義組件渲染的位置，要進行頁面跳轉(zhuǎn)，要將頁面渲染到根組件內(nèi)。首先實例化根組件，在根組件中定義組件渲染容器，然后，掛載路由，當切換路由時，將會切換整個頁面。

new?Vue({
?el:?'#dada',
?router:?router,
?template:?''
})

25.在vue.js中的ref屬性有什么作用

可以直接訪問組件內(nèi)部的一些元素，定義屬性可以在組件內(nèi)部通過this.$refs屬性，，訪問設(shè)置ref屬性的元素，這是一個原生的DOM元素，要使用原生DOM API操作它們。

26.在vue.js開發(fā)環(huán)境下調(diào)用接口，如何避免跨域

在config/index.js內(nèi)對proxyTable項進行如下配置：

proxyTable:?{
?'/api':?{
???target:?'http://xxx.com',
???changeOrign:?true,
???pathRewrite:?{
????'^/api':?''
???}
??}
}

27.axios是什么

axios是vue2.0中用來替換vue-resource.js插件的一個模塊，是一個請求后臺資源的模塊

使用npm install axios來安裝axios

import?Vue?from?'vue'
import?axios?from?'axios';
Vue.prototype.$http?=?axios;
new?Vue({
?el:?'dada',
?data:?{
??mag:?''
?},
?template:?'
{{msg}}
',
?created:?function()?{
??this.$http.get('data.json').then(res=>{
???this.msg?=?res.data.data
??})
?}
})

當調(diào)用axios.post('api/user')時，表示發(fā)送post異步請求。

28.sass是什么

sass是一種css預編譯語言，用npm安裝加載程序；在webpack.config.js中配置sass加載程序

module:?{
?//?加載程序
?loaders:?{
??//?加載scss
??{
???test:?/\.scss$/,
???loader:?'vue-style-loader!css-loader!sass-loader'
??}
?}
}

29.什么情況下會產(chǎn)生片段實例

模板包含多個頂級元素；模板只包含普通文本；模板只包含其他組件，模板只包含一個元素指令，如vue-router的；模板根節(jié)點有一個流程 控制指令，如v-if或v-for

這些情況讓實例有未知數(shù)量的頂級元素，模板將把它的DOM內(nèi)容當作片段。片段實例仍然會正確地渲染內(nèi)容。不過，模板沒有一個根節(jié)點，它的$el指向一個錨節(jié)點，即一個空的文本節(jié)點。

在vue2.0中，組件的模板只允許有權(quán)只有一個根節(jié)點。

30. ?實現(xiàn)多個根據(jù)不同條件顯示不同文字的方法

"app">
?type="text"?v-model="inputValue">
?
{{showValue}}


var?app?=?new?Vue({
?el:?'#app',
?data:?{
??inputValue:?''
?},
?computed:?{
??showValue:?function()?{
???return?this.inputValue?||?'請輸入內(nèi)容'
??}
?}
})

31.什么是數(shù)據(jù)的丟失

如果在初始化時沒有定義數(shù)據(jù)，之后更新的數(shù)據(jù)是無法觸發(fā)頁面渲染更新的，這部分數(shù)據(jù)是丟失的數(shù)據(jù)，這種現(xiàn)象叫數(shù)據(jù)的丟失。

32.如何檢測數(shù)據(jù)的變化

• 通過直接索引設(shè)置元素：app.arr[0]=
• 修改數(shù)據(jù)的長度：app.arr.length

為了解決該問題，Vue.js擴展了觀察數(shù)組，為它添加了一個$set()方法，用該方法修改的數(shù)組，能觸發(fā)視圖更新，檢測數(shù)據(jù)變化。

app.$set(app.arr,?5,?500);

由于javascript特性的限制，vue.js不能檢測到對象屬性的添加或刪除，因為Vue.js在初始化時將數(shù)組轉(zhuǎn)化為getter/setter，所以屬性必須在data對象中定義，才能在初始化時讓vue.js轉(zhuǎn)換它并讓它響應。

var?data?=?{
?obj:?{
??a:?1
?}
}
var?app?=?new?Vue({
?el:?'#app',
?data:?data
})
app.ojb.a?=?10
app.obj.b?=?20?//?不是響應的
data.obj.b?=?20?//?不是響應的

如果需要在實例創(chuàng)建之后添加屬性并且讓它能夠響應，使用$set實例方法：

app.$set(app.obj,?'b',?200)

對于普通數(shù)據(jù)對象，可以全局方法Vue.set(object,key,value)

Vue.set(data.obj,?'b',?250)

33.vue.js文件中的樣式覆蓋不生效的問題

在style上加上scoped可以讓樣式私有化，只針對當前vue.js文件中的代碼有效，不會對別的文件中的代碼造成影響，有時，引入第三方UI，在vue.js文件中進行樣式覆蓋不生效，大概是因為style上的scoped導致的。

可以將需要覆蓋樣式的這部分代碼放到單獨的css文件中，在main.js文件導入即可。

34.如何解決數(shù)據(jù)層級結(jié)構(gòu)太深

在開發(fā)中，常出現(xiàn)異步獲取數(shù)據(jù)的情況，有時數(shù)據(jù)層次太深，如：

"a.b.c.d">

可以使用vm.$set手動定義一層數(shù)據(jù)：vm.$set("dada", a.b.c.d)

35.vue.js頁面的閃爍

在vue.js有一個v-cloak指令，該指令一直保持在元素上，直到關(guān)聯(lián)實例結(jié)束編譯。當和css使用時，這個指令可以隱藏未編譯的標簽，直到實例編譯結(jié)束：

[v-cloak]?{
?display:?none;
}
{{dada}}

點贊、收藏和評論

我是Jeskson(達達前端)，感謝各位人才的：點贊、收藏和評論，我們下期見！(如本文內(nèi)容有地方講解有誤，歡迎指出?謝謝，一起學習了)

我們下期見！

文章持續(xù)更新，可以微信搜一搜「 程序員哆啦A夢 」第一時間閱讀，回復【資料】有我準備的一線大廠資料，本文 http://www.dadaqianduan.cn/#/ 已經(jīng)收錄

github收錄，歡迎Star：https://github.com/webVueBlog/WebFamily

點贊

評論

收藏

分享

手機掃一掃分享

分享

舉報

點贊

評論

收藏

分享

手機掃一掃分享

分享

舉報