作者 | 紅顏禍水nvn

責(zé)編 | 唐小引

出品 | CSDN 原力計(jì)劃

1. 什么是 MVVM？

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

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

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

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

• 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) ，父組件接收的時(shí)候需要在父組件中創(chuàng)建的子組件的標(biāo)簽中綁定 Key，格式:@Key=“方法名”，父組件聲明這個(gè)方法，方法帶參數(shù)，這個(gè)參數(shù)就是子組件傳遞的 Value。

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

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

4. Vuex 是什么？哪種功能場(chǎng)景使用它？

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

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

• 需要?jiǎng)討B(tài)的注冊(cè)響應(yīng)式數(shù)據(jù)；

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

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

5. Vuex 有哪幾種屬性？

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

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

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

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

• modules：模塊化 Vuex。

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

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

7. 請(qǐng)列舉出3個(gè) Vue 中常見(jiàn)的生命周期鉤子函數(shù)。

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

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

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

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

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

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

• beforeDestroy：組件銷(xiāo)毀時(shí)觸發(fā)。

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

8. Vue 生命周期總共有幾個(gè)階段？

• beforeCreate 創(chuàng)建前

• created 創(chuàng)建后

• beforeMount 載入前

• mounted 載入后

• beforeUpdate 更新前

• updated 更新后

• beforeDestroy 銷(xiāo)毀前

• destroyed 銷(xiāo)毀后

9. 說(shuō)出至少 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：?jiǎn)?dòng) vue-cli 開(kāi)發(fā)環(huán)境的 npm 命令

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

11. 請(qǐng)說(shuō)出 vue-cli 工程中每個(gè)文件夾和文件的用處。

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

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

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

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

• 其他文件：定義的一些項(xiàng)目信息，說(shuō)明等等。

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

• hash 模式：

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

• history 模式：

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

13. 如何解決 Vue 中的 ajax 跨域問(wèn)題？

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

修改 proxyTable: {
\'/api\':{ //使用 /api 來(lái)代替 \"http://localhost:8082\"
target:\'http://localhost:8082\', //源地址
changeOrigin:true, //改變?cè)?br />pathRewrite:{
\'^/api\':\'http://localhost:8082\' //路徑重寫(xiě)
}
}
},

修改完之后的跨越請(qǐng)求就可以直接寫(xiě)成 /api/login 等等了。

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

• npm run build ：Vue 打包命令

• Vue 打包后會(huì)在當(dāng)前工作目錄下生成一個(gè) dist 文件夾，文件夾中會(huì)有 static 靜態(tài)文件以及 index.html 初始頁(yè)面。

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

• 異步路由加載

• 不打包庫(kù)文件

• 關(guān)閉 sourcemap

• 開(kāi)啟 gzip 壓縮

16. scss 是什么？

SCSS 是 Sass 3 引入的新語(yǔ)法，其語(yǔ)法完全兼容 CSS3，并且繼承了 Sass 的強(qiáng)大功能，唯一不同之處是 SCSS 需要使用分號(hào)和花括號(hào)而不是換行和縮進(jìn)，SCSS 對(duì)空白符號(hào)不敏感。

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

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

特定：

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

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

• 支持 Promise API

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

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

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

• 能夠取消請(qǐng)求

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

• 客戶端支持保護(hù)安全免受 XSRF 攻擊

如何使用：

• npm install –save axios 安裝axios

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

import Axios from \'axios\'

Vue.propertype.$axios = Axios;

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

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

• 使用 axios 發(fā)送 post 請(qǐng)求 post原生請(qǐng)求在后端是接收不到參數(shù)的，所有有兩種解決方案，這里只寫(xiě)一種！第二種解決方案是用 QS。

var params = new URLSearchParams;
params.append(\'name\',\'孫悟空\(chéng)');
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è)面應(yīng)用變得易如反掌。包含的功能有：

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

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

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

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

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

• 帶有自動(dòng)激活的 CSS class 的連接

• HTML 5 歷史模式或 hash 模式，在 IE9 中自動(dòng)降級(jí)

• 自定義的滾動(dòng)條行為

vue-router 組件：

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

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

• < router-view> 路由的顯示

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

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

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

• Vue 是數(shù)據(jù)驅(qū)動(dòng)，通過(guò)數(shù)據(jù)來(lái)顯示視圖層而不是節(jié)點(diǎn)操作。

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

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

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

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

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

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

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

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

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

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