流量如水，文章就是一個瓶子，標題是瓶口，內容是瓶身。 瓶子裝水有多快依賴瓶口大小，瓶子裝水有多少依賴瓶身大小。
金三銀四必看的 Vue 面試題（含答案）
- 什麼是 MVVM?
- 父組件向子組件傳值的方法？
- 子組件向父組件傳值的方法？
- Vuex 是什麼？那種功能場景使用它？
- Vuex 有哪幾種屬性？
- 如何讓 CSS 旨在當前組件中起作用？
- 請列舉出3個 Vue 中常見的生命週期鉤子函數
- Vue 生命週期總共有幾個階段
- 說出至少4種 Vue 當中的指令和它的用法？
- vue-cli 工程中常用的 npm 命令有哪些？
- 請說出 vue-cli 工程中每個文件夾和文件的用處
- vue-router 路由的兩種模式
- 如何解決 vue 中的 ajax 跨域問題？
- vue 打包命令是什麼？vue 打包後會生成哪些文件？
- vue 如何優化首屏加載速度？
- scss 是什麼？
- axios 是什麼？怎麼使用？
- vue-router 是什麼？他有哪些組件？
- 怎麼定義 vue-router 的動態路由？怎麼獲取傳遞過來的動態參數？
- mvvm 和其他框架 （jquery）的區別是什麼？哪些場景適合？
什麼是 MVVM?
- MVVM 是 Model-View-ViewModel 的縮寫，MVVM 是一種設計思想。Model 層代表數據模式，也可以在 Model 中定義數據修改和操作的業務邏輯；View 代表 UI 組件，它負責將數據模型轉化爲 UI 展現出來，ViewModel 是一個同步 View 和 Model 的對象。
父組件向子組件傳值的方法？
- 父組件傳遞的數據子組件用 props 方法接收。
- 子組件通過兩種方式接收：可以傳遞任何類型（數組，對象，各種數據類型等等）
1. props:[‘title’,‘likes’,‘isPublished’,‘author’]；
2. props:{title:String,likes:Number}
詳細介紹看這篇——vue父組件向子組件傳值
子組件向父組件傳值的方法？
- 子組件向父組件傳值用 this.$emit(key,value) ，父組件接收的時候需要在父組件中創建的子組件的標籤中綁定 Key，格式:@Key=“方法名”，父組件聲明這個方法，方法帶參數，這個參數就是子組件傳遞的 Value
詳細介紹看這篇——vue子組件向父組件傳值
Vuex 是什麼？那種功能場景使用它？
- Vuex 是專門爲 Vue.js 設計的狀態管理模式，它採用集中式儲存管理 Vue 應用中所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
- 當項目龐大的時候使用它：
- 需要動態的註冊響應式數據；
- 需要命名空間 namespace 來管理組織我們的數據；
- 希望通過插件，來更改記錄；方便測試；以上這些需要和希望，都是我們 vuex 需要做的一些事情；
Vuex 有哪幾種屬性？
- state：基本數據
- getters：從基本數據派生的數據
- mutations：提交更改數據的方法，同步！
- actions：像一個裝飾器，包裹 mutations，使之可以異步。
- modules：模塊化 Vuex。
如何讓 CSS 旨在當前組件中起作用？
- 當前組件的 < style>標籤修改爲< style scoped>
請列舉出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 節點依舊存在。
Vue 生命週期總共有幾個階段
- beforeCreate 創建前
- created 創建後
- beforeMount 載入前
- mounted 載入後
- beforeUpdate 更新前
- updated 更新後
- beforeDestroy 銷燬前
- destroyed 銷燬後
說出至少4種 Vue 當中的指令和它的用法？
- v-html：渲染文本（能解析 HTML 標籤）
- v-text：渲染文本（統統解析成文本）
- v-bing：綁定數據
- v-once：只綁定一次
- v-model：綁定模型
- v-on：綁定事件
- v-if v-shou：條件渲染
vue-cli 工程中常用的 npm 命令有哪些？
- npm install：下載 node_modules 資源包的命令
- npm run dev：啓動 vue-cli 開發環境的 npm 命令
- npm run build：vue-cli 生成生產環境部署資源的 npm 命令
請說出 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、入口文件等。
- 其他文件：定義的一些項目信息，說明等等。
vue-router 路由的兩種模式
- hash 模式：# 後面的 hash 值的變化，並不會導致瀏覽器向服務器發出請求，瀏覽器不發出請求，也就不會刷新瀏覽器，每次 hash 值的變化會觸發 hashchange 事件。
- history 模式：利用了 HTML5 中新增的 pushState() 和 replaceState() 方法。這兩個方法應用於瀏覽器的歷史記錄棧，在當前已有的 back、forward、go 的基礎之上，它們提供了對歷史記錄進行修改的功能。只是當它們執行修改時，雖然改變了當前的 URL，但瀏覽器不會立即向後端發送請求。
如何解決 vue 中的 ajax 跨域問題？
- 找到 config 文件夾中的 index.js 文件
修改 proxyTable: {
'/api':{ //使用 /api 來代替 "http://localhost:8082"
target:'http://localhost:8082', //源地址
changeOrigin:true, //改變源
pathRewrite:{
'^/api':'http://localhost:8082' //路徑重寫
}
}
},
- 修改完之後的跨越請求就可以直接寫成 /api/login 等等了。
vue 打包命令是什麼？vue 打包後會生成哪些文件？
- npm run build ：vue打包命令
- vue 打包後會在當前工作目錄下生成一個 dist 文件夾，文件夾中會有 static 靜態文件以及 index.html 初始頁面。
vue 如何優化首屏加載速度？
- 異步路由加載
- 不打包庫文件
- 關閉sourcemap
- 開啓 gzip 壓縮
vue首屏優化加載速度看這篇https://www.jianshu.com/p/df198914331b
scss 是什麼？
- SCSS 是 Sass 3 引入的新語法，其語法完全兼容 CSS3，並且繼承了 Sass 的強大功能，唯一不同之處是 SCSS 需要使用分號和花括號而不是換行和縮進，SCSS 對空白符號不敏感。
axios 是什麼？怎麼使用？
- axios 是一個基於 promise 的 HTTP 庫，可以發送 get，post 請求，正是由於 Vue、React 的出現，促使了 axios 輕量級庫的出現
- 特定：
1. 可以在瀏覽器中發送 XMLHttpRequest 請求
2. 可以在 node.js 發送 http 請求
3. 支持 Promise API
4. 攔截請求和響應
5. 轉換請求和響應
6. 轉換請求數據和響應數據
7. 能夠取消請求
8. 自動轉化 JSON 格式
9. 客戶端支持保護安全免受 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 請i去 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);
});
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> 路由的顯示
怎麼定義 vue-router 的動態路由？怎麼獲取傳遞過來的動態參數？
- 在 router 目錄下的 index.js 文件中，對 path 屬性加上 /:id。使用 router 對象的 params.id
- 例如：this.$route.params.id
mvvm 和其他框架 （jquery）的區別是什麼？哪些場景適合？
- vue 是數據驅動，通過數據來顯示視圖層而不是節點操作
- 處理數據交互的時候挺適合 mvvm 設計模式的。