1.Vue的數(shù)據(jù)雙向綁定如何實現(xiàn)？Vue的數(shù)據(jù)雙向綁定如何實現(xiàn)戳玫？
v-model指令或者.sync修飾
2.Vue中數(shù)據(jù)雙向綁定原理周叮？
采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式散劫，通過 Object.defineProperty() 來劫持各個屬性的setter绣溜，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者伦仍，觸發(fā)相應(yīng)監(jiān)聽回調(diào)
就是把一個普通 Javascript 對象傳給 Vue 實例來作為它的 data 選項時结窘，Vue 將遍歷它的屬性，用 Object.defineProperty() 將它們轉(zhuǎn)為 getter/setter充蓝。用戶看不到 getter/setter隧枫，但是在內(nèi)部它們讓 Vue追蹤依賴，在屬性被訪問和修改時通知變化
補充：Proxy 相比于 defineProperty 的優(yōu)勢
數(shù)組變化也能監(jiān)聽到? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 不需要深度遍歷監(jiān)聽?
3.談一談Vue組件之間的參數(shù)傳遞谓苟？
父組件傳給子組件：子組件通過props方法接收數(shù)據(jù)官脓；
子組件傳給父組件：$emit方法傳遞參數(shù)
兄弟間組件通信：使用vuex解決問題，先創(chuàng)建store對象涝焙；或者用eventBus卑笨，就是創(chuàng)建一個事件中心，相當(dāng)于中轉(zhuǎn)站仑撞，可以用它來傳遞事件和接收事件湾趾。項目比較小時芭商，用這個比較合適
4.路由的鉤子函數(shù)？
當(dāng)路由發(fā)生跳轉(zhuǎn)的時候搀缠，會觸發(fā)一系列鉤子函數(shù)，如beforeEach（全局前置守衛(wèi)）近迁、afterEach（全局后置守衛(wèi)）艺普、beforeEnter（路由獨享的守衛(wèi)）一般用于頁面title的修改。一些需要登錄才能調(diào)整頁面的重定向功能鉴竭。
beforeEach主要有3個參數(shù)to歧譬，from，next
to：route即將進入的目標(biāo)路由對象
from：route當(dāng)前導(dǎo)航正要離開的路由搏存。
next：function一定要調(diào)用該方法resolve這個鉤子瑰步。執(zhí)行效果依賴next方法的調(diào)用參數(shù)¤得撸可以控制網(wǎng)頁的跳轉(zhuǎn)?
beforeEnter 用于做登錄的驗證
5.Next的使用
next（） 去下一步缩焦；
next（ false ）阻止跳轉(zhuǎn)
next（' / '）或? ?next（{ path：' / '? }）跳轉(zhuǎn)到不同路徑
6.vue的路由實現(xiàn)hash模式 和 history模式
hash模式：在瀏覽器中符號“#”，#以及#后面的字符稱之為hash责静，用?window.location.hash?讀取袁滥。特點：hash雖然在URL中，但不被包括在HTTP請求中灾螃；用來指導(dǎo)瀏覽器動作题翻，對服務(wù)端安全無用，hash不會重加載頁面
history模式：history采用HTML5的新特性腰鬼；且提供了兩個新方法：?pushState()嵌赠，?replaceState()可以對瀏覽器歷史記錄棧進行修改，以及popState事件的監(jiān)聽到狀態(tài)變更
7.說下你對vue生命周期的理解
總共分為8個階段創(chuàng)建前/后熄赡，載入前/后姜挺，更新前/后，銷毀前/后
在beforeCreate（創(chuàng)建之前：一次）階段本谜，vue實例的掛載元素el和數(shù)據(jù)對象data都為undefined初家，還未初始化；
在?created（創(chuàng)建完成：一次）階段乌助，vue實例的數(shù)據(jù)對象data有了溜在，el還沒有玷过；
在beforeMount（掛載之前：一次）階段聪舒，vue實例的$el和data都初始化了，但還是掛載之前為虛擬的dom節(jié)點 ,data.message還未替換
在mounted（掛載完成）階段蹂楣，vue實例掛載完成 data.message成功渲染
當(dāng)data變化時赏参，會觸發(fā)beforeUpdate（更新之前：n次）和updated（更新完成：n次）方法
beforeDestory（銷毀之前：1次）：實例銷毀之前使用志笼，在這里實例照逞刂眩可以使用
destoryed（銷毀完成：一次）：實例銷毀后使用，調(diào)用后Vue實例的所有東西會解除綁定纫溃，所有的事件監(jiān)聽器會被移除腰涧，所有的子實例會被銷毀 ，但是dom結(jié)構(gòu)依然存在紊浩；
什么是vue生命周期窖铡？
答： Vue 實例從創(chuàng)建到銷毀的過程，就是生命周期坊谁。從開始創(chuàng)建费彼、初始化數(shù)據(jù)、編譯模板口芍、掛載Dom→渲染箍铲、更新→渲染、銷毀等一系列過程鬓椭，稱之為 Vue 的生命周期
vue生命周期的作用是什么颠猴？
答：它的生命周期中有多個事件鉤子，讓我們在控制整個Vue實例的過程時更容易形成好的邏輯膘融。
vue生命周期總共有幾個階段芙粱？
答：它可以總共分為8個階段：創(chuàng)建前/后、載入前/后氧映、更新前/后春畔、銷毀前/銷毀后
第一次頁面加載會觸發(fā)哪幾個鉤子？
會觸發(fā)下面這幾個beforeCreate（創(chuàng)建前）岛都、created（創(chuàng)建完成）律姨、beforeMount（掛載前）、mounted（掛載完成）
DOM 渲染在哪個周期中就已經(jīng)完成臼疫？
答：DOM?渲染在?mounted（掛載完成） 中就已經(jīng)完成了
8.vue的指令
v-if指令? ? 判斷是否隱藏
v-show指令
v-else指令
v-for指令? ? 數(shù)據(jù)循環(huán)出來
v-bind:class指令? ?? 綁定一個屬性
v-on指令
v-model指令：? 實現(xiàn)雙向綁定 ? ?它是一個語法糖：真實寫法是? ：value=" msg "@input? ? ?注（? ：是v-bind择份，@是v-on）
v-text讀取文本，不能讀取html標(biāo)簽
v-html 能讀取html標(biāo)簽
9.路由跳轉(zhuǎn)
編程式（ js跳轉(zhuǎn)）this.$router.push()
聲明式（標(biāo)簽跳轉(zhuǎn)）<router-link to=" "></router-link>
10.路由對象
一個路由對象表示當(dāng)前激活路由的狀態(tài)信息烫堤，包含當(dāng)前URL解析的信息荣赶，還有Url匹配到的路由記錄
路由對象是不可變的，每次成功的導(dǎo)航后都會產(chǎn)生一個新對象
路由出現(xiàn)的多個地方：
1.在組件內(nèi)鸽斟，即this.$route??
2.在$route觀察者回調(diào)中
3.route.match(location)的返回值
11.路由的懶加載
按需加載會在頁面第一次請求的時候拔创，把相關(guān)路由組件塊的js添加上；非按需加載則會把所有的路由組件塊的js包打在一起富蓄。當(dāng)業(yè)務(wù)包很大的時候建議用路由的按需加載（懶加載）
12.路由的傳參
vue-router解決的問題
監(jiān)聽URL的變化剩燥，并在變化前后執(zhí)行相應(yīng)的邏輯
不同的URL對應(yīng)不同的組件
提供多種方式改變URL的API(URL的改變不能導(dǎo)致瀏覽器刷新)
13.在Vue中使用插件的步驟
采用ES6的import ... from ...語法或CommonJS的require()方法引入插件
使用全局方法Vue.use( plugin )使用插件,可以傳入一個選項對象Vue.use(MyPlugin, { someOption: true })
14.請列舉出3個Vue中常用的生命周期鉤子函數(shù)?
1.created: 實例已經(jīng)創(chuàng)建完成之后調(diào)用,在這一步,實例已經(jīng)完成數(shù)據(jù)觀測, 屬性和方法的運算,?watch/event事件回調(diào). 然而, 掛載階段還沒有開始,?$el屬性目前還不可見
2.mounted:?el被新創(chuàng)建的?vm.$el?替換，并掛載到實例上去之后調(diào)用該鉤子立倍。如果?root?實例掛載了一個文檔內(nèi)元素灭红，當(dāng)?mounted被調(diào)用時?vm.$el?也在文檔內(nèi)侣滩。
3.activated:?keep-alive組件激活時調(diào)用
15.<keep-alive></keep-alive>的作用是什么?
如果你需要在組件切換的時候、保存一些組件的狀態(tài)防止多次渲染,就可以使用keep?-alive組件包集起來
它擁有兩個獨有的生命周期鉤子函变擒，分別是 activated(失去)和deactivated?(得到)君珠。用Keep-alive包裹的組件在切換時不會進行銷毀，而是緩存到內(nèi)存中并執(zhí)行deactivated鉤子函數(shù)命中緩存存渲染后會執(zhí)行activated鉤子函數(shù)
生命周期 :
activated在組件第一次渲染時會被調(diào)用赁项，之后在每次緩存組件被激活時調(diào)用;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?deactivated：組件被停用(離開路由)時調(diào)用
注意：使用了keep-alive就不會調(diào)用beforeDestroy(組件銷毀前鉤子)和destroyed(組件銷毀)葛躏，因為組件沒被銷毀，被緩存起來了 .
屬性有：
include - 字符串或正則表達式悠菜。只有名稱匹配的組件會被緩存。
exclude - 字符串或正則表達式败富。任何名稱匹配的組件都不會被緩存悔醋。
max - 數(shù)字。最多可以緩存多少組件實例兽叮。一旦這個數(shù)字達到了芬骄，在新實例被創(chuàng)建之前，已緩存組件中最久沒有被訪問的實例會被銷毀掉
舉例：
比如有一個列表頁和詳情頁鹦聪，用戶經(jīng)常執(zhí)行打開詳情—>返回列表—>打開詳情账阻。。泽本。這種頻率很高的頁面淘太，就可以對列表頁組件使用<keep-alive>進行緩存，用戶每次返回列表的時候规丽，都是從緩存中快速渲染蒲牧，而不是重新渲染，大大提高了性能赌莺。
16.指令v-el的作用是什么?
提供一個在頁面上已存在的?DOM元素作為?Vue實例的掛載目標(biāo).可以是 CSS 選擇器冰抢，也可以是一個?HTMLElement?實例
17.如何讓CSS只在當(dāng)前組件中起作用?
將當(dāng)前組件的<style>修改為<style scoped>
18.Vue 組件 data 為什么必須是函數(shù)
每個組件都是 Vue 的實例。
組件共享 data 屬性艘狭，當(dāng) data 的值是同一個引用類型的值時挎扰，改變其中一個會影響其他
vue-cli 工程技術(shù)集合介紹
1.構(gòu)建的 vue-cli 工程都到了哪些技術(shù)，它們的作用分別是什么巢音？
vue.js：vue-cli工程的核心遵倦，主要特點是 雙向數(shù)據(jù)綁定 和 組件系統(tǒng)。
vue-router：vue官方推薦使用的路由框架港谊。
vuex：專為?Vue.js?應(yīng)用項目開發(fā)的狀態(tài)管理器骇吭，主要用于維護vue組件間共用的一些 變量 和 方法。
axios（ 或者?fetch?歧寺、ajax?）：用于發(fā)起?GET?燥狰、或?POST?等?http請求棘脐，基于?Promise?設(shè)計。
vuex等：一個專為vue設(shè)計的移動端UI組件庫龙致。創(chuàng)建一個emit.js文件蛀缝，用于vue事件機制的管理。
webpack：模塊加載和vue-cli工程打包器
2.vue-cli 工程常用的 npm 命令有哪些目代？
1.下載?node_modules?資源包的命令：npm install
2.啟動?vue-cli?開發(fā)環(huán)境的 npm命令：npm run dev
3.vue-cli?生成 生產(chǎn)環(huán)境部署資源 的?npm命令：npm run build
4.用于查看?vue-cli?生產(chǎn)環(huán)境部署資源文件大小的?npm命令：npm run build --report
3.vue-cli配置反向代理
vue-cli提供了配置反向代理的接口屈梁，即設(shè)置config/index.js中的proxyTable。配置如下:
在組件中調(diào)用接口示例(axios)：
上述示例請求的地址會被解析為https://www.exaple.com/api/login榛了。如果proxyTable中pathRewrite配置為空在讶，則請求的地址被解析為https://www.exaple.com/login。
以上配置只是在開發(fā)環(huán)境（dev）中解決跨域霜大。要解決生產(chǎn)環(huán)境的跨域問題,則在config/dev.env.js和config/prod.env.js里也就是開發(fā)/生產(chǎn)環(huán)境下分別配置一下請求的地址API_HOST构哺，開發(fā)環(huán)境中我們用上面配置的代理地址api，生產(chǎn)環(huán)境下用正常的接口地址战坤。配置代碼如下：
對反向代理解決跨域過程的理解
通過偽造請求使得http請求為同源的曙强，然后將同源的請求發(fā)送到反向代理服務(wù)器上，由反向代理服務(wù)器去請求真正的url途茫，這樣就繞過直接請求真正的url導(dǎo)致跨域問題碟嘴。
axios：
get：
post：
post請求注意：如果后臺接收的數(shù)據(jù)格式是 form-data格式 : ?name=a&age=20 你需要進行轉(zhuǎn)換
默認(rèn)是 x-www-form-urlencoded格式: {name:‘a(chǎn)’,age:‘20’} 這種格式的
怎樣轉(zhuǎn)換 ：node給我們提供了一個庫 qs 我們先將qs引進來
然后：Qs.stringify({轉(zhuǎn)換參數(shù)})
axios封裝：
vue的SEO優(yōu)化問題：
常用解決方案有3種
1.頁面預(yù)渲染
2.服務(wù)端渲染
3.路由采用h5 history模式
vuex相關(guān)
1.?vuex是什么？怎么使用囊卜？哪種功能場景使用它娜扇？
只用來讀取的狀態(tài)集中放在store中； 改變狀態(tài)的方式是提交mutations边败，這是個同步的事物袱衷； 異步邏輯應(yīng)該封裝在action中。
在main.js引入store笑窜，注入致燥。新建了一個目錄store，… export
場景有：單頁應(yīng)用中排截，組件之間的狀態(tài)嫌蚤、音樂播放、登錄狀態(tài)断傲、加入購物車
2.解釋vuex圖中各個意思
state：Vuex?使用單一狀態(tài)樹,即每個應(yīng)用將僅僅包含一個store?實例脱吱，但單一狀態(tài)樹和模塊化并不沖突。存放的數(shù)據(jù)狀態(tài)认罩，不可以直接修改里面的數(shù)據(jù)箱蝠。
mutations：mutations定義的方法動態(tài)修改Vuex?的?store?中的狀態(tài)或數(shù)據(jù)
getters：類似vue的計算屬性，主要用來過濾一些數(shù)據(jù)。
action：actions可以理解為通過將mutations里面處里數(shù)據(jù)的方法變成可異步的處理數(shù)據(jù)的方法宦搬，簡單的說就是異步操作數(shù)據(jù)牙瓢。view?層通過?store.dispath?來分發(fā)?action
modules：項目特別復(fù)雜的時候，可以讓每一個模塊擁有自己的state间校、mutation矾克、action、getters憔足，使得結(jié)構(gòu)非常清晰胁附，方便管理
關(guān)于vue的一些對比
1.v-if 和 v-show 區(qū)別
相同點：都能實現(xiàn)元素的顯示和隱藏
不同點：
1.v-if是真正的條件渲染，而v-show只是控制元素的dispaly屬性滓彰，當(dāng)需要做頻繁切換顯示隱藏時控妻，推薦使用v-show，如果只是做一次揭绑，使用v-if饼暑；
2.v-if能使用template，而v-show不能使用
3.v-if有配套的v-else和v-else-if使用洗做，而v-show沒有
2.$route和$router的區(qū)別
$route是“路由信息對象”，包括path彰居，params诚纸，hash，query陈惰，fullPath畦徘，matched，name等路由信息參數(shù)抬闯；
而$router是“路由實例”對象包括了路由的跳轉(zhuǎn)方法井辆，鉤子函數(shù)等
3.vue路由hash模式與history模式的區(qū)別
hash模式路由的哈希模式其實是利用了window可以監(jiān)聽onhashchange事件，也就是說你的url中的哈希值（#后面的值）如果有變化溶握，前端是可以做到監(jiān)聽并做一些響應(yīng)（搞點事情）杯缺，這么一來，即使前端并沒有發(fā)起http請求他也能夠找到對應(yīng)頁面的代碼塊進行按需加載睡榆。后來人們給他起了一個霸氣的名字叫前端路由萍肆，成為了單頁應(yīng)用標(biāo)配
history模式我們先介紹一下H5新推出的兩個神器：pushState與replaceState具體自行百度，簡而言之胀屿，這兩個神器的作用就是可以將url替換并且不刷新頁面塘揣，好比掛羊頭賣狗肉，http并沒有去請求服務(wù)器該路徑下的資源宿崭，一旦刷新就會暴露這個實際不存在的“羊頭”亲铡，顯示404
那么如何去解決history模式下刷新報404的弊端呢，這就需要服務(wù)器端做點手腳，將不存在的路徑請求重定向到入口文件（index.html）奖蔓，前后端聯(lián)手赞草，齊心協(xié)力做好“掛羊頭賣狗肉”的完美特效
總之，pushState方法不會觸發(fā)頁面刷新锭硼，只是導(dǎo)致history對象發(fā)生變化房资，地址欄會有反應(yīng)
history模式下，build之后本地 index.html 打開是無效的檀头。
hash模式下轰异，build之后本地 index.html 打開正常！
大攀钍迹回答：hash模式url里面永遠帶著#號搭独，我們在開發(fā)當(dāng)中默認(rèn)使用這個模式。那么什么時候要用history模式呢廊镜？如果用戶考慮url的規(guī)范那么就需要使用history模式牙肝，因為history模式?jīng)]有#號，是個正常的url適合推廣宣傳嗤朴。當(dāng)然其功能也有區(qū)別配椭，比如我們在開發(fā)app的時候有分享頁面，那么這個分享出去的頁面就是用vue或是react做的雹姊，咱們把這個頁面分享到第三方的app里股缸，有的app里面url是不允許帶有#號的，所以要將#號去除那么就要使用history模式吱雏，但是使用history模式還有一個問題就是敦姻，在訪問二級頁面的時候，做刷新操作歧杏，會出現(xiàn)404錯誤镰惦，那么就需要和后端人員配合讓他配置一下apache或是nginx的url重定向，重定向到你的首頁路由上就ok啦犬绒。
