vue父組件向子組件傳遞數(shù)據(jù)？
答：通過 props
子組件像父組件傳遞事件？
答：$emit 方法
v-show 和 v-if指令的共同點和不同點？
答:
共同點： 都能控制元素的顯示和隱藏；
不同點： 實現(xiàn)本質(zhì)方法不同，v-show 本質(zhì)就是通過控制 css 中的 display 設(shè)置為 none，控制隱藏，只會編譯一次；
v-if 是動態(tài)的向 DOM 樹內(nèi)添加或者刪除 DOM 元素，若初始值為 false ，就不會編譯了。而且 v-if 不停的銷毀和創(chuàng)建比較消耗性能。
總結(jié)：如果要頻繁切換某節(jié)點，使用 v-show (切換開銷比較小，初始開銷較大)。如果不需要頻繁切換某節(jié)點使用 v-if（初始渲染開銷較小，切換開銷比較大）。
如何讓CSS只在當前組件中起作用?
答：在組件中的 style 前面加上 scoped
如何獲取dom?
答：ref="domName" 用法：this.$refs.domName
說出幾種vue當中的指令和它的用法？
答：v-model 雙向數(shù)據(jù)綁定；
v-for 循環(huán)；
v-if v-show 顯示與隱藏；
v-on 事件；v-once : 只綁定一次。
vue-loader是什么？使用它的用途有哪些？
答：
vue 文件的一個加載器，將 template/js/style 轉(zhuǎn)換成 js 模塊。
用途：js 可以寫 es6 、 style樣式可以 scss 或 less 、 template 可以加 jade等
為什么使用key?
答：需要使用 key 來給每個節(jié)點做一個唯一標識， Diff 算法就可以正確的識別此節(jié)點。作用主要是為了高效的更新虛擬 DOM。
axios及安裝?
答：請求后臺資源的模塊。npm install axios —save 裝好， js中使用 import 進來，然后 .get 或 .post 。返回在 .then 函數(shù)中如果成功，失敗則是在 .catch 函數(shù)中。
v-modal的使用
答：v-model 用于表單數(shù)據(jù)的雙向綁定，其實它就是一個語法糖，這個背后就做了兩個操作：
v-bind 綁定一個 value 屬性；v-on 指令給當前元素綁定 input 事件。
請說出vue.cli項目中src目錄每個文件夾和文件的用法？
答：assets 文件夾是放靜態(tài)資源；components 是放組件；router 是定義路由相關(guān)的配置; app.vue 是一個應(yīng)用主組件；main.js 是入口文件。
分別簡述computed和watch的使用場景
答：
computed : 當一個屬性受多個屬性影響的時候就需要用到 computed ，最典型的栗子：購物車商品結(jié)算的時候
watch : 當一條數(shù)據(jù)影響多條數(shù)據(jù)的時候就需要用 watch ，栗子：搜索數(shù)據(jù)
v-on可以監(jiān)聽多個方法嗎？
答：可以，栗子：<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">。
$nextTick的使用
答：當你修改了data 的值然后馬上獲取這個 dom 元素的值，是不能獲取到更新后的值， 你需要使用 $nextTick 這個回調(diào)，讓修改后的 data 值渲染更新到 dom 元素之后在獲取，才能成功。
vue組件中data為什么必須是一個函數(shù)？
答：因為 JavaScript 的特性所導(dǎo)致，在 component 中，data 必須以函數(shù)的形式存在，不可以是對象。
組建中的 data 寫成一個函數(shù)，數(shù)據(jù)以函數(shù)返回值的形式定義，這樣每次復(fù)用組件的時候，都會返回一份新的 data ，相當于每個組件實例都有自己私有的數(shù)據(jù)空間，它們只負責各自維護的數(shù)據(jù)，不會造成混亂。
而單純的寫成對象形式，就是所有的組件實例共用了一個 data ，這樣改一個全都改了。
漸進式框架的理解
答：主張最少；可以根據(jù)不同的需求選擇不同的層級；
Vue中雙向數(shù)據(jù)綁定是如何實現(xiàn)的？
答：vue 雙向數(shù)據(jù)綁定是通過 數(shù)據(jù)劫持 結(jié)合 發(fā)布訂閱模式的方式來實現(xiàn)的， 也就是說數(shù)據(jù)和視圖同步，數(shù)據(jù)發(fā)生變化，視圖跟著變化，視圖變化，數(shù)據(jù)也隨之發(fā)生改變；
核心：關(guān)于VUE雙向數(shù)據(jù)綁定，其核心是 Object.defineProperty() 方法。
單頁面應(yīng)用和多頁面應(yīng)用區(qū)別及優(yōu)缺點
答：單頁面應(yīng)用（SPA），通俗一點說就是指只有一個主頁面的應(yīng)用，瀏覽器一開始要加載所有必須的 html, js, css。所有的頁面內(nèi)容都包含在這個所謂的主頁面中。
但在寫的時候，還是會分開寫（頁面片段），然后在交互的時候由路由程序動態(tài)載入，單頁面的頁面跳轉(zhuǎn)，僅刷新局部資源。多應(yīng)用于pc端。
多頁面（MPA），就是指一個應(yīng)用中有多個頁面，頁面跳轉(zhuǎn)時是整頁刷新
單頁面的優(yōu)點：用戶體驗好，快，內(nèi)容的改變不需要重新加載整個頁面，基于這一點spa對服務(wù)器壓力較??；前后端分離；頁面效果會比較炫酷（比如切換頁面內(nèi)容時的專場動畫）。
單頁面缺點：不利于seo；導(dǎo)航不可用，如果一定要導(dǎo)航需要自行實現(xiàn)前進、后退。（由于是單頁面不能用瀏覽器的前進后退功能，所以需要自己建立堆棧管理）；初次加載時耗時多；頁面復(fù)雜度提高很多。
v-if和v-for的優(yōu)先級
答：當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優(yōu)先級，這意味著 v-if 將分別重復(fù)運行于每個 v-for 循環(huán)中。
所以，不推薦 v-if 和 v-for 同時使用。如果 v-if 和 v-for 一起用的話，vue中的的會自動提示 v-if 應(yīng)該放到外層去。
assets和static的區(qū)別
答：相同點：assets 和 static 兩個都是存放靜態(tài)資源文件。項目中所需要的資源文件圖片，字體圖標，樣式文件等都可以放在這兩個文件下，這是相同點
不相同點：assets 中存放的靜態(tài)資源文件在項目打包時，也就是運行 npm run build 時會將 assets 中放置的靜態(tài)資源文件進行打包上傳，所謂打包簡單點可以理解為壓縮體積，代碼格式化。
而壓縮后的靜態(tài)資源文件最終也都會放置在 static 文件中跟著 index.html 一同上傳至服務(wù)器。
static 中放置的靜態(tài)資源文件就不會要走打包壓縮格式化等流程，而是直接進入打包好的目錄，直接上傳至服務(wù)器。
因為避免了壓縮直接進行上傳，在打包時會提高一定的效率，但是 static 中的資源文件由于沒有進行壓縮等操作，所以文件的體積也就相對于 assets 中打包后的文件提交較大點。在服務(wù)器中就會占據(jù)更大的空間。
建議： 將項目中 template需要的樣式文件js文件等都可以放置在 assets 中，走打包這一流程。減少體積。
而項目中引入的第三方的資源文件如iconfoont.css 等文件可以放置在 static 中，因為這些引入的第三方文件已經(jīng)經(jīng)過處理，我們不再需要處理，直接上傳。
vue常用的修飾符
答：
.stop：等同于 JavaScript 中的 event.stop-Propagation() ，防止事件冒泡；
.prevent ：
等同于 JavaScript 中的 event.preventDe-fault() ，防止執(zhí)行預(yù)設(shè)的行為（如果事件可取消，則取消該事件，而不停止事件的進一步傳播）；
.capture ：與事件冒泡的方向相反，事件捕獲由外到內(nèi)；
.self ：只會觸發(fā)自己范圍內(nèi)的事件，不包含子元素；
.once ：只會觸發(fā)一次。
vue的兩個核心點
答：數(shù)據(jù)驅(qū)動、組件系統(tǒng)
數(shù)據(jù)驅(qū)動：ViewModel，保證數(shù)據(jù)和視圖的一致性。
組件系統(tǒng)： 應(yīng)用類UI可以看作全部是由組件樹構(gòu)成的。
vue和jQuery的區(qū)別
答：jQuery是使用選擇器（ $ ）選取DOM對象，對其進行賦值、取值、事件綁定等操作，其實和原生的HTML的區(qū)別只在于可以更方便的選取和操作DOM對象，而數(shù)據(jù)和界面是在一起的。
比如需要獲取label標簽的內(nèi)容：$("lable").val(); ,它還是依賴DOM元素的值。Vue則是通過Vue對象將數(shù)據(jù)和View完全分離開來了。
對數(shù)據(jù)進行操作不再需要引用相應(yīng)的DOM對象，可以說數(shù)據(jù)和View是分離的，他們通過Vue對象這個vm實現(xiàn)相互的綁定。這就是傳說中的MVVM。
引進組件的步驟
答: 在template中引入組件；在script的第一行用import引入路徑；用component中寫上組件名稱。
delete和Vue.delete刪除數(shù)組的區(qū)別
答：delete 只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。Vue.delete 直接刪除了數(shù)組 改變了數(shù)組的鍵值。
SPA首屏加載慢如何解決
答：安裝動態(tài)懶加載所需插件；使用CDN資源。
Vue-router跳轉(zhuǎn)和location.href有什么區(qū)別
答：使用 location.href= /url 來跳轉(zhuǎn)，簡單方便，但是刷新了頁面；使用 history.pushState( /url ) ，無刷新頁面，靜態(tài)跳轉(zhuǎn)；
引進 router ，然后使用 router.push( /url ) 來跳轉(zhuǎn)，使用了 diff 算法，實現(xiàn)了按需加載，減少了 dom 的消耗。
其實使用 router 跳轉(zhuǎn)和使用 history.pushState() 沒什么差別的，因為vue-router就是用了 history.pushState() ，尤其是在history模式下。
30. vue slot
答：簡單來說，假如父組件需要在子組件內(nèi)放一些DOM，那么這些DOM是顯示、不顯示、在哪個地方顯示、如何顯示，就是slot分發(fā)負責的活。
你們vue項目是打包了一個js文件，一個css文件，還是有多個文件？
答：根據(jù)vue-cli腳手架規(guī)范，一個js文件，一個CSS文件。
Vue里面router-link在電腦上有用，在安卓上沒反應(yīng)怎么解決？
答：Vue路由在Android機上有問題，babel問題，安裝babel polypill插件解決。
Vue2中注冊在router-link上事件無效解決方法
答：使用 @click.native 。原因：router-link會阻止click事件，.native指直接監(jiān)聽一個原生事件。
RouterLink在IE和Firefox中不起作用（路由不跳轉(zhuǎn)）的問題
答: 方法一：只用a標簽，不適用button標簽；方法二：使用button標簽和Router.navigate方法
axios的特點有哪些
答：
從瀏覽器中創(chuàng)建XMLHttpRequests；
node.js創(chuàng)建http請求；
支持Promise API；
攔截請求和響應(yīng)；
轉(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)；
取消請求；
自動換成json。
axios中的發(fā)送字段的參數(shù)是data跟params兩個，兩者的區(qū)別在于params是跟請求地址一起發(fā)送的，data的作為一個請求體進行發(fā)送
params一般適用于get請求，data一般適用于post put 請求。
請說下封裝 vue 組件的過程？
答：
建立組件的模板，先把架子搭起來，寫寫樣式，考慮好組件的基本邏輯。(os：思考1小時，碼碼10分鐘，程序猿的準則。)
準備好組件的數(shù)據(jù)輸入。即分析好邏輯，定好 props 里面的數(shù)據(jù)、類型。
準備好組件的數(shù)據(jù)輸出。即根據(jù)組件邏輯，做好要暴露出來的方法。
封裝完畢了，直接調(diào)用即可。
params和query的區(qū)別
答：用法：query要用path來引入，params要用name來引入，接收參數(shù)都是類似的，分別是 this.route.params.name 。
url地址顯示：query更加類似于我們ajax中g(shù)et傳參，params則類似于post，說的再簡單一點，前者在瀏覽器地址欄中顯示參數(shù)，后者則不顯示
注意點：query刷新不會丟失query里面的數(shù)據(jù) params刷新 會 丟失 params里面的數(shù)據(jù)。
vue初始化頁面閃動問題
答：使用vue開發(fā)時，在vue初始化之前，由于 div 是不歸 vue 管的，所以我們寫的代碼在還沒有解析的情況下會容易出現(xiàn)花屏現(xiàn)象，看到類似于 {{message}} 的字樣，
雖然一般情況下這個時間很短暫，但是我們還是有必要讓解決這個問題的。
首先：在css里加上 [v-cloak] { display: none; } 。如果沒有徹底解決問題，則在根元素加上 style="display: none;" :style="{display: block }"
vue更新數(shù)組時觸發(fā)視圖更新的方法
答：push()；pop()；shift()；unshift()；sort()；splice()；reverse()
vue常用的UI組件庫
答：Mint UI，element，VUX
vue修改打包后靜態(tài)資源路徑的修改
答：cli2 版本：將 config/index.js 里的 assetsPublicPath 的值改為 ./ 。
build: {
cli3版本：在根目錄下新建vue.config.js 文件，然后加上以下內(nèi)容：（如果已經(jīng)有此文件就直接修改）
module.exports = {
生命周期函數(shù)面試題篇
什么是 vue 生命周期？有什么作用？
答：每個 Vue 實例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程——例如，需要設(shè)置數(shù)據(jù)監(jiān)聽、編譯模板、將實例掛載到 DOM 并在數(shù)據(jù)變化時更新 DOM 等。
同時在這個過程中也會運行一些叫做 生命周期鉤子 的函數(shù)，這給了用戶在不同階段添加自己的代碼的機會。（ps：生命周期鉤子就是生命周期函數(shù)）
例如，如果要通過某些插件操作DOM節(jié)點，如想在頁面渲染完后彈出廣告窗， 那我們最早可在mounted 中進行。
第一次頁面加載會觸發(fā)哪幾個鉤子？
答：beforeCreate， created， before-Mount， mounted
簡述每個周期具體適合哪些場景
答：
beforeCreate： 在new一個vue實例后，只有一些默認的生命周期鉤子和默認事件，其他的東西都還沒創(chuàng)建。
在beforeCreate生命周期執(zhí)行的時候，data和methods中的數(shù)據(jù)都還沒有初始化。不能在這個階段使用data中的數(shù)據(jù)和methods中的方法
create：data 和 methods都已經(jīng)被初始化好了，如果要調(diào)用 methods 中的方法，或者操作 data 中的數(shù)據(jù)，最早可以在這個階段中操作
beforeMount： 執(zhí)行到這個鉤子的時候，在內(nèi)存中已經(jīng)編譯好了模板了，但是還沒有掛載到頁面中，此時，頁面還是舊的
mounted： 執(zhí)行到這個鉤子的時候，就表示Vue實例已經(jīng)初始化完成了。此時組件脫離了創(chuàng)建階段，進入到了運行階段。如果我們想要通過插件操作頁面上的DOM節(jié)點，最早可以在和這個階段中進行
beforeUpdate： 當執(zhí)行這個鉤子時，頁面中的顯示的數(shù)據(jù)還是舊的，data中的數(shù)據(jù)是更新后的， 頁面還沒有和最新的數(shù)據(jù)保持同步
updated： 頁面顯示的數(shù)據(jù)和data中的數(shù)據(jù)已經(jīng)保持同步了，都是最新的
beforeDestory：Vue實例從運行階段進入到了銷毀階段，這個時候上所有的 data 和 methods ， 指令， 過濾器 ……都是處于可用狀態(tài)。還沒有真正被銷毀
destroyed： 這個時候上所有的 data 和 methods ， 指令， 過濾器 ……都是處于不可用狀態(tài)。組件已經(jīng)被銷毀了。
created和mounted的區(qū)別
答：created:在模板渲染成html前調(diào)用，即通常初始化某些屬性值，然后再渲染成視圖。
mounted:在模板渲染成html后調(diào)用，通常是初始化頁面完成后，再對html的dom節(jié)點進行一些需要的操作。
vue獲取數(shù)據(jù)在哪個周期函數(shù)
答：一般 created/beforeMount/mounted 皆可. 比如如果你要操作 DOM , 那肯定 mounted 時候才能操作.
請詳細說下你對vue生命周期的理解？
答：總共分為8個階段創(chuàng)建前/后，載入前/后，更新前/后，銷毀前/后。
創(chuàng)建前/后： 在beforeCreate階段，vue實例的掛載元素 el 還沒有。
載入前/后： 在beforeMount階段，vue實例的 $el 和data都初始化了，但還是掛載之前為虛擬的dom節(jié)點，data.message還未替換。在mounted階段，vue實例掛載完成，data.message成功渲染。
更新前/后： 當data變化時，會觸發(fā)beforeUpdate和updated方法。
銷毀前/后： 在執(zhí)行destroy方法后，對data的改變不會再觸發(fā)周期函數(shù)，說明此時vue實例已經(jīng)解除了事件監(jiān)聽以及和dom的綁定，但是dom結(jié)構(gòu)依然存在。
vue 路由面試題篇
mvvm 框架是什么？
答：vue是實現(xiàn)了雙向數(shù)據(jù)綁定的mvvm框架，當視圖改變更新模型層，當模型層改變更新視圖層。在vue中，使用了雙向綁定技術(shù)，就是View的變化能實時讓Model發(fā)生變化，而Model的變化也能實時更新到View。
vue-router 是什么?它有哪些組件
答：vue用來寫路由一個插件。router-link、router-view
active-class 是哪個組件的屬性？
答：vue-router模塊的router-link組件。children數(shù)組來定義子路由
怎么定義 vue-router 的動態(tài)路由? 怎么獲取傳過來的值？
答：在router目錄下的index.js文件中，對path屬性加上/:id。使用router對象的params.id。
vue-router 有哪幾種導(dǎo)航鉤子?
答：三種，
第一種： 是全局導(dǎo)航鉤子：router.beforeEach(to,from,next)，作用：跳轉(zhuǎn)前進行判斷攔截。
第二種： 組件內(nèi)的鉤子
第三種： 單獨路由獨享組件
** $route 和 $router 的區(qū)別**
答：router.push 方法。返回上一個歷史history用 $router.to(-1)
$route 為當前router跳轉(zhuǎn)對象。里面可以獲取當前路由的name,path,query,parmas等。
vue-router的兩種模式
答: hash模式： 即地址欄 URL 中的 # 符號；
history模式：window.history對象打印出來可以看到里邊提供的方法和記錄長度。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定瀏覽器支持）。
vue-router實現(xiàn)路由懶加載（ 動態(tài)加載路由 ）
答：三種方式
第一種：vue異步組件技術(shù) ==== 異步加載，vue-router配置路由 , 使用vue的異步組件技術(shù) , 可以實現(xiàn)按需加載 .但是,這種情況下一個組件生成一個js文件。
第二種： 路由懶加載(使用import)。
第三種：webpack提供的require.ensure()，vue-router配置路由，使用webpack的require.ensure技術(shù)，也可以實現(xiàn)按需加載。這種情況下，多個路由指定相同的chunkName，會合并打包成一個js文件。
vuex常見面試題篇
vuex是什么？怎么使用？哪種功能場景使用它？
答：vue框架中狀態(tài)管理。在main.js引入store，注入。
新建了一個目錄store.js，….. export 。
場景有：單頁應(yīng)用中，組件之間的狀態(tài)。音樂播放、登錄狀態(tài)、加入購物車
vuex有哪幾種屬性？
答：有五種，分別是 State、 Getter、Mutation 、Action、 Module
state => 基本數(shù)據(jù)(數(shù)據(jù)源存放地)
getters => 從基本數(shù)據(jù)派生出來的數(shù)據(jù)
mutations => 提交更改數(shù)據(jù)的方法，同步！
actions => 像一個裝飾器，包裹mutations，使之可以異步。
modules => 模塊化Vuex
Vue.js中ajax請求代碼應(yīng)該寫在組件的methods中還是vuex的actions中？
答：如果請求來的數(shù)據(jù)是不是要被其他組件公用，僅僅在請求的組件內(nèi)使用，就不需要放入vuex 的state里。
如果被其他地方復(fù)用，這個很大幾率上是需要的，如果需要，請將請求放入action里，方便復(fù)用。
