1.vue優(yōu)缺點

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

2.什么是前端路由蕊程？

由前端控制路由地址椒袍，在前端實現(xiàn)通過路由的形式加載對應(yīng)的頁面，不需要向后端發(fā)起請求藻茂，前端通過改變url地址驹暑，然后監(jiān)聽url地址的變化，開始新的url渲染辨赐，異步的形式前端路由的兩種形式? hash模式优俘，history模式，目前只有兩種

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

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

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

（2）V-on：用于監(jiān)聽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成對使用

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

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

（11）V-pre：不需要表達式叶雹，加快整個項目編譯速度

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

（13）V-once：不需要表達式换吧，只渲染元素或組件一次折晦，隨后不會再渲染

4.Vue和SEO

vue是一個開發(fā)框架，通過vue-router實現(xiàn)單頁面應(yīng)用的開發(fā)沾瓦，單頁面應(yīng)用本身就對SEO不友好满着。

vue給出的官方解決方案：

vue-server-renderer服務(wù)端渲染谦炒，但是我覺得對于一個真正適合做成單頁應(yīng)用的項目的話，seo其實是可以不用考慮的漓滔，反正項目本身是需要登錄才能進入的编饺，但是像其他一些類似于商城的項目的話，我們可以吧項目分開响驴，像單個的詳情頁我們沒有必要放到單頁路由中透且，可以把她們分出去，畢竟對于商城來說商品才是詳情才是需要seo優(yōu)化的豁鲤』嗵埽或者我們完全沒有必要用了vue就得吧項目做成單頁的，我們可以使用一些他的特性琳骡，畢竟我覺得vue給我?guī)碜畲蟮暮锰幘褪墙M件化開發(fā)锅论；

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

也叫延遲加載，即在需要的時候進行加載楣号，隨用隨載最易。因vue這種單頁面應(yīng)用，如果沒有應(yīng)用懶加載炫狱，運用webpack打包后的文件將會異常的大藻懒，造成進入首頁時，需要加載的內(nèi)容過多视译，時間過長嬉荆，會出現(xiàn)長時間的白屏，即使做了loading也是不利于用戶體驗酷含，而運用懶加載則可以將頁面進行劃分鄙早，需要的時候加載頁面，可以有效的分擔首頁所承擔的加載壓力椅亚，減少首頁加載用時懶加載形如下：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.什么是跨域

跨域是指一個域下的文檔或腳本視圖去請求另一個域下的資源限番，這里跨域是廣義的

9.什么是同源策略？

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

10.跨域解決方案

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

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

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

缺點：只能是get請求豺妓，不能是post

不安全

需要后端配合

12.cors跨域資源共享

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

客戶端：（瀏覽器版本）

服務(wù)端：

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

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

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

可以限制域名做請求

可以跨域操作cookie

缺點：兼容性問題

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

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

如：

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

在腳手架config文件夾index.js文件有proxyTable對象

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

日常開發(fā)工作中膘流，一般會有兩套構(gòu)建環(huán)境：一套是在開發(fā)時用，構(gòu)建結(jié)果用于本地開發(fā)調(diào)試鲁沥，不進行代碼壓縮呼股，打印debug信息，包含sourcemap文件画恰；另一套構(gòu)建后的結(jié)果是直接應(yīng)用到線上的彭谁，代碼要進行壓縮，運行不打印debug信息允扇，靜態(tài)文件不包括sourcema缠局。有時還要多出一套測試環(huán)境，在運行時直接進行請求mock等工作考润。

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

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

如：

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

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

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

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

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

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

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

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

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

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

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

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

15.組件命名的約定

Vue 2.0 中組件的命名限制與 1.0 的最大區(qū)別在于區(qū)分了大小寫≡咧耄總結(jié)一下就是：一是不使用非法的標簽字符恃锉；二是不與 HTML 元素（區(qū)分大小寫）或 SVG 元素（不區(qū)分大小寫）重名；三是不使用 Vue 保留的 slot 和 component（區(qū)分大小寫）呕臂。

除了以上三條破托，由于 Vue 2.0 內(nèi)置了 KeepAlive、Transition歧蒋、TransitionGroup 三個組件土砂，所以盡量避免與這三個組件重名州既。但從另一方面講，你也可以故意重名來實現(xiàn)一些特殊的功能萝映。例如吴叶，keep-alive 的匹配順序為 keep-alive、keepAlive序臂、KeepAlive蚌卤，所以我們可以注冊一個 keep-alive 組件來攔截 KeepAlive 匹配。

建議：全小寫或首字母大寫

16.vue的虛擬dom

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

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

MVVM全稱是Model-View-ViewModel诫龙；vue是以數(shù)據(jù)為驅(qū)動的，一旦創(chuàng)建dom和數(shù)據(jù)就保持同步鲫咽，每當數(shù)據(jù)發(fā)生變化時签赃，dom也會變化。DOMListeners和DataBindings是實現(xiàn)雙向綁定的關(guān)鍵分尸。DOMListeners監(jiān)聽頁面所有View層DOM元素的變化锦聊，當發(fā)生變化，Model層的數(shù)據(jù)隨之變化箩绍；DataBindings監(jiān)聽Model層的數(shù)據(jù)孔庭，當數(shù)據(jù)發(fā)生變化，View層的DOM元素隨之變化材蛛。

18.組件之間的傳值通信

父組件向子組件傳值：

1）子組件在props中創(chuàng)建一個屬性圆到，用來接收父組件傳過來的值；2）在父組件中注冊子組件卑吭；3）在子組件標簽中添加子組件props中創(chuàng)建的屬性芽淡；4）把需要傳給子組件的值賦給該屬性

子組件向父組件傳值：

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

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

css的預(yù)編譯抚岗；

使用步驟：

第一步：用npm 下三個loader（sass-loader纹笼、css-loader、node-sass）

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

第三步：還是在同一個文件廷痘，配置一個module屬性

第四步：然后在組件的style標簽加上lang屬性 蔓涧，例如：lang=”scss”

有哪幾大特性:

1、可以用變量笋额，例如（$變量名稱=值）元暴；

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

3茉盏、可以嵌套

20.vuex有哪幾種屬性？

有五種枢冤，分別是 State鸠姨、 Getter、Mutation 淹真、Action讶迁、 Module

21.vuex的State特性是？

一核蘸、Vuex就是一個倉庫巍糯，倉庫里面放了很多對象。其中state就是數(shù)據(jù)源存放地客扎，對應(yīng)于與一般Vue對象里面的data

二祟峦、state里面存放的數(shù)據(jù)是響應(yīng)式的，Vue組件從store中讀取數(shù)據(jù)徙鱼，若是store中的數(shù)據(jù)發(fā)生改變宅楞，依賴這個數(shù)據(jù)的組件也會發(fā)生更新

三、它通過mapState把全局的 state 和 getters 映射到當前組件的 computed 計算屬性中

22.vuex的Getter特性是袱吆？

一咱筛、getters 可以對State進行計算操作，它就是Store的計算屬性

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

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

23.vuex的Mutation特性是？

一拐揭、Action 類似于 mutation撤蟆，不同在于：

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

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

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

一讨衣、如果請求來的數(shù)據(jù)是不是要被其他組件公用换棚，僅僅在請求的組件內(nèi)使用，就不需要放入vuex 的state里反镇。

二固蚤、如果被其他地方復用，這個很大幾率上是需要的歹茶，如果需要夕玩，請將請求放入action里，方便復用惊豺，并包裝成promise返回燎孟，在調(diào)用處用async await處理返回的數(shù)據(jù)。如果不要復用這個請求尸昧，那么直接寫在vue文件里很方便揩页。

25.不用Vuex會帶來什么問題？

一彻磁、可維護性會下降碍沐，你要想修改數(shù)據(jù)，你得維護三個地方

二衷蜓、可讀性會下降累提，因為一個組件里的數(shù)據(jù)，你根本就看不出來是從哪來的

三磁浇、增加耦合斋陪，大量的上傳派發(fā)，會讓耦合性大大的增加置吓，本來Vue用Component就是為了減少耦合无虚，現(xiàn)在這么用，和組件化的初衷相背衍锚。

26.axios的特點有哪些友题？

（1）Axios 是一個基于 promise 的 HTTP 庫，支持promise所有的API

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

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

（4）安全性更高度宦，客戶端支持防御 XSRF

27.axios有哪些常用方法？

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

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

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

（2）method是創(chuàng)建請求時使用的方法,默認是get

（3）baseURL將自動加在url前面戈抄，除非url是一個絕對URL。它可以通過設(shè)置一個

（4）baseURL便于為axios實例的方法傳遞相對URL

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

在'PUT','POST'和'PATCH'這幾個請求方法

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

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

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

params:{ID:12345},

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

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

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

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

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

proxy:{? ??

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

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

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

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

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

????}

},

29.v-show和v-if指令的共同點和不同點?

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

v-if指令是直接銷毀和重建DOM達到讓元素顯示和隱藏的效果