1.vue優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：? ? a)MVVM的開(kāi)發(fā)模式，從dom中解脫出來(lái)，雙向數(shù)據(jù)綁定；b)數(shù)據(jù)更新采用異步事件機(jī)制；c)采用單向數(shù)據(jù)流；? ? d)組件式開(kāi)發(fā)；? ? e)采用虛擬dom? ? f)支持模板和jsx兩種開(kāi)發(fā)模式；g)可以進(jìn)行服務(wù)端渲染；? ? h)擴(kuò)展性強(qiáng)，既可以向上又可以向下擴(kuò)展缺點(diǎn)：? ? a)不兼容IE8以下版本b)生態(tài)圈不繁榮，開(kāi)源社區(qū)不活躍；

2.什么是前端路由？

由前端控制路由地址，在前端實(shí)現(xiàn)通過(guò)路由的形式加載對(duì)應(yīng)的頁(yè)面，不需要向后端發(fā)起請(qǐng)求，前端通過(guò)改變url地址，然后監(jiān)聽(tīng)url地址的變化，開(kāi)始新的url渲染，異步的形式前端路由的兩種形式? hash模式，history模式，目前只有兩種

hash:www.baidu.com/#aaa使用#作為url的hash值，#在之前的定義是錨點(diǎn)連接，改變不會(huì)像后端發(fā)起請(qǐng)求，也可以通hashchange事件監(jiān)聽(tīng)到hash的改變history:html5新增的api

3.vue的內(nèi)置指令有哪些

（1）V-bind：響應(yīng)并更新DOM特性 可以替換為“:”

（2）V-on：用于監(jiān)聽(tīng)dom事件 可以替換成“@”

（3）V-model：數(shù)據(jù)雙向綁定

（4）V-show：條件渲染指令

（5）V-if：條件渲染指令

（6）V-else：條件渲染指令

（7）V-for：循環(huán)指令

（8）V-else-if：判斷多層條件，必須跟v-if成對(duì)使用

（9）V-text：更新元素的textContent

（10）V-html：更新元素的innerHTML

（11）V-pre：不需要表達(dá)式，加快整個(gè)項(xiàng)目編譯速度

（12）V-cloak：不需要表達(dá)式，這個(gè)指令保持在元素上直到關(guān)聯(lián)實(shí)例結(jié)束編譯

（13）V-once：不需要表達(dá)式，只渲染元素或組件一次，隨后不會(huì)再渲染

4.Vue和SEO

vue是一個(gè)開(kāi)發(fā)框架，通過(guò)vue-router實(shí)現(xiàn)單頁(yè)面應(yīng)用的開(kāi)發(fā)，單頁(yè)面應(yīng)用本身就對(duì)SEO不友好。

vue給出的官方解決方案：

vue-server-renderer服務(wù)端渲染，但是我覺(jué)得對(duì)于一個(gè)真正適合做成單頁(yè)應(yīng)用的項(xiàng)目的話，seo其實(shí)是可以不用考慮的，反正項(xiàng)目本身是需要登錄才能進(jìn)入的，但是像其他一些類(lèi)似于商城的項(xiàng)目的話，我們可以吧項(xiàng)目分開(kāi)，像單個(gè)的詳情頁(yè)我們沒(méi)有必要放到單頁(yè)路由中，可以把她們分出去，畢竟對(duì)于商城來(lái)說(shuō)商品才是詳情才是需要seo優(yōu)化的?；蛘呶覀兺耆珱](méi)有必要用了vue就得吧項(xiàng)目做成單頁(yè)的，我們可以使用一些他的特性，畢竟我覺(jué)得vue給我?guī)?lái)最大的好處就是組件化開(kāi)發(fā)；

7.為什么使用路由懶加載

也叫延遲加載，即在需要的時(shí)候進(jìn)行加載，隨用隨載。因vue這種單頁(yè)面應(yīng)用，如果沒(méi)有應(yīng)用懶加載，運(yùn)用webpack打包后的文件將會(huì)異常的大，造成進(jìn)入首頁(yè)時(shí)，需要加載的內(nèi)容過(guò)多，時(shí)間過(guò)長(zhǎng)，會(huì)出現(xiàn)長(zhǎng)時(shí)間的白屏，即使做了loading也是不利于用戶(hù)體驗(yàn)，而運(yùn)用懶加載則可以將頁(yè)面進(jìn)行劃分，需要的時(shí)候加載頁(yè)面，可以有效的分擔(dān)首頁(yè)所承擔(dān)的加載壓力，減少首頁(yè)加載用時(shí)懶加載形如下：importVuefrom'vue'importRouterfrom'vue-router'exportdefaultnewRouter({routes: [? ? {path:'/',name:'Index',component:resolve=>require('@/components/index',resolve),children:[? ? ? ? {path:'/index/indexs',name:'Indexs',component:resolve=>require('@/components/views/index/indexs',resolve)? ? ? ? }? ? ? ]? ? }? ]})

8.什么是跨域

跨域是指一個(gè)域下的文檔或腳本視圖去請(qǐng)求另一個(gè)域下的資源，這里跨域是廣義的

9.什么是同源策略？

協(xié)議+域名+端口三者相同，即便兩個(gè)不同的域名指向同一個(gè)ip地址，也非同源（只存在于客戶(hù)端（瀏覽器））

10.跨域解決方案

（1）cors(跨域資源共享)（2）jsonp（3）iframe（4）nginx代理跨域（5）nodejs中間件代理跨域（6）WebSocket協(xié)議跨域

11.jsonp的實(shí)現(xiàn)原理

jsonp就是利用了請(qǐng)求js不涉及跨域的特性，以及js是瀏覽器腳本語(yǔ)言的特性，動(dòng)態(tài)生成script標(biāo)簽，指定url為接口地址，并且創(chuàng)建一個(gè)不會(huì)沖突的函數(shù)添加到window上，前端通過(guò)query參數(shù)將回調(diào)函數(shù)的名稱(chēng)傳遞到后端，后端獲取到名字，返回的內(nèi)容就會(huì)執(zhí)行js的形式返回方法名（數(shù)據(jù)）

缺點(diǎn)：只能是get請(qǐng)求，不能是post

不安全

需要后端配合

12.cors跨域資源共享

cors瀏覽器新增的跨域解決方案，需要客戶(hù)端和服務(wù)端同時(shí)支持

客戶(hù)端：（瀏覽器版本）

服務(wù)端：

//設(shè)置跨域訪問(wèn)

app.all('*', function(req, res, next) {? ? res.header("Access-Control-Allow-Origin","*"); //允許跨域訪問(wèn)的網(wǎng)站? ? res.header("Access-Control-Allow-Headers","X-Requested-With");//允許的headers字段? ? ? ? res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");//允許的請(qǐng)求方法? ? ? res.header("Access-Control-Allow-Crdentials",true)//允許攜帶cookie? ? ? res.header("Content-Type","application/json;charset=utf-8");? //接受到的內(nèi)容格式? ? next();? });

優(yōu)點(diǎn)：前端不需要做任何改變，只需要后端配置即可

可以限制域名做請(qǐng)求

可以跨域操作cookie

缺點(diǎn)：兼容性問(wèn)題

13.代理跨域（反向代理，正向代理）

首先跨域問(wèn)題是出現(xiàn)在瀏覽器同源策略，所以在服務(wù)端做一個(gè)代理，將不同域名下的數(shù)據(jù)請(qǐng)求，然后在通過(guò)當(dāng)前服務(wù)器返回到當(dāng)前頁(yè)面

如：

proxyTable: {'/api': {'target':'http://localhost:3000/api','pathRewrite': {"^/api":""} //后面可以使重寫(xiě)的新路徑，一般不做更改? }}

在腳手架config文件夾index.js文件有proxyTable對(duì)象

14.開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境的區(qū)別

日常開(kāi)發(fā)工作中，一般會(huì)有兩套構(gòu)建環(huán)境：一套是在開(kāi)發(fā)時(shí)用，構(gòu)建結(jié)果用于本地開(kāi)發(fā)調(diào)試，不進(jìn)行代碼壓縮，打印debug信息，包含sourcemap文件；另一套構(gòu)建后的結(jié)果是直接應(yīng)用到線上的，代碼要進(jìn)行壓縮，運(yùn)行不打印debug信息，靜態(tài)文件不包括sourcema。有時(shí)還要多出一套測(cè)試環(huán)境，在運(yùn)行時(shí)直接進(jìn)行請(qǐng)求mock等工作。

webpack 4.x版本在webpack配置中有mode選項(xiàng)可以直接配置production 或 development

webpack 3.x 一般是通過(guò)node命令傳遞環(huán)境變量，來(lái)控制不同環(huán)境下的構(gòu)建行為

如：

{"scripts": {"build":"NODE_ENV=production webpack","dev":"NODE_ENV=development webpack-dev-server"}}

然后在 webpack.config.js 文件中可以通過(guò) process.env.NODE_ENV 來(lái)獲取命令傳入的環(huán)境變量：

常見(jiàn)的環(huán)境差異配置

生產(chǎn)環(huán)境可能需要分離 CSS 成單獨(dú)的文件，以便多個(gè)頁(yè)面共享同一個(gè) CSS 文件

生產(chǎn)環(huán)境需要壓縮 HTML/CSS/JS 代碼

生產(chǎn)環(huán)境需要壓縮圖片

開(kāi)發(fā)環(huán)境需要生成 sourcemap 文件

開(kāi)發(fā)環(huán)境需要打印 debug 信息

開(kāi)發(fā)環(huán)境需要 live reload 或者 hot reload 的功能

以上是常見(jiàn)的構(gòu)建環(huán)境需求差異，可能更加復(fù)雜的項(xiàng)目中會(huì)有更多的構(gòu)建需求（如劃分靜態(tài)域名等），但是我們都可以通過(guò)判斷環(huán)境變量來(lái)實(shí)現(xiàn)這些有環(huán)境差異的構(gòu)建需求。

webpack 4.x 的 mode 已經(jīng)提供了上述差異配置的大部分功能，mode 為 production 時(shí)默認(rèn)使用 JS 代碼壓縮，而 mode 為 development 時(shí)默認(rèn)啟用 hot reload，等等。這樣讓我們的配置更為簡(jiǎn)潔，我們只需要針對(duì)特別使用的 loader 和 plugin 做區(qū)分配置就可以了。

webpack 3.x 版本還是只能自己動(dòng)手修改配置來(lái)滿(mǎn)足大部分環(huán)境差異需求。

15.組件命名的約定

Vue 2.0 中組件的命名限制與 1.0 的最大區(qū)別在于區(qū)分了大小寫(xiě)?？偨Y(jié)一下就是：一是不使用非法的標(biāo)簽字符；二是不與 HTML 元素（區(qū)分大小寫(xiě)）或 SVG 元素（不區(qū)分大小寫(xiě)）重名；三是不使用 Vue 保留的 slot 和 component（區(qū)分大小寫(xiě)）。

除了以上三條，由于 Vue 2.0 內(nèi)置了 KeepAlive、Transition、TransitionGroup 三個(gè)組件，所以盡量避免與這三個(gè)組件重名。但從另一方面講，你也可以故意重名來(lái)實(shí)現(xiàn)一些特殊的功能。例如，keep-alive 的匹配順序?yàn)?keep-alive、keepAlive、KeepAlive，所以我們可以注冊(cè)一個(gè) keep-alive 組件來(lái)攔截 KeepAlive 匹配。

建議：全小寫(xiě)或首字母大寫(xiě)

16.vue的虛擬dom

虛擬的DOM的核心思想是：對(duì)復(fù)雜的文檔DOM結(jié)構(gòu)，提供一種方便的工具，進(jìn)行最小化地DOM操作。

17.如何理解vue中MVVM模式？

MVVM全稱(chēng)是Model-View-ViewModel；vue是以數(shù)據(jù)為驅(qū)動(dòng)的，一旦創(chuàng)建dom和數(shù)據(jù)就保持同步，每當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，dom也會(huì)變化。DOMListeners和DataBindings是實(shí)現(xiàn)雙向綁定的關(guān)鍵。DOMListeners監(jiān)聽(tīng)頁(yè)面所有View層DOM元素的變化，當(dāng)發(fā)生變化，Model層的數(shù)據(jù)隨之變化；DataBindings監(jiān)聽(tīng)Model層的數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生變化，View層的DOM元素隨之變化。

18.組件之間的傳值通信

父組件向子組件傳值：

1）子組件在props中創(chuàng)建一個(gè)屬性，用來(lái)接收父組件傳過(guò)來(lái)的值；2）在父組件中注冊(cè)子組件；3）在子組件標(biāo)簽中添加子組件props中創(chuàng)建的屬性；4）把需要傳給子組件的值賦給該屬性

子組件向父組件傳值：

1）子組件中需要以某種方式（如點(diǎn)擊事件）的方法來(lái)觸發(fā)一個(gè)自定義的事件；2）將需要傳的值作為$emit的第二個(gè)參數(shù)，該值將作為實(shí)參傳給響應(yīng)事件的方法；3）在父組件中注冊(cè)子組件并在子組件標(biāo)簽上綁定自定義事件的監(jiān)聽(tīng)。

19.scss是什么？在vue.cli中的安裝使用步驟是？有哪幾大特性？

css的預(yù)編譯；

使用步驟：

第一步：用npm 下三個(gè)loader（sass-loader、css-loader、node-sass）

第二步：在build目錄找到webpack.base.config.js，在那個(gè)extends屬性中加一個(gè)拓展.scss

第三步：還是在同一個(gè)文件，配置一個(gè)module屬性

第四步：然后在組件的style標(biāo)簽加上lang屬性 ，例如：lang=”scss”

有哪幾大特性:

1、可以用變量，例如（$變量名稱(chēng)=值）；

2、可以用混合器，例如（）

3、可以嵌套

20.vuex有哪幾種屬性？

有五種，分別是 State、 Getter、Mutation 、Action、 Module

21.vuex的State特性是？

一、Vuex就是一個(gè)倉(cāng)庫(kù)，倉(cāng)庫(kù)里面放了很多對(duì)象。其中state就是數(shù)據(jù)源存放地，對(duì)應(yīng)于與一般Vue對(duì)象里面的data

二、state里面存放的數(shù)據(jù)是響應(yīng)式的，Vue組件從store中讀取數(shù)據(jù)，若是store中的數(shù)據(jù)發(fā)生改變，依賴(lài)這個(gè)數(shù)據(jù)的組件也會(huì)發(fā)生更新

三、它通過(guò)mapState把全局的 state 和 getters 映射到當(dāng)前組件的 computed 計(jì)算屬性中

22.vuex的Getter特性是？

一、getters 可以對(duì)State進(jìn)行計(jì)算操作，它就是Store的計(jì)算屬性

二、 雖然在組件內(nèi)也可以做計(jì)算屬性，但是getters 可以在多組件之間復(fù)用

三、 如果一個(gè)狀態(tài)只在一個(gè)組件內(nèi)使用，是可以不用getters

23.vuex的Mutation特性是？

一、Action 類(lèi)似于 mutation，不同在于：

二、Action 提交的是 mutation，而不是直接變更狀態(tài)。

三、Action 可以包含任意異步操作

24.Vue.js中ajax請(qǐng)求代碼應(yīng)該寫(xiě)在組件的methods中還是vuex的actions中？

一、如果請(qǐng)求來(lái)的數(shù)據(jù)是不是要被其他組件公用，僅僅在請(qǐng)求的組件內(nèi)使用，就不需要放入vuex 的state里。

二、如果被其他地方復(fù)用，這個(gè)很大幾率上是需要的，如果需要，請(qǐng)將請(qǐng)求放入action里，方便復(fù)用，并包裝成promise返回，在調(diào)用處用async await處理返回的數(shù)據(jù)。如果不要復(fù)用這個(gè)請(qǐng)求，那么直接寫(xiě)在vue文件里很方便。

25.不用Vuex會(huì)帶來(lái)什么問(wèn)題？

一、可維護(hù)性會(huì)下降，你要想修改數(shù)據(jù)，你得維護(hù)三個(gè)地方

二、可讀性會(huì)下降，因?yàn)橐粋€(gè)組件里的數(shù)據(jù)，你根本就看不出來(lái)是從哪來(lái)的

三、增加耦合，大量的上傳派發(fā)，會(huì)讓耦合性大大的增加，本來(lái)Vue用Component就是為了減少耦合，現(xiàn)在這么用，和組件化的初衷相背。

26.axios的特點(diǎn)有哪些？

（1）Axios 是一個(gè)基于 promise 的 HTTP 庫(kù)，支持promise所有的API

（2）它可以攔截請(qǐng)求和響應(yīng)

（3）它可以轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)，并對(duì)響應(yīng)回來(lái)的內(nèi)容自動(dòng)轉(zhuǎn)換成 JSON類(lèi)型的數(shù)據(jù)

（4）安全性更高，客戶(hù)端支持防御 XSRF

27.axios有哪些常用方法？

（1）axios.get(url[,config])//get請(qǐng)求用于列表和信息查詢(xún)（2）axios.delete(url[,config])//刪除（3）axios.post(url[, data[,config]])//post請(qǐng)求用于信息的添加（4）axios.put(url[, data[,config]])//更新操作

28.說(shuō)下你了解的axios相關(guān)配置屬性？

（1）url是用于請(qǐng)求的服務(wù)器URL

（2）method是創(chuàng)建請(qǐng)求時(shí)使用的方法,默認(rèn)是get

（3）baseURL將自動(dòng)加在url前面，除非url是一個(gè)絕對(duì)URL。它可以通過(guò)設(shè)置一個(gè)

（4）baseURL便于為axios實(shí)例的方法傳遞相對(duì)URL

（5）transformRequest允許在向服務(wù)器發(fā)送前，修改請(qǐng)求數(shù)據(jù)，只能用?

在'PUT','POST'和'PATCH'這幾個(gè)請(qǐng)求方法

（6）headers是即將被發(fā)送的自定義請(qǐng)求頭

（7）headers:{'X-Requested-With':'XMLHttpRequest'},

（8）params是即將與請(qǐng)求一起發(fā)送的URL參數(shù)，必須是一個(gè)無(wú)格式對(duì)象(plainobject)或URLSearchParams對(duì)象

params:{ID:12345},

（9）auth表示應(yīng)該使用HTTP基礎(chǔ)驗(yàn)證，并提供憑據(jù)

（10）這將設(shè)置一個(gè)Authorization頭，覆寫(xiě)掉現(xiàn)有的任意使用headers設(shè)置的自定義Authorization頭

auth:{username:'janedoe',? ? password:'s00pers3cret'},

（11）'proxy'定義代理服務(wù)器的主機(jī)名稱(chēng)和端口

`auth`表示HTTP基礎(chǔ)驗(yàn)證應(yīng)當(dāng)用于連接代理，并提供憑據(jù)這將會(huì)設(shè)置一個(gè)`Proxy-Authorization`頭，覆寫(xiě)掉已有的通過(guò)使用`header`設(shè)置的自定義? `Proxy-Authorization`頭。

proxy:{? ??

????host:'127.0.0.1',? ?

?????port:9000,? ??

????auth::{? ? ? ??

????????username:'mikeymike',? ? ? ??

????????password:'rapunz3l'

????}

},

29.v-show和v-if指令的共同點(diǎn)和不同點(diǎn)?

v-show指令是通過(guò)修改元素的displayCSS屬性讓其顯示或者隱藏

v-if指令是直接銷(xiāo)毀和重建DOM達(dá)到讓元素顯示和隱藏的效果