作者 | 紅顏禍水nvn

責(zé)編 | 唐小引

出品 | CSDN 原力計劃

1. 什么是 MVVM？

MVVM 是 Model-View-ViewModel 的縮寫，MVVM 是一種設(shè)計思想。Model 層代表數(shù)據(jù)模式，也可以在 Model 中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯；View 代表 UI 組件，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化為 UI 展現(xiàn)出來，ViewModel 是一個同步 View 和 Model 的對象。

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

父組件傳遞的數(shù)據(jù)子組件用 props 方法接收。

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

• props:[‘title’,‘likes’,‘isPublished’,‘a(chǎn)uthor’]；

• props:{title:String,likes:Number}

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

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

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

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

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

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

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

Vuex 是專門為 Vue.js 設(shè)計的狀態(tài)管理模式，它采用集中式儲存管理 Vue 應(yīng)用中所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。

當(dāng)項目龐大的時候使用它：

• 需要動態(tài)的注冊響應(yīng)式數(shù)據(jù)；

• 需要命名空間 namespace 來管理組織我們的數(shù)據(jù)；

• 希望通過插件，來更改記錄；方便測試；以上這些需要和希望，都是我們 vuex 需要做的一些事情。

5. Vuex 有哪幾種屬性？

• state：基本數(shù)據(jù)

• getters：從基本數(shù)據(jù)派生的數(shù)據(jù)

• mutations：提交更改數(shù)據(jù)的方法，同步！

• actions：像一個裝飾器，包裹 mutations，使之可以異步。

• modules：模塊化 Vuex。

6. 如何讓 CSS 旨在當(dāng)前組件中起作用？

當(dāng)前組件的 < style>標(biāo)簽修改為< style scoped>

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

• beforeCreate：Vue 實例的掛載元素 $el 和數(shù)據(jù)對象 data 都為未定義，還未初始化。

• created：vue 實例的數(shù)據(jù)對象 data 有值了，$el 沒有。

• beforeMount：vue 實例的 $el 和 data 都初始化了，但還是虛擬的 dom 節(jié)點，具體的 data.filter 還未替換掉。

• mounted：vue 實例掛載完成，data.filter 成功渲染

• beforeUpdate：data 更新時觸發(fā)。

• updated：data 更新時觸發(fā)。

• beforeDestroy：組件銷毀時觸發(fā)。

• destroyed：組件銷毀時觸發(fā)，vue 實例解除了事件監(jiān)聽以及 dom 的綁定（無響應(yīng)了），但 DOM 節(jié)點依舊存在。

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

• beforeCreate 創(chuàng)建前

• created 創(chuàng)建后

• beforeMount 載入前

• mounted 載入后

• beforeUpdate 更新前

• updated 更新后

• beforeDestroy 銷毀前

• destroyed 銷毀后

9. 說出至少 4 種 Vue 當(dāng)中的指令和它的用法？

• v-html：渲染文本（能解析 HTML 標(biāo)簽）

• v-text：渲染文本（統(tǒng)統(tǒng)解析成文本）

• v-bing：綁定數(shù)據(jù)

• v-once：只綁定一次

• v-model：綁定模型

• v-on：綁定事件

• v-if v-shou：條件渲染

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

• npm install：下載 node_modules 資源包的命令

• npm run dev：啟動 vue-cli 開發(fā)環(huán)境的 npm 命令

• npm run build：vue-cli 生成生產(chǎn)環(huán)境部署資源的 npm 命令

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

• build 文件夾：存放 webpack 的相關(guān)配置以及腳本文件，在實際開發(fā)過程中只會偶爾用到 webpack.base.conf.js，配置 less、babel 等。

• config 文件夾：常用到此文件夾下的 config.js (index.js) 配置開發(fā)環(huán)境的端口號，是否開啟熱加載或者設(shè)置生產(chǎn)環(huán)境的靜態(tài)資源相對路徑、是否開啟 gzip 壓縮、npm run build 命令打包生成靜態(tài)資源的名稱和路徑等。

• node_modules：存放 npm install 命令下載的開發(fā)環(huán)境和生產(chǎn)環(huán)境的各種依賴。

• src文件夾 ：工程項目的源碼以及資源、包括頁面圖片、路由組件、路由配置、vuex、入口文件等。

• 其他文件：定義的一些項目信息，說明等等。

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

• hash 模式：

# 后面的 hash 值的變化，并不會導(dǎo)致瀏覽器向服務(wù)器發(fā)出請求，瀏覽器不發(fā)出請求，也就不會刷新瀏覽器，每次 hash 值的變化會觸發(fā) hashchange 事件。

• history 模式：

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

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 打包后會在當(dāng)前工作目錄下生成一個 dist 文件夾，文件夾中會有 static 靜態(tài)文件以及 index.html 初始頁面。

15. Vue 如何優(yōu)化首屏加載速度？

• 異步路由加載

• 不打包庫文件

• 關(guān)閉 sourcemap

• 開啟 gzip 壓縮

16. scss 是什么？

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

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

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

特定：

• 可以在瀏覽器中發(fā)送 XMLHttpRequest 請求

• 可以在 node.js 發(fā)送 http 請求

• 支持 Promise API

• 攔截請求和響應(yīng)

• 轉(zhuǎn)換請求和響應(yīng)

• 轉(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)

• 能夠取消請求

• 自動轉(zhuǎn)化 JSON 格式

• 客戶端支持保護安全免受 XSRF 攻擊

如何使用：

• npm install –save axios 安裝axios

• 在入口 main.js 中導(dǎo)入 axios

import Axios from \'axios\'

Vue.propertype.$axios = Axios;

• 使用 axios 發(fā)送 get 請求

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

• 使用 axios 發(fā)送 post 請求 post原生請求在后端是接收不到參數(shù)的，所有有兩種解決方案，這里只寫一種！第二種解決方案是用 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 的核心深度集成，讓構(gòu)建單頁面應(yīng)用變得易如反掌。包含的功能有：

• 嵌套的路由、是圖標(biāo)

• 模塊化的、基于組件的路由配置

• 路由參數(shù)、查詢、通配符

• 基于 Vue.js 過度系統(tǒng)的視圖過渡效果

• 細(xì)粒度的導(dǎo)航控制

• 帶有自動激活的 CSS class 的連接

• HTML 5 歷史模式或 hash 模式，在 IE9 中自動降級

• 自定義的滾動條行為

vue-router 組件：

• < router-link to=\”\”> 路由的路徑

• < router-link :to=\”{name:’‘l路由名’}\”> 命名路由

• < router-view> 路由的顯示

19. 怎么定義 vue-router 的動態(tài)路由？怎么獲取傳遞過來的動態(tài)參數(shù)？

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

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

• Vue 是數(shù)據(jù)驅(qū)動，通過數(shù)據(jù)來顯示視圖層而不是節(jié)點操作。

• 處理數(shù)據(jù)交互的時候挺適合 MVVM 設(shè)計模式的。

本文為CSDN博主「紅顏禍水nvn」的原創(chuàng)文章，CSDN 官方經(jīng)授權(quán)發(fā)布。

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

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

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

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

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

?Soul App 高管被捕，惡意舉報導(dǎo)致競品被下架

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

?最近一個名為 BTCU 的比特幣分叉，準(zhǔn)備用新分叉解決比特幣網(wǎng)絡(luò)的舊問題