Vue.js筆試題解決業務中常見問題

程式設計師哆啦A夢發表於2021-01-12

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

把你的前端拿捏得死死的,每天學習得爽爽的,如果你所學的東西 處於喜歡 才會有強大的動力支撐。

感謝不負每一份熱愛前端的程式設計師,不論前端技能有多奇葩,歡迎關注加我入群vx:xiaoda0423

前言

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

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

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

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.阻止旋轉螢幕時自動調整字型大小

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

4.主流網站佈局

頁面分為3個部分:頁面的頂部header,底部footer,中間部分(側欄side和主要部分main)。

下面程式碼展示:

<body>
 // 頁面層容器
 <div id="container">
  // 頁面頭部
  <div id="header"></div>
  // 頁面主體
  <div id="main">>
   // 側邊欄
   <div id="side">
   </div>
  </div>
  // 頁面底部
  <div id="footer"></div>
 </div>
</body>

設計頁面樣式程式碼如下:

<style 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;
 }
</style>

效果圖如下:

5.什麼是MVVM框架?

MVVM框架是一個Model-View-ViewModel框架,其中ViewModel連線模型Model和檢視View

vue.js中的MVVM模式:

vue.js是通過資料驅動的,vue.js例項化物件將dom和資料進行繫結,一旦繫結,dom和資料將保持同步,每當資料發生變化,dom也會隨著變化;ViewModelVue.js的核心,它是Vue.js的一個例項。Vue.js會針對某個HTML元素進行例項化,這個HTML元素可以是body,也可以是某個css選擇器所指代的元素。DOM ListenersData Bindings是實現雙向繫結的關鍵。DOM Listeners監聽頁面所有View層中的DOM元素,當發生變化時,Model層的資料隨之變化。Data Bindings會監聽Model層的資料,當資料發生變化時,View層的DOM元素也隨之變化。

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

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

7.如何定義vue-router的動態路由

在靜態路由名稱前面新增冒號,如設定id動態路由引數,為路由物件的path屬性設定/:id

8.如何獲取傳過來的動態引數

在元件中,使用$router物件的params.id,如$route.params.id

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

有三種,第一種是全域性導航鉤子,router.beforeEach(to,from,next),作用是跳轉前進行判斷攔截;第二種是元件內的鉤子;第三種是單獨路由獨享元件。

導航鉤子又叫導航守衛,又分為全域性鉤子,單個路由獨享鉤子和元件級鉤子。

全域性鉤子有beforeEach,beforeResolve,afterEach,單個路由獨享鉤子有:beforeEnter

元件級鉤子有:beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave:它們有以下引數:

to表示即將要進入的目標路由物件;from表示當前導航正要離開的路由;next表示一定要用這個函式才能到達下一個路由,如果不用就會遭到攔截。

10.mint-ui是什麼

mint-ui它是基於Vue.js的前端元件庫,用npm安裝,然後通過import匯入樣式和JavaScript程式碼,vue.use(mintUi)用於實現全域性引入,import {Toast} from 'mint-ui'用能於在單個元件區域性引入

11.v-model是什麼

v-modelvue.js的一條指令,實現資料的雙向繫結

雙向資料繫結的原理:

vue.js使用es5提供的屬性特性功能,結合釋出者-訂閱者模式,通過Object.defineProperty()為各個屬性定義get,set特性方法,在資料傳送改變時給訂閱者釋出訊息,觸發相應的監聽回撥。

過程:a,對需要觀察的資料物件進行遞迴遍歷,包含子屬性物件的屬性,設定setget特性方法;當給這個物件的某個值賦值時,會觸發繫結的set特性方法,就能起到監聽資料的變化。b,用compile解析模板指令,將模板中的變數替換成資料,然後初始化渲染頁面檢視,並將每個指令對應的節點繫結更新函式,新增監聽資料的訂閱者,一旦資料有變動,就會收到通知,並更新檢視。c,Watcher訂閱者是ObserverCompile之間通訊的橋樑:在自身例項化時向屬性訂閱器dep裡面新增自己;自身必須有一個update()方法;在dep.notice()釋出通知時,能呼叫自身的update()方法,並觸發Compile中繫結的回撥函式。d,MVVM是資料繫結的入口,整合了ObserverCompileWathcher三者,通過Observer來監聽自己的model資料變化,通過Compile來解析編譯模板指令,最終利用Watcher來搭起ObserverCompile之間的通訊橋樑,達到資料變化通知檢視更新的效果,利用檢視互動,變化更新資料model變更的雙向繫結效果。

12.vue.js中標籤如何繫結事件

第一種方式,使用v-on;第二種方式,使用@語法糖

13.vuex是什麼

vuexvue.js框架實現的狀態管理系統。使用vuex,要引入store,並注入vue.js元件中,在元件內部可以通過$store訪問store物件;使用場景,在單頁應用中,用於元件之間的通訊,如音樂播放,登入狀態管理,加入購物車等

vuex可以說是一種開發模式或框架,它是對vue.js框架資料層面的擴充套件,通過狀態集中管理驅動元件的變化,應用的狀態集中放在store中,改變狀態的方式是提交mutations,這是個同步的事務,非同步的邏輯應該封裝在action中。

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

自定義指令兩種:一種全域性自定義指令,vue.js物件提供了directive方法,可以用來自定義指令,directive方法接收兩個引數,一個是指令名稱,另一個是函式;第二種是區域性自定義指令,通過元件的directives屬性定義。

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

v-if判斷物件是否隱藏;v-for迴圈渲染;v-bind繫結一個屬性;v-model實現資料雙向繫結

v-if迴圈中實現v-model資料的雙向繫結:

有時需要建立input,並用v-model實現資料的雙向繫結。此時可以為v-model繫結陣列的一個成語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-routervue.js的路由外掛,(常用router-linkrouter-view

17.vue.js的生命週期

共分8個階段:

  1. beforeCreate
在例項初始化之後,資料觀測者data observerevent/watcher事件配置之前呼叫
  1. created
在例項建立完成後立即呼叫,此時,例項已完成:觀測者,屬性和方法的運算,watch/event事件回撥,掛載階段還沒開始,$el屬性目前不可見。
  1. beforeMount
在掛載開始之前呼叫,相關的render函式首次呼叫。
  1. mounted
el被新建立的vm.$el替換,並且在掛載到例項上之後再呼叫該鉤。如果root例項掛載了一個文件內元素,當呼叫mountedvm.$el也在文件內。
  1. beforeUpdate
在資料更新時呼叫,發生在虛擬dom重新渲染和打補丁之前。
  1. updated
由於資料更改導致的虛擬dom重新渲染和打補丁,在這之後會呼叫該鉤子。
  1. beforeDestroyed
在例項銷燬之前呼叫,在這一步,例項仍然完全可用。
  1. destroyed

vue.js例項銷燬後呼叫,vue.js例項指示的所有東西都會解除繫結,所有的事件監聽會被移除,所有的子例項也會被銷燬。

如果使用元件的keep-alive功能時,增加兩個週期:

  • activatedkeep-alive元件啟用時呼叫;
  • deactivatedkeep-alive元件停用時呼叫。

<keep-alive>包裹動態元件時,會快取不活動的元件例項,而不是銷燬它們。<keep-alive>是一個抽象元件,它自身不會渲染一個DOM元素,也不會出現在父元件鏈中。

當在<keep-alive>內切換元件時,它的activateddeactivated這兩個生命週期鉤子函式將會執行。

<keep-alive>
 <component :is="view"></component>
</keep-alive>

增加一個週期鉤子:ErrorCaptured表示當捕獲一個來自子孫元件的錯誤時呼叫。

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

元件可以提升整個專案的開發效率,能夠把頁面抽象成多個相對獨立的模組,解決了傳統專案開發中效率低,難維護,複用性等問題。

使用Vue.extend方法建立一個元件,使用Vue.component方法註冊元件,子元件需要資料,可以在props中接收資料,而子元件修改好資料後,想要把資料傳遞給父元件,可以使用emit方法。

使用自定義元件:

components目錄中新建元件檔案,指令碼一定要匯出暴露的介面;匯入需要用到的頁面;將匯入的元件注入vue.js的子元件的components屬性中;在template的檢視中使用自定義元件。

建立元件

<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'
  }
 }
})
// 註冊元件
Vue.component('dada',dada);
// 定義Vue例項化物件
var app = new Vue({
 el: '#app',
 data: {}
})
</script>

19.vue-loader是什麼

vue-loader它是解析.vue檔案的一個載入器,將template/js/style轉換成javascript模組;通過這個vue-loaderjavascript可以寫EMAScript6語法,style樣式可以應用scsslesstemplate可以新增jade語法。。。

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

  1. assets資料夾存放靜態資源;
  2. components存放元件;
  3. router定義路由相關的配置;
  4. view是檢視;
  5. app.vue是一個應用主元件;
  6. main.js是入口檔案。

21.對vue.jstemplate編譯的理解

首先轉化成AST抽象語法樹,Abstract Syntax Tree,就是將原始碼語法結構抽象成樹狀表現形式,然後通過render函式進行渲染,並返回VNodeVue.js的虛擬dom節點)。

通過compile編譯器把template編譯成ASTcompilecreateCompiler的返回值,createCompiler用來建立編譯器,compile還負責合併optionAST會經過generate-將AST轉換成render function 字串的過程-得到render函式,render的返回值是VNodeVNodeVue.js的虛擬DOM節點,裡面有標籤名,子節點,文字等。

22.v-show指令和v-if指令的區別

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

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

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

只需要在style標籤中新增scoped屬性,<style scoped></style>

24.在vue.js中如何實現路由巢狀

路由巢狀會將其他元件渲染到該元件內,而不是使整個頁面跳轉到router-view定義元件渲染的位置,要進行頁面跳轉,要將頁面渲染到根元件內。首先例項化根元件,在根元件中定義元件渲染容器,然後,掛載路由,當切換路由時,將會切換整個頁面。

new Vue({
 el: '#dada',
 router: router,
 template: '<router-view></router-view>'
})

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

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

26.在vue.js開發環境下呼叫介面,如何避免跨域

config/index.js內對proxyTable項進行如下配置:

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

27.axios是什麼

axiosvue2.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: '<h1>{{msg}}</h1>',
 created: function() {
  this.$http.get('data.json').then(res=>{
   this.msg = res.data.data
  })
 }
})

當呼叫axios.post('api/user')時,表示傳送post非同步請求。

28.sass是什麼

sass是一種css預編譯語言,用npm安裝載入程式;在webpack.config.js中配置sass載入程式

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

29.什麼情況下會產生片段例項

模板包含多個頂級元素;模板只包含普通文字;模板只包含其他元件,模板只包含一個元素指令,如vue-router<router-view>;模板根節點有一個流程 控制指令,如v-ifv-for

這些情況讓例項有未知數量的頂級元素,模板將把它的DOM內容當作片段。片段例項仍然會正確地渲染內容。不過,模板沒有一個根節點,它的$el指向一個錨節點,即一個空的文字節點。

vue2.0中,元件的模板只允許有權只有一個根節點。

30. 實現多個根據不同條件顯示不同文字的方法

<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 || '請輸入內容'
  }
 }
})

31.什麼是資料的丟失

如果在初始化時沒有定義資料,之後更新的資料是無法觸發頁面渲染更新的,這部分資料是丟失的資料,這種現象叫資料的丟失。

32.如何檢測資料的變化

  • 通過直接索引設定元素:app.arr[0]=
  • 修改資料的長度:app.arr.length

為了解決該問題,Vue.js擴充套件了觀察陣列,為它新增了一個$set()方法,用該方法修改的陣列,能觸發檢視更新,檢測資料變化。

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

由於javascript特性的限制,vue.js不能檢測到物件屬性的新增或刪除,因為Vue.js在初始化時將陣列轉化為getter/setter,所以屬性必須在data物件中定義,才能在初始化時讓vue.js轉換它並讓它響應。

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 // 不是響應的

如果需要在例項建立之後新增屬性並且讓它能夠響應,使用$set例項方法:

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

對於普通資料物件,可以全域性方法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.如何解決資料層級結構太深

在開發中,常出現非同步獲取資料的情況,有時資料層次太深,如:

<text v-text="a.b.c.d"></text>

可以使用vm.$set手動定義一層資料:vm.$set("dada", a.b.c.d)

35.vue.js頁面的閃爍

vue.js有一個v-cloak指令,該指令一直保持在元素上,直到關聯例項結束編譯。當和css使用時,這個指令可以隱藏未編譯的標籤,直到例項編譯結束:<div>不會顯示,直到編譯結束。

[v-cloak] {
 display: none;
}
<div v-cloak>{{dada}}</div>

點贊、收藏和評論

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

我們下期見!

文章持續更新,本文 http://www.dadaqianduan.cn/#/ 已經收錄

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

相關文章