前端面試題《Vue》

.vue 優點？

輕量級框架：只關注視圖層，是一個構建數據的視圖集合，大小只有幾十 kb；

簡單易學：國人開發，中文文檔，不存在語言障礙，易于理解和學習；

雙向數據綁定：保留了 angular 的特點，在數據操作方面更為簡單；

組件化：保留了 react 的優點，實現了 html 的封裝和重用，在構建單頁面應用方面有著獨特的優勢；

視圖，數據，結構分離：使數據的更改更為簡單，不需要進行邏輯代碼的修改，只需要操作數據就能完成相關操作；

虛擬 DOM：dom 操作是非常耗費性能的，不再使用原生的 dom 操作節點，極大解放 dom操作，但具體操作的還是 dom 不過是換了另一種方式；

運行速度更快: 相比較與 react 而言，同樣是操作虛擬 dom，就性能而言，vue 存在很大的優勢。

2.vue 父組件向子組件傳遞數據？

通過 props

3.子組件像父組件傳遞事件？

$emit 方法

4.v-show 和 v-if 指令的共同點和不同點？

共同點：都能控制元素的顯示和隱藏；

不同點：實現本質方法不同，v-show 本質就是通過控制 css 中的 display 設置為 none，控制隱藏，只會編譯一次；v-if 是動態的向 DOM 樹內添加或者刪除 DOM 元素，若初始值為false，就不會編譯了。而且 v-if 不停的銷毀和創建比較消耗性能。

總結：如果要頻繁切換某節點，使用 v-show(切換開銷比較小，初始開銷較大)。如果不需要頻繁切換某節點使用 v-if（初始渲染開銷較小，切換開銷比較大）。

5. 如何讓 CSS 只在當前組件中起作用？

在組件中的 style 前面加上 scoped

6. 的作用是什么?

keep-alive 是 Vue 內置的一個組件，可以使被包含的組件保留狀態，或避免重新渲染。

7.如何獲取 dom?

ref="domName" 用法：this.$refs.domName

8.說出幾種 vue 當中的指令和它的用法？

答：v-model 雙向數據綁定；

v-for 循環；

v-if v-show 顯示與隱藏；

v-on 事件；v-once: 只綁定一次。

9.vue-loader 是什么？使用它的用途有哪些？

答：vue 文件的一個加載器，將 template/js/style 轉換成 js 模塊。

用途：js 可以寫 es6、style 樣式可以 scss 或 less、template 可以加 jade 等

10.為什么使用 key?

答：需要使用 key 來給每個節點做一個唯一標識，Diff 算法就可以正確的識別此節點。作用主要是為了高效的更新虛擬 DOM。

11.axios 及安裝?

答：請求后臺資源的模塊。npm install axios --save 裝好，js 中使用 import 進來，然后. get 或. post。返回在. then 函數中如果成功，失敗則是在.catch 函數中。

12.v-modal 的使用。

答：v-model 用于表單數據的雙向綁定，其實它就是一個語法糖，這個背后就做了兩個操作：

v-bind 綁定一個 value 屬性；

v-on 指令給當前元素綁定 input 事件。

13. 請說出 vue.cli 項目中 src 目錄每個文件夾和文件的用法？

答：assets 文件夾是放靜態資源；components 是放組件；router 是定義路由相關的配置;app.vue 是一個應用主組件；main.js 是入口文件。

14. 分別簡述 computed 和 watch 的使用場景

答：computed:

當一個屬性受多個屬性影響的時候就需要用到 computed最典型的栗子：購物車商品結算的時候

watch:

當一條數據影響多條數據的時候就需要用 watch

栗子：搜索數據

15.v-on 可以監聽多個方法嗎？

答：可以

16.$nextTick 的使用

答：當你修改了 data 的值然后馬上獲取這個 dom 元素的值，是不能獲取到更新后的值，你需要使用 $nextTick 這個回調，讓修改后的 data 值渲染更新到 dom 元素之后在獲取，才能成功。

17.vue 組件中 data 為什么必須是一個函數？

答：因為 JavaScript 的特性所導致，在 component 中，data 必須以函數的形式存在，不可以是對象。

組建中的 data 寫成一個函數，數據以函數返回值的形式定義，這樣每次復用組件的時候，都會返回一份新的 data，相當于每個組件實例都有自己私有的數據空間，它們只負責各自維護的數據，不會造成混亂。而單純的寫成對象形式，就是所有的組件實例共用了一個 data，這樣改一個全都改了。

18. 漸進式框架的理解

答：主張最少；可以根據不同的需求選擇不同的層級；

19.Vue 中雙向數據綁定是如何實現的？

答：vue 雙向數據綁定是通過數據劫持結合發布訂閱模式的方式來實現的，也就是說數據和視圖同步，數據發生變化，視圖跟著變化，視圖變化，數據也隨之發生改變；

核心：關于 VUE 雙向數據綁定，其核心是 Object.defineProperty() 方法。

20. 單頁面應用和多頁面應用區別及優缺點

答：單頁面應用（SPA），通俗一點說就是指只有一個主頁面的應用，瀏覽器一開始要加載所有必須的 html, js, css。所有的頁面內容都包含在這個所謂的主頁面中。但在寫的時候，還是會分開寫（頁面片段），然后在交互的時候由路由程序動態載入，單頁面的頁面跳轉，僅刷新局部資源。多應用于 pc 端。

多頁面（MPA），就是指一個應用中有多個頁面，頁面跳轉時是整頁刷新

單頁面的優點：

用戶體驗好，快，內容的改變不需要重新加載整個頁面，基于這一點 spa 對服務器壓力較小；前后端分離；頁面效果會比較炫酷（比如切換頁面內容時的專場動畫）。

單頁面缺點：

不利于 seo；導航不可用，如果一定要導航需要自行實現前進、后退。（由于是單頁面不能用瀏覽器的前進后退功能，所以需要自己建立堆棧管理）；初次加載時耗時多；頁面復雜度提高很多。

21.v-if 和 v-for 的優先級

答：當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先級，這意味著 v-if 將分別重復運行于每個 v-for 循環中。所以，不推薦 v-if 和 v-for 同時使用。

如果 v-if 和 v-for 一起用的話，vue 中的的會自動提示 v-if 應該放到外層去。

22.assets 和 static 的區別

答：相同點：assets 和 static 兩個都是存放靜態資源文件。項目中所需要的資源文件圖片，字體圖標，樣式文件等都可以放在這兩個文件下，這是相同點

不相同點：assets 中存放的靜態資源文件在項目打包時，也就是運行 npm run build 時會將assets 中放置的靜態資源文件進行打包上傳，所謂打包簡單點可以理解為壓縮體積，代碼格式化。而壓縮后的靜態資源文件最終也都會放置在 static 文件中跟著 index.html 一同上傳至服務器。static 中放置的靜態資源文件就不會要走打包壓縮格式化等流程，而是直接進入打包好的目錄，直接上傳至服務器。因為避免了壓縮直接進行上傳，在打包時會提高一定的效率，但是 static 中的資源文件由于沒有進行壓縮等操作，所以文件的體積也就相對于 assets 中打包后的文件提交較大點。在服務器中就會占據更大的空間。

建議：將項目中 template 需要的樣式文件 js 文件等都可以放置在 assets 中，走打包這一流程。減少體積。而項目中引入的第三方的資源文件如 iconfoont.css 等文件可以放置在 static中，因為這些引入的第三方文件已經經過處理，我們不再需要處理，直接上傳。

23.vue 常用的修飾符

答：.stop：等同于 JavaScript 中的 event.stopPropagation()，防止事件冒泡；

.prevent：等同于 JavaScript 中的 event.preventDefault()，防止執行預設的行為（如果事件可取消，則取消該事件，而不停止事件的進一步傳播）；.capture：與事件冒泡的方向相反，事件捕獲由外到內；

.self：只會觸發自己范圍內的事件，不包含子元素；

.once：只會觸發一次。

24.vue 的兩個核心點

答：數據驅動、組件系統

數據驅動：ViewModel，保證數據和視圖的一致性。

組件系統：應用類 UI 可以看作全部是由組件樹構成的。

25.vue 和 jQuery 的區別

答：jQuery 是使用選擇器（$）選取 DOM 對象，對其進行賦值、取值、事件綁定等操作，其實和原生的 HTML 的區別只在于可以更方便的選取和操作 DOM 對象，而數據和界面是在一起的。比如需要獲取 label 標簽的內容：$("lable").val();, 它還是依賴 DOM 元素的值。

Vue 則是通過 Vue 對象將數據和 View 完全分離開來了。對數據進行操作不再需要引用相應的DOM 對象，可以說數據和 View 是分離的，他們通過 Vue 對象這個 vm 實現相互的綁定。這就是傳說中的 MVVM。

26. 引進組件的步驟

答: 在 template 中引入組件；

在 script 的第一行用 import 引入路徑；

用 component 中寫上組件名稱。

27.delete 和 Vue.delete 刪除數組的區別

答：delete 只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。

Vue.delete 直接刪除了數組改變了數組的鍵值。

28.SPA 首屏加載慢如何解決

答：安裝動態懶加載所需插件；使用 CDN 資源。

29.Vue-router 跳轉和 location.href 有什么區別

答：使用 location.href='/url'來跳轉，簡單方便，但是刷新了頁面；

使用 history.pushState('/url')，無刷新頁面，靜態跳轉；

引進 router，然后使用 router.push('/url') 來跳轉，使用了 diff 算法，實現了按需加載，減少了 dom 的消耗。

其實使用 router 跳轉和使用 history.pushState() 沒什么差別的，因為 vue-router 就是用了history.pushState()，尤其是在 history

30. vue slot

答：簡單來說，假如父組件需要在子組件內放一些 DOM，那么這些 DOM 是顯示、不顯示、在哪個地方顯示、如何顯示，就是 slot 分發負責的活。

31. 你們 vue 項目是打包了一個 js 文件，一個 css 文件，還是有多個文件？

答：根據 vue-cli 腳手架規范，一個 js 文件，一個 CSS 文件。

32.Vue 里面 router-link 在電腦上有用，在安卓上沒反應怎么解決？

答：Vue 路由在 Android 機上有問題，babel 問題，安裝 babel polypill 插件解決。

33.Vue2 中注冊在 router-link 上事件無效解決方法

答：使用 @click.native。原因：router-link 會阻止 click 事件，.native 指直接監聽一個原生事件。

34.RouterLink 在 IE 和 Firefox 中不起作用（路由不跳轉）的問題

答: 方法一：只用 a 標簽，不適用 button 標簽；方法二：使用 button 標簽和Router.navigate 方法

35.axios 的特點有哪些

答：從瀏覽器中創建 XMLHttpRequests；

node.js 創建 http 請求；

支持 Promise API；

攔截請求和響應；

轉換請求數據和響應數據；

取消請求；

自動換成 json。

axios 中的發送字段的參數是 data 跟 params 兩個，兩者的區別在于 params 是跟請求地址一起發送的，data 的作為一個請求體進行發送params 一般適用于 get 請求，data 一般適用于 post put 請求。

36. 請說下封裝 vue 組件的過程？

答：1. 建立組件的模板，先把架子搭起來，寫寫樣式，考慮好組件的基本邏輯。(os：思考 1 小時，碼碼 10 分鐘，程序猿的準則。)

. 準備好組件的數據輸入。即分析好邏輯，定好 props 里面的數據、類型。

. 準備好組件的數據輸出。即根據組件邏輯，做好要暴露出來的方法。

. 封裝完畢了，直接調用即可

37.params 和 query 的區別

答：用法：query 要用 path 來引入，params 要用 name 來引入，接收參數都是類似的，分別是 this.$route.query.name 和 this.$route.params.name。

url 地址顯示：query 更加類似于我們 ajax 中 get 傳參，params 則類似于 post，說的再簡單一點，前者在瀏覽器地址欄中顯示參數，后者則不顯示

注意點：query 刷新不會丟失 query 里面的數據

params 刷新會丟失 params 里面的數據。

38.vue 初始化頁面閃動問題

答：使用 vue 開發時，在 vue 初始化之前，由于 div 是不歸 vue 管的，所以我們寫的代碼在還沒有解析的情況下會容易出現花屏現象，看到類似于 {{message}} 的字樣，雖然一般情況下這個時間很短暫，但是我們還是有必要讓解決這個問題的。

首先：在 css 里加上 [v-cloak] {

display: none;

}。

如果沒有徹底解決問題，則在根元素加上 style="display: none;" :style="

{display:'block'}"

39.vue 更新數組時觸發視圖更新的方法

答: push()；pop()；shift()；unshift()；splice()； sort()；reverse()

40.vue 常用的 UI 組件庫

答：Mint UI，element，VUX

41. Vue的生命周期？

beforeCreate 、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed（創建、掛載、更新、卸載）掛載中可以操作DOM，創建中不能操作DOM；常用掛載或者創建生命周期就行了

42.虛擬DOM和DIFF算法？

將DOM抽象為虛擬DOM, 然后通過新舊虛擬DOM 這兩個對象的差異(Diff算法),最終只把變化的部分重新渲染,提高渲染效率的過程;

diff 是通過JS層面的計算，返回一個patch對象，即補丁對象，在通過特定的操作解析patch對象，完成頁面的重新渲染

43.vue2和vue3原理？

1. vue2和vue3雙向數據綁定原理發生了改變

vue2 的雙向數據綁定是利用ES5 的一個 API Object.definePropert()對數據進行劫持結合發布訂閱模式的方式來實現的。

vue3 中使用了 es6 的 ProxyAPI 對數據代理。

相比于vue2.x，使用proxy的優勢如下

defineProperty只能監聽某個屬性，不能對全對象監聽

可以省去for in、閉包等內容來提升效率（直接綁定整個對象即可）

可以監聽數組，不用再去單獨的對數組做特異性操作 vue3.x可以檢測到數組內部數據的變化

2、默認進行懶觀察（lazy observation）

在 2.x 版本里，不管數據多大，都會在一開始就為其創建觀察者。當數據很大時，這可能會在頁面載入時造成明顯的性能壓力。3.x 版本，只會對「被用于渲染初始可見部分的數據」創建觀察者，而且 3.x 的觀察者更高效。

3、更精準的變更通知

比例來說：2.x 版本中，使用 Vue.set 來給對象新增一個屬性時，這個對象的所有 watcher 都會重新運行；3.x 版本中，只有依賴那個屬性的 watcher 才會重新運行。

4、vue3新加入了TypeScript以及PWA的支持

5、vue2和vue3組件發送改變

44.生命周期鉤子的一些使用方法：

1.beforecreate:可以在加個loading事件，在加載實例是觸發

2.created:初始化完成時的事件寫在這里，如在這結束loading事件，異步請求也適宜在這里調用

3.mounted:掛載元素，獲取到dom節點

4.updated:如果對數據統一處理，在這里寫上相應函數

5.beforeDestroy:可以一個確認停止事件的確認框

6.nextTick:更新數據后立即操作dom

45.開發中常用的指令有哪些?

v-model:一般用在表達輸入，很輕松的實現表單控件和數據的雙向綁定

v-html：更新元素的innerHTML

v-show與v-if：條件渲染，注意二者區別

v-on:click:可以簡寫為@click,@綁定一個事件。如果事件觸發了，就可以指定事件的處理函數

v-for：基于源數據多次渲染元素或模板

v-bind:title=”msg”簡寫：title="msg"

我們開發Web應用的時候，會用到大量的js、css、image、html等靜態資源資源。

靜態資源映射

默認情況下，我們只需要將靜態資源放在一下幾個目錄中就可以直接通過url在瀏覽器中訪問了。

/META-INF/resources/
/resources/
/static/
/public/

如果這四個目錄中有相同的靜態資源文件，那么優先訪問哪個目錄下面的資源啊？

靜態資源的默認訪問優先級：/META-INF/resources/>/resources/>/static/>/public/

在四個目錄中都放一個static.html的文件，每個html文件中都說明自己所在的目錄，訪問結果如下：

SpringBoot關于靜態資源的訪問涉及到了application.properties中的兩個屬性：

# 默認值為 /*
spring.mvc.static-path-pattern=#這里設置靜態資源匹配的url-pattern
# 默認值為 classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/ 
spring.resources.static-locations=#這里設置要指向的路徑，多個使用英文逗號隔開，在前面的優先級高

此時，我們豁然開朗，知道默認情況下靜態資源為什么放在/META-INF/resources/、/resources/、/static/、/public/這四個目錄了，還有這四個目錄訪問的優先級是怎么來的了。

修改靜態資源映射的方法：

我們可以修改這兩個屬性來改變靜態資源的映射，比如我們的所有靜態資源都在mystatic目錄中，并且我們希望訪問靜態資源的的url都帶有/mystatic/這個目錄前綴:

spring.mvc.static-path-pattern=/mystatic/*
spring.resources.static-locations=classpath:mystatic/

在resources資源目錄中創建一個mystatic目錄，在該目錄下面創建一個static.html文件，訪問結果如下：

繼承WebMvcConfigurerAdapter類，并且重寫addResourceHandlers方法就行，該操作與上面的方法得到的效果是一樣的

注意：還可以設置外部磁盤目錄，設置方式不變，格式如下：file:d/mystatic/。

WebJars

WebJars將前端資源（css,js,image,html等等）打包到jar中，然后使用基于JVM的包管理器（比如 Maven、Gradle 等）管理前端依賴的方案。SpringBoot中也可以通過WebJars來訪問靜態資源。

SpringBoot默認將/webjars/**映射到 classpath:/META-INF/resources/webjars/。

/webjars/**：表示/webjars/目錄下的所有文件，及存在其目錄下的jar包中的所有文件。

所以默認情況下我們需要訪問WebJars中的資源，需要將其jar包放到classpath:/META-INF/resources/webjars/目錄中。

我們來使用一下WebJars:

在pom.xml中引入jquery的WebJars，默認會被放在classpath:/META-INF/resources/webjars/目錄中

 <dependency>
 <groupId>org.webjars</groupId>
 <artifactId>jquery</artifactId>
 <version>2.1.1</version>
 </dependency>

在前端webjars.html頁面中引入jquery

<script src="/webjars/jquery/2.1.1/jquery.js"></script>

訪問頁面webjars.html，查看源碼，可以鏈接到jquery.js的內容

版本號統一管理

如果我們有很多頁面都是用了WebJars中的資源，而我們現在要升級WebJars的版本，豈不是要在每個頁面中都改動一下，這樣很麻煩啊，有沒有簡單的方法啊。此時，我們可以進行版本號統一管理。

在pom.xml中引入jquery的WebJars的基礎上添加：

 <dependency>
 <groupId>org.webjars</groupId>
 <artifactId>webjars-locator</artifactId>
 </dependency>

添加版本號統一管理的控制器

在頁面中引入jquery的方式如下：

<script src="/webjarslocator/jquery/jquery.js"></script>

靜態資源版本管理

當我們資源內容發生變化時，由于瀏覽器緩存，用戶本地的靜態資源還是舊的資源，為了防止這種情況導致的問題，我們可能會手動在請求url的時候加個版本號或者其他方式。

<script type="text/javascript" src="/lavor.js?v=1.1"></script>

SpringMVC提供了兩種方式可以幫助我們很容易地解決這類問題。

MD5方式

修改application.properties配置文件

spring.resources.chain.strategy.content.enabled=true
spring.resources.chain.strategy.content.paths=/**

添加@ControllerAdvice注解，返回ResourceUrlProvider的對象，這樣所有通過控制器返回的模板頁面（jsp,thymeleaf,freeemarker等）就都可以在頁面中使用該對象了

在控制器返回的模板頁面中，添加以下信息，我們這里的返回頁面時jsp頁面，lavor.js是webapp目錄下面的js腳本文件。

<script src="${urls.getForLookupPath('/lavor.js') }"></script>

通過瀏覽器訪問控制器的請求url，查看頁面源代碼

<script src="/lavor-fdfa0502716d517c6cad4f2536aa02a1.js"></script>

請求/lavor-fdfa0502716d517c6cad4f2536aa02a1.js，我們MD5配置的paths=/**，所以SpringMVC會嘗試url中是否包含-，如果包含會去掉后面這部分，然后去映射的目錄（如webapp根目錄，上面提到的四大靜態映射目錄）查找/lavor.js文件，如果能找到就返回。

版本號方式

修改application.properties配置文件，注意MD5方式中的是content，這里是fixed

spring.resources.chain.strategy.fixed.enabled=true
#版本號處理的路徑
spring.resources.chain.strategy.fixed.paths=/**
# 版本號，可以為所處理路徑中的資源加上/v1.1目錄前綴
spring.resources.chain.strategy.fixed.version=v1.1

添加@ControllerAdvice注解，返回ResourceUrlProvider的對象，這樣所有通過控制器返回的模板頁面（jsp,thymeleaf,freeemarker等）就都可以在頁面中使用該對象了

在控制器返回的模板頁面中，添加以下信息，我們這里的返回頁面時jsp頁面，lavor.js是webapp目錄下面的js腳本文件.

<script src="${urls.getForLookupPath('/lavor.js') }"></script>

通過瀏覽器訪問控制器的請求url，查看頁面源代碼

<script src="/v1.1/lavor.js"></script>

請求/v1.1/lavor.js，會查看v1.1是不是版本號，如果是就去掉前綴目錄，直接查找/lavor.js。

注意：我們發現如果添加了webapp目錄，那么該目錄也可以存放靜態資源，并且默認情況下訪問優先級比/META-INF/resources/還要高。

tml中img圖片進行等比例縮放的實例代碼

img圖片等比例縮放的方法

HTML中，要修改img元素定義的圖片的大小，且是等比例縮放，不改變寬和高的比值，那么可以采用只設置img元素屬性中width和height中的任何一個，不要同時設置兩個即可實現img圖片的等比例縮放效果。下面將通過兩個實例來分別實現這兩種方法。

width等比例縮放img圖片實例代碼，及在線編輯器

為了可以與原圖片的大小進行對照，下面的實例使用HTML的注釋符號將等比例縮放的代碼進行了注釋，第一遍運行完之后，可以將第一行的代碼刪除（在線刪除，因為這是一個在線編輯器），然后將第二行代碼中的注釋符號去除掉，接著再運行一遍看看等比例縮放的效果：

<img src='../../static/img/test.jpg'>
<!-- <img src='../../static/img/test.jpg' width="50%"> -->

height等比例縮放實例代碼

這邊的代碼與上面的幾乎一樣，只是將width的屬性修改成為height的屬性，如下：

<img src='../../static/img/test.jpg'>
<!-- <img src='../../static/img/test.jpg' height="50%"> -->

提示：如上面的兩個實例，將width和height分別設置為50%都可以等比例縮放圖片，但得到的圖片的大小不一定一樣。

等比例縮放的另外一種方法

當然了，如果要通過同時設置img圖片的width和height兩個屬性來達到等比例縮放圖片的話也是可以的，但是要先計算一下圖片的寬度和高度的比例，之后再等比例縮放。

來源：笨鳥工具-璞玉天成，大器晚成

原文：html img圖片等比例縮放的代碼 | HTML教程

免責聲明：內容僅供參考，不保證正確性

在線咨詢

上一篇：初識html屬性pointer-events
下一篇：使用python自動發郵件-163、QQ、outlo

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商