20 道必看的 Vue 面試題 - 原力計劃

者 | 紅顏禍水nvn

責編 | 唐小引

出品 | CSDN 原力計劃

1. 什么是 MVVM？

MVVM 是 Model-View-ViewModel 的縮寫，MVVM 是一種設計思想。Model 層代表數據模式，也可以在 Model 中定義數據修改和操作的業務邏輯；View 代表 UI 組件，它負責將數據模型轉化為 UI 展現出來，ViewModel 是一個同步 View 和 Model 的對象。

2. 父組件向子組件傳值的方法？

父組件傳遞的數據子組件用 props 方法接收。

子組件通過兩種方式接收：可以傳遞任何類型（數組，對象，各種數據類型等等）

props:[‘title’,‘likes’,‘isPublished’,‘author’]；
props:{title:String,likes:Number}

詳細介紹看這篇：Vue 父組件向子組件傳值

https://blog.csdn.net/qq_34928693/article/details/80539350

3. 子組件向父組件傳值的方法？

子組件向父組件傳值用 this.$emit(key,value) ，父組件接收的時候需要在父組件中創建的子組件的標簽中綁定 Key，格式:@Key=“方法名”，父組件聲明這個方法，方法帶參數，這個參數就是子組件傳遞的 Value。

詳細介紹看這篇：Vue子組件向父組件傳值

https://blog.csdn.net/sisi_chen/article/details/81635216

4. Vuex 是什么？哪種功能場景使用它？

Vuex 是專門為 Vue.js 設計的狀態管理模式，它采用集中式儲存管理 Vue 應用中所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。

當項目龐大的時候使用它：

需要動態的注冊響應式數據；
需要命名空間 namespace 來管理組織我們的數據；
希望通過插件，來更改記錄；方便測試；以上這些需要和希望，都是我們 vuex 需要做的一些事情。

5. Vuex 有哪幾種屬性？

state：基本數據
getters：從基本數據派生的數據
mutations：提交更改數據的方法，同步！
actions：像一個裝飾器，包裹 mutations，使之可以異步。
modules：模塊化 Vuex。

6. 如何讓 CSS 旨在當前組件中起作用？

當前組件的 < style>標簽修改為< style scoped>

7. 請列舉出3個 Vue 中常見的生命周期鉤子函數。

beforeCreate：Vue 實例的掛載元素 $el 和數據對象 data 都為未定義，還未初始化。
created：vue 實例的數據對象 data 有值了，$el 沒有。
beforeMount：vue 實例的 $el 和 data 都初始化了，但還是虛擬的 dom 節點，具體的 data.filter 還未替換掉。
mounted：vue 實例掛載完成，data.filter 成功渲染
beforeUpdate：data 更新時觸發。
updated：data 更新時觸發。
beforeDestroy：組件銷毀時觸發。
destroyed：組件銷毀時觸發，vue 實例解除了事件監聽以及 dom 的綁定（無響應了），但 DOM 節點依舊存在。

8. Vue 生命周期總共有幾個階段？

beforeCreate 創建前
created 創建后
beforeMount 載入前
mounted 載入后
beforeUpdate 更新前
updated 更新后
beforeDestroy 銷毀前
destroyed 銷毀后

9. 說出至少 4 種 Vue 當中的指令和它的用法？

v-html：渲染文本（能解析 HTML 標簽）
v-text：渲染文本（統統解析成文本）
v-bing：綁定數據
v-once：只綁定一次
v-model：綁定模型
v-on：綁定事件
v-if v-shou：條件渲染

10. vue-cli 工程中常用的 npm 命令有哪些？

npm install：下載 node_modules 資源包的命令
npm run dev：啟動 vue-cli 開發環境的 npm 命令
npm run build：vue-cli 生成生產環境部署資源的 npm 命令

11. 請說出 vue-cli 工程中每個文件夾和文件的用處。

build 文件夾：存放 webpack 的相關配置以及腳本文件，在實際開發過程中只會偶爾用到 webpack.base.conf.js，配置 less、babel 等。
config 文件夾：常用到此文件夾下的 config.js (index.js) 配置開發環境的端口號，是否開啟熱加載或者設置生產環境的靜態資源相對路徑、是否開啟 gzip 壓縮、npm run build 命令打包生成靜態資源的名稱和路徑等。
node_modules：存放 npm install 命令下載的開發環境和生產環境的各種依賴。
src文件夾：工程項目的源碼以及資源、包括頁面圖片、路由組件、路由配置、vuex、入口文件等。
其他文件：定義的一些項目信息，說明等等。

12. vue-router 路由的兩種模式。

hash 模式：

# 后面的 hash 值的變化，并不會導致瀏覽器向服務器發出請求，瀏覽器不發出請求，也就不會刷新瀏覽器，每次 hash 值的變化會觸發 hashchange 事件。

history 模式：

利用了 HTML5 中新增的 pushState 和 replaceState 方法。這兩個方法應用于瀏覽器的歷史記錄棧，在當前已有的 back、forward、go 的基礎之上，它們提供了對歷史記錄進行修改的功能。只是當它們執行修改時，雖然改變了當前的 URL，但瀏覽器不會立即向后端發送請求。

13. 如何解決 Vue 中的 ajax 跨域問題？

找到 config 文件夾中的 index.js 文件：

修改 proxyTable: {
'/api':{ //使用 /api 來代替 "http://localhost:8082"
target:'http://localhost:8082', //源地址
changeOrigin:true, //改變源
pathRewrite:{
'^/api':'http://localhost:8082' //路徑重寫
}
}
},

修改完之后的跨越請求就可以直接寫成 /api/login 等等了。

14. Vue 打包命令是什么？Vue 打包后會生成哪些文件？

npm run build ：Vue 打包命令
Vue 打包后會在當前工作目錄下生成一個 dist 文件夾，文件夾中會有 static 靜態文件以及 index.html 初始頁面。

15. Vue 如何優化首屏加載速度？

異步路由加載
不打包庫文件
關閉 sourcemap
開啟 gzip 壓縮

16. scss 是什么？

SCSS 是 Sass 3 引入的新語法，其語法完全兼容 CSS3，并且繼承了 Sass 的強大功能，唯一不同之處是 SCSS 需要使用分號和花括號而不是換行和縮進，SCSS 對空白符號不敏感。

17. axios 是什么？怎么使用？

axios 是一個基于 promise 的 HTTP 庫，可以發送 get，post 請求，正是由于 Vue、React 的出現，促使了 axios 輕量級庫的出現

特定：

可以在瀏覽器中發送 XMLHttpRequest 請求
可以在 node.js 發送 http 請求
支持 Promise API
攔截請求和響應
轉換請求和響應
轉換請求數據和響應數據
能夠取消請求
自動轉化 JSON 格式
客戶端支持保護安全免受 XSRF 攻擊

如何使用：

npm install --save axios 安裝axios
在入口 main.js 中導入 axios

import Axios from 'axios'

Vue.propertype.$axios = Axios;

使用 axios 發送 get 請求

this.$axios.get('/user?stu_id=1002').then(function(resp) {
console.log(resp);
}).catch(function(err) {
console.log(err);
});

使用 axios 發送 post 請求 post原生請求在后端是接收不到參數的，所有有兩種解決方案，這里只寫一種！第二種解決方案是用 QS。

var params = new URLSearchParams;
params.append('name','孫悟空');
params.append('age',22);
let that = this;
this.$axios.post('http://localhost:8082/user',params).then(function(resp) {
console.log(resp.data.users);
that.ausers = data.data.users;
}).catch(function(err) {
console.log(err);
});

18. vue-router 是什么？它有哪些組件？

vue-router 是 Vue.js 官方的路由管理器，它和 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。包含的功能有：

嵌套的路由、是圖標
模塊化的、基于組件的路由配置
路由參數、查詢、通配符
基于 Vue.js 過度系統的視圖過渡效果
細粒度的導航控制
帶有自動激活的 CSS class 的連接
HTML 5 歷史模式或 hash 模式，在 IE9 中自動降級
自定義的滾動條行為

vue-router 組件：

< router-link to=""> 路由的路徑
< router-link :to="{name:’‘l路由名’}"> 命名路由
< router-view> 路由的顯示

19. 怎么定義 vue-router 的動態路由？怎么獲取傳遞過來的動態參數？

在 router 目錄下的 index.js 文件中，對 path 屬性加上 /:id。使用 router 對象的 params.id，例如：this.$route.params.id。

20. MVVM 和其他框架（jQuery）的區別是什么？哪些場景適合？

Vue 是數據驅動，通過數據來顯示視圖層而不是節點操作。
處理數據交互的時候挺適合 MVVM 設計模式的。

本文為CSDN博主「紅顏禍水nvn」的原創文章，CSDN 官方經授權發布。

原文鏈接：https://blog.csdn.net/qq_43647359/article/details/104774302

歡迎更多的開發者朋友加入 CSDN 原力計劃！我們將用全新的方式來釋放更多的流量，讓優質、有深度、豐富有趣的內容得到精準的流量扶持，同時也幫助創作者和粉絲有更多互動和交流。點擊下方圖片了解詳情。

?比爾·蓋茨退出微軟公司董事會；蘋果 WWDC、微軟 Build 大會均改為線上舉辦；Rust 1.42.0 發布| 極客頭條

?11 國股市熔斷，“禍及”程序員？！

?2.2版本發布！TensorFlow推出開發者技能證書

?Soul App 高管被捕，惡意舉報導致競品被下架

?2020 年最新版 68 道Redis面試題，20000 字干貨，趕緊收藏起來備用！

?最近一個名為 BTCU 的比特幣分叉，準備用新分叉解決比特幣網絡的舊問題

為一名Vue.js的忠實用戶，我想有必要寫點文章來歌頌這一門美好的語言了，下面將給大家介紹Vue.js，希望能夠激發你對Vue.js的興趣。

什么是Vue：

Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。

Vue的吸引力：

我喜歡 Vue 的一點是它吸取了其它框架的優秀之處，并有條不紊的將它們組合在一起。比如:

具有響應式組件化的虛擬 DOM 只提供視圖層， props 和類 Redux 狀態管理與 React 類似。
條件渲染和服務與 Angular 類似。
受到 Polymer 簡潔及性能方面的啟發，Vue 提供了類似的模式，比如 HTML，樣式以及 JavaScript 組合在一起。

Vue 相比其它框架的優勢有: 簡潔，提供更多語義化的 API ，比 React 的表現稍好，不像 Polymer 那樣使用 polyfill，相比 Angular 有獨立的視圖。

在對Vue.js 有初步的認識的情況下，我們來說說今天的重點吧：Vue.js教程：渲染，指令，事件。

首先，當然是從 "Hello, world!" 的例子開始啦。運行如下示例：

如果你熟悉 React，你會發現兩者有很多相同之處。通過 mustache 模板以及使用一個變量，可以避免在內容中使用 JavaScript，但是不同的一點是我們直接書寫 HTML 而不是 JSX 。雖然 JSX 易于使用，但是我無需再花時間把 class 改成 className，等等。這樣啟動及運行會更輕量。

現在嘗試一下我喜歡的 Vue 的特性: 循環以及條件渲染。

條件渲染

假如有一組元素，類似導航條，我打算重復利用。合理的做法是放在數組中動態的更新。使用普通的 JS (需要 Babel) ，我們會這樣做: 創建一個數組，然后創建一個空字符串，用來存放使用 <li>包裹的元素，再用 <ul>包裹所有內容，使用 innerHTML 方法添加到 DOM 中：

這種方法是可行的，但是有點麻煩。現在試一試 Vue 的 v-for循環：

非常簡潔。如果你熟悉 Angular，你對此應該不陌生。我發現這種條件渲染的方式簡單明了。如果你需要更新內容，修改起來也很簡單。

另外一種好的方式是使用 v-model 進行動態綁定。試試下面的例子：

在這個 demo 中你會注意到兩點。首先，可以直接向書中打字并且動態更新文本。Vue 通過 v-model非常方便的實現了 <textarea>和 <p>的數據綁定。

其次，你可能注意到我們將數據放在了函數中。在這個例子中，不這樣做也可以。我們可以和之前的例子一樣放在一個對象中。但是這種方式只能在 Vue 實例中使用，在程序中也是如此 (所以，在組件中不要使用這種方法)。在一個 Vue 實例中這樣使用是可以的，但是我們需要在子組件中分享數據。最好一開始就把數據放在函數中，因為使用組件時我們希望每個組件都有自己的狀態。

并不是只有簡單的輸入綁定，甚至 v-if可以用 v-show替換，有 v-show的元素不是銷毀或重建組件，而是始終保持在 DOM 中，切換可見性。

Vue 提供了很多指令, 下面是我經常使用的一些指令。很多指令都有縮寫，所以我會一起列出來。在之后的教程中，我們主要使用指令縮寫，所以最好先熟悉一下下面的表格。

也有非常好的事件修飾符和其他 API：

加快開發的方法：

你也可以自定義指令。

我們會在稍后的例子中使用這些方法!

事件處理

數據綁定雖然很好，但是沒有事件處理也無法發揮更大的用途，因此接下來就試一試! 這是我喜歡的一部分。我們將使用上面的綁定和監聽器來監聽 DOM 事件。

在應用程序中有幾種不同的方法來創建可用的方法。比如在普通的 JS 中，你可以選擇函數名，但是實例方法直觀地稱為 methods！

我們創建了一個名為 increment的方法并且你會注意到函數自動綁定了 this，會指向實例及組件中的 data 。我喜歡這種自動綁定，不需要通過 console.log查看 this的指向。我們使用縮寫 @click綁定 click 事件。

Methods 并不是創建自定義函數的唯一方式。你也可以使用 watch。兩者的區別是 methods 適合小的、同步的計算，而 watch對于多任務、異步或者響應數據變化時的開銷大的操作是有利的。我經常在動畫中使用 watch 。

讓我們看看如何傳遞事件并且進行動態地樣式綁定。如果你記得上面的表格，你可以使用 :來代替 v-bind，因此我們可以很簡單地通過 :style以及傳遞狀態，或者 :class綁定樣式 (以及其他屬性)。這種綁定確實有很多用途。

在以下的例子中，我們使用 hsl()，因為 hue calculated as a circle of degrees of color，所以每一個位置都有色值。這種方法很有用，因為任何數值都有效。因此，當我們在屏幕上移動鼠標，背景顏色將相應更新。我們使用 ES6 模板字面量。

你應該看到我們甚至不需要傳遞 @click事件，Vue 將它作為方法的參數(這里顯示為 e)自動傳遞。

此外，原生方法也可以使用，比如 event.clientX，并且很容易關聯 this實例。在元素的樣式綁定中，CSS 屬性需要使用駝峰命名。在這個例子中，你可以看到 Vue 的簡單明了。

實際上我們甚至不需要創建一個方法，如果事件足夠簡單，我們也可以在組件中直接增加計數器的值：

我們沒有使用任何方法而是直接在 @click事件中修改狀態。而且我們也可以在其中添加一點邏輯判斷(因為在購物網站中不會有小于零的東西)。一旦這種邏輯過于復雜，即使可讀性下降，最好還是寫到一個方法中。這是個很好的選擇。

對編程感興趣，想了解更多的編程知識，關注頭條號一起玩轉編程

更多編程資訊、干貨持續更新中~

紹

之前一段時間由于工作很忙，沒有時間繼續學習Vue，今天算是繼續對之前的學習進行補充了，今天要學習的便是Vue的條件渲染和列表渲染，我們將討論if、if-else、if-else-if，show等。在列表渲染中，我們將討論如何使用for循環。

條件渲染

對于條件渲染，其概念就是滿足條件的渲染界面輸出，在Vue中借助if，if-else，if-else-if，show等的幫助下完成條件檢查,我們首先通過一個實例來解釋條件渲染的細節

瀏覽器效果

在上面的例子中，我們創建了一個按鈕和兩個帶有消息的h1標簽。聲明了一個名為show的變量，并將其初始化為值true。它顯示在按鈕附近。在單擊按鈕時，我們調用方法showdata，它切換變量show的值。這意味著在單擊按鈕時，變量show的值將從true變為false，false變為true。我們已將if分配給h1標記，如以下代碼段所示。

<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
<h1 v-if = "show">這是H1標簽</h1>

現在它將做的是，它將檢查變量show的值，如果它是真的，將顯示h1標簽。單擊按鈕并在瀏覽器中查看，因為show變量的值更改為false，h1標記不會顯示在瀏覽器中。僅在show變量為true時顯示。

以下是瀏覽器中的顯示。

我們看下瀏覽器中dom的變化情況

變為false時，h1已經不見了

下面是使用了if-else的示例

主要就是這段代碼：

<h1 v-if="show">這是H1標簽</h1>
<h2 v-else>這是H2標簽</h2>

現在，如果show為true，將顯示“這是H1標簽”，如果為false，則顯示“這是H2標簽”。這是我們將在瀏覽器中獲得的內容。

點擊按鈕后變化

接下來是v-show的示例

v-show的行為與v-if相同。它還根據分配給它的條件顯示和隱藏元素。v-if和v-show之間的區別在于v-if如果條件為false則從DOM中刪除HTML元素，如果條件為真則將其添加回來。而v-show隱藏了元素，如果條件為false，則display：none。如果條件為真，它會顯示元素返回。因此，元素始終存在于dom中。

列表渲染

v-for

現在讓我們使用v-for指令進行列表渲染

名為items的變量聲明為數組。在方法中，有一個名為showinputvalue的方法，它被分配給帶有水果名稱的輸入框。在該方法中，使用以下代碼將輸入文本框內的水果添加到數組中

showinputvalue : function(event) {
 this.items.push(event.target.value);
}

我們使用v-for來顯示輸入的水果，如下面的代碼片段所示。V-for迭代數組中存在的值。

<ul>
 <li v-for = "a in items">{{a}}</li>
</ul>

要使用for循環迭代數組，我們必須使用v-for = "a in items"，其中a保存數組中的值并顯示直到所有項都完成。我們看下瀏覽器輸出：

嘗試輸入一些水果名稱：

Dom代碼對比

如果我們希望顯示數組的索引，則使用以下代碼完成：

主要代碼如下

<li v-for = "(a, index) in items">{{index}}--{{a}}</li>

瀏覽器效果如下

總結

以上就是對Vue中的條件渲染和列表渲染的介紹，非常的簡單，但是越是簡單的東西越是要打撈基礎，就像是學習編程語言的語法一樣，希望對和我一樣初學Vue的小伙伴有一些幫助，共同進步！

在線咨詢

上一篇：HTML+CSS 常用的網頁布局
下一篇：圖片輪播的實現：HTML+CSS+ JavaScript

您的項目需求

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

整合營銷服務商

20 道必看的 Vue 面試題 - 原力計劃

什么是Vue：

Vue的吸引力：

條件渲染

事件處理

紹

條件渲染

列表渲染

總結

您的項目需求