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

時間  2021-01-12
標籤 javascript css html 前端 vue java webpack ios git 程序員 欄目 JavaScript 简体版
原文   原文鏈接

哪吒人生信條：若是你所學的東西 處於喜歡 纔會有強大的動力支撐。javascript

把你的前端拿捏得死死的，天天學習得爽爽的，若是你所學的東西 處於喜歡 纔會有強大的動力支撐。

感謝不負每一份熱愛前端的程序員，不論前端技能有多奇葩，歡迎關注加我入羣vx:xiaoda0423css

前言

但願能夠經過這篇文章，可以給你獲得幫助。(感謝一鍵三連)html

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）。vue

下面代碼展現：java

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

設計頁面樣式代碼以下：webpack

<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>

效果圖以下：ios

5.什麼是MVVM框架？

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

在vue.js中的MVVM模式：程序員

vue.js是經過數據驅動的， vue.js實例化對象將 dom和數據進行綁定，一旦綁定， dom和數據將保持同步，每當數據發生變化， dom也會隨着變化； ViewModel是 Vue.js的核心，它是 Vue.js的一個實例。 Vue.js會針對某個 HTML元素進行實例化，這個 HTML元素能夠是 body，也能夠是某個 css選擇器所指代的元素。 DOM Listeners和 Data 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

組件級鉤子有：beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave：它們有如下參數：

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-model是vue.js的一條指令，實現數據的雙向綁定

雙向數據綁定的原理：

vue.js使用es5提供的屬性特性功能，結合發佈者-訂閱者模式，經過Object.defineProperty()爲各個屬性定義get,set特性方法，在數據發送改變時給訂閱者發佈消息，觸發相應的監聽回調。

過程：a，對須要觀察的數據對象進行遞歸遍歷，包含子屬性對象的屬性，設置 set和 get特性方法；當給這個對象的某個值賦值時，會觸發綁定的 set特性方法，就能起到監聽數據的變化。b，用 compile解析模板指令，將模板中的變量替換成數據，而後初始化渲染頁面視圖，並將每一個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變更，就會收到通知，並更新視圖。c， Watcher訂閱者是 Observer和 Compile之間通訊的橋樑：在自身實例化時向屬性訂閱器 dep裏面添加本身；自身必須有一個 update()方法；在 dep.notice()發佈通知時，能調用自身的 update()方法，並觸發 Compile中綁定的回調函數。d， MVVM是數據綁定的入口，整合了 Observer， Compile和 Wathcher三者，經過 Observer來監聽本身的 model數據變化，經過 Compile來解析編譯模板指令，最終利用 Watcher來搭起 Observer和 Compile之間的通訊橋樑，達到數據變化通知視圖更新的效果，利用視圖交互，變化更新數據 model變動的雙向綁定效果。

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

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

13.vuex是什麼

vuex是vue.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-router是vue.js的路由插件，（經常使用router-link和router-view）

17.vue.js的生命週期

共分8個階段：

  1. beforeCreate
在實例初始化以後，數據觀測者 data observer和 event/watcher事件配置以前調用
  1. created
在實例建立完成後當即調用，此時，實例已完成：觀測者，屬性和方法的運算， watch/event事件回調，掛載階段還沒開始， $el屬性目前不可見。
  1. beforeMount
在掛載開始以前調用，相關的 render函數首次調用。
  1. mounted
el被新建立的 vm.$el替換，而且在掛載到實例上以後再調用該鉤。若是 root實例掛載了一個文檔內元素，當調用 mounted時 vm.$el也在文檔內。
  1. beforeUpdate
在數據更新時調用，發生在虛擬 dom從新渲染和打補丁以前。
  1. updated
因爲數據更改致使的虛擬 dom從新渲染和打補丁，在這以後會調用該鉤子。
  1. beforeDestroyed
在實例銷燬以前調用，在這一步，實例仍然徹底可用。
  1. destroyed

在vue.js實例銷燬後調用，vue.js實例指示的全部東西都會解除綁定，全部的事件監聽會被移除，全部的子實例也會被銷燬。

若是使用組件的keep-alive功能時，增長兩個週期：

  • activated在keep-alive組件激活時調用；
  • deactivated在keep-alive組件停用時調用。

<keep-alive>包裹動態組件時，會緩存不活動的組件實例，而不是銷燬它們。<keep-alive>是一個抽象組件，它自身不會渲染一個DOM元素，也不會出如今父組件鏈中。

當在<keep-alive>內切換組件時，它的activated和deactivated這兩個生命週期鉤子函數將會執行。

<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-loader，javascript能夠寫EMAScript6語法，style樣式能夠應用scss或less，template能夠添加jade語法。。。

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

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

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

首先轉化成AST抽象語法樹，Abstract Syntax Tree，就是將源代碼語法結構抽象成樹狀表現形式，而後經過render函數進行渲染，並返回VNode（Vue.js的虛擬dom節點）。

經過 compile編譯器把 template編譯成 AST， compile是 createCompiler的返回值， createCompiler用來建立編譯器， compile還負責合併 option； AST會通過 generate-將 AST轉換成 render function 字符串的過程-獲得 render函數， render的返回值是 VNode， VNode是 Vue.js的虛擬 DOM節點，裏面有標籤名，子節點，文本等。

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

它們都是條件渲染指令，不一樣的是，v-show的值不管是true或false元素都會存在於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是什麼

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: '<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-if或v-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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程