作者 | 紅顏禍水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 文件：
<code>修改 proxyTable: {
'/api':{ //使用 /api 來代替 "http://localhost:8082"
target:'http://localhost:8082', //源地址
changeOrigin:true, //改變源
pathRewrite:{
'^/api':'http://localhost:8082' //路徑重寫
}
}
},/<code>修改完之後的跨越請求就可以直接寫成 /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
<code>import Axios from 'axios'
Vue.propertype.$axios = Axios;/<code>
使用 axios 發送 get 請求
<code>this.$axios.get('/user?stu_id=1002').then(function(resp) {
console.log(resp);
}).catch(function(err) {
console.log(err);
});/<code>使用 axios 發送 post 請求 post原生請求在後端是接收不到參數的，所有有兩種解決方案，這裡只寫一種！第二種解決方案是用 QS。
<code>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);
});/<code>
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 的比特幣分叉，準備用新分叉解決比特幣網絡的舊問題
閱讀更多 CSDN 的文章
