常見的vue面試題

00一、v-show與v-if的區別
v-show:操做的是元素的display屬性
v-if:操做的是元素的建立和插入
相比較而言v-show的性能要高

00二、methods、computed、watch三者的區別
methods是個方法，執行的時候須要事件進行觸發
computed是一個計算屬性，是實時響應的，只要data中的屬性發生了變化那麼就會觸發computed，計算屬 性是基於屬性的依賴進行緩存的，methods調用的時候須要加()，而computed調用的時候是不須要加()
watch屬性監聽，watch用來監聽屬性的變化，當值發生變化的時候來執行特定的函數，watch監聽屬性的時候 會有2個參數newVal和oldVal一個新值一箇舊值

00三、vue中自定義指令如何使用
Vue.directive():
參數1：指令名稱
參數2：指令實現的函數，在回調函數中第一次參數是指令綁定的元素，參數二是一個對象其中對象中有value 屬性表明的是表達式返回的結果，還有modifiers屬性是指令的修飾符

00四、vue中組件建立的方式有哪些？
全局組件和局部組件
全局組件 Vue.component();參數1：組件名稱  參數2：組件的配置項
局部組件 new Vue({    components:{} key值爲組件名稱  val值爲組件的配置項 })

00五、vue中的過濾器如何使用
Vue.filter()
參數1：過濾器名稱
參數2：過濾器實現的方法  該方法中有2個參數  參數1爲須要過濾的數據，參數2爲過濾器傳遞的參數

00六、如何實現父子組件傳值、非父子組件傳值
父組件傳遞子組件：    經過屬性進行傳遞   接受用props屬性進行接受。 props屬性用來接收外部屬性。    在父組件中當子組件看成標籤使用的時候給子組件添加屬性，值爲須要傳遞的值。在子組件內部經過props 進行接受。接受的方式有2種，第一種爲數組接受，第二種爲對象接受，推薦用第二種，對象形式的能夠限制數 據的類型
子組件傳父組件    //方案一    在父組件中當子組件看成標籤使用的時候給子組件綁定自定義方法，子組件經過this.$emit()進行觸發。注意 自定義方法是不須要加()的        //方案二    利用solt插槽做用域。   
非父子組件傳值    方案一：        建立公共的Vue對象。經過調用Vue中的$on() $emit()進行傳值。須要接受值得一方調用$on,須要傳遞值 得一方調用$emit()
    方案二：        利用觀察者模式封裝$on $emit

00七、請說出vue中生命週期函數(鉤子函數)
一、beforeCreate():組件實例剛剛被建立  (el和data並未初始化)
二、created():組件建立完成,屬性已綁定,但DOM還未生成,$el屬性還不存在 (完成data數據的初始化)
三、beforeMount():模板編譯/掛載以前 (完成了el和data初始化)
四、Mounted():模板編譯/掛載以後 (完成掛載)
五、beforeUpdate():組件更新以前
六、updated()：組件更新以後
七、beforedestroy():組件銷燬以前
八、destroyed():組件銷燬以後

00八、請解釋一下vue的中單向數據流的理解
數據從父級組件傳遞給子組件,只能單向綁定，子組件不能直接修改從父級傳遞過來的數據
數據只能從一個方向來修改狀態,若是父組件給N個子組件進行了數據傳遞。那麼某一個子組件中修改了這個數 據，那麼就會致使其餘組件的數據也會發生改變。所以數據只能從一個方向來修改狀態

00九、請說下什麼是動態組件，如何使用，以及keep-alive的做用
動態組件：    讓多個組件使用同一個掛載點，並動態進行切換。這就是動態組件
    經過保留<component></component> 元素，動態的綁定它的is特性，能夠實現動態組件
keep-alive    包裹動態組件(組件)時，會緩存不活動的組件實例，而不是銷燬它們
    組件切換調用的時候自己會被銷燬掉的，只要加上keep-alive進行包裹，就不會被銷燬，而是被緩存起來， 下一次使用的時候直接從緩存中調用

0十、請說下組件的生命週期有哪些？
activated && deactivated:
    activated：當組件爲活躍狀態的時候觸發(活躍狀態：進入頁面的時候)
    deactivated：緩存狀態的時候觸發

0十一、vue中solt的使用方式，以及solt做用域插槽的用法
使用方式：    當組件當作標籤進行使用的時候，用slot能夠用來接受組件標籤包裹的內容，當給solt標籤添加name屬性的 時候，能夠調換響應的位置
插槽做用域：    做用域插槽其實就是帶數據的插槽，父組件接收來自子組件的slot標籤上經過v-bind綁定進而傳遞過來的數 據，父組件經過scope來進行接受子組件傳遞過來的數據

0十二、爲何在組件內部data是一個函數而不是一個對象？
由於每次調用組件的時候都會從新生成一個對象,若是是一個對象的狀況下，data數據會進行復用(由於對象是引 用數據類型),而當data是一個函數的時候每次調用的時候就會返回一個新的對象

01三、vue中動畫如何實現
哪一個元素須要動畫就給那個元素加transition標籤
進入時class的類型分爲如下幾種    <name>-enter  <name>-enter-active  <name>-enter-to
離開時class的類型分爲如下幾種
    <name>-leave     <name>-leave-active    <name>-leave-to
若是須要一組元素髮生動畫須要用標籤<transition-group><transition-group>

01四、淺談對路由的理解
什麼是路由？    根據不一樣的url地址展現不一樣的頁面或者數據。
路由分爲前端路由，和後端路由
前端路由：    一、前端路由多用於單頁面開發，也就是SPA。
    二、前端路由是不涉及到服務器的，是前端利用hash或者HTM5的historyApi來實現的，通常用於不一樣的內 容展現和切換

01五、路由跳轉的方式有哪幾種？
一、a標籤進行跳轉。例如<a href="#/home">首頁<a>
二、router-link進行跳轉  例如：<router-link to="/home">首頁<router-link>
三、編程式路由   例如：this.$router.push()

01六、路由傳值的方式有哪幾種
一、path路徑屬性傳值。例如：path:"/home/:id/name";  接受的時候經過 this.$route.params
二、query傳值。由於在url中？後面的參數不會被解析，所以咱們能夠經過query進行傳值。 接受的時候經過 this.$route.query
三、路由解耦。在配置路由的時候添加props屬性爲true,在須要接受參數的組件頁面經過props進行接受
四、編程式導航  this.$router.push({path:"/home",query:{}});

01七、請說出路由配置項經常使用的屬性及做用
路由配置參數：    path : 跳轉路徑
    component : 路徑相對於的組件
    name:命名路由
    children:子路由的配置參數(路由嵌套)
    props:路由解耦
    redirect : 重定向路由

01八、編程式導航使用的方法以及經常使用的方法
路由跳轉 ： this.$router.push()
路由替換  : this.$router.replace()
後退： this.$router.back()
前進 ：this.$router.forward()

01九、如何重定向路由
經過配置路由項中的redirect進行重定向

020、如何實現路由解耦
在路由的配置項中設置props:true  在須要接受組件的內部經過props進行接受

02一、如何檢測路由參數的變化
經過屬性監聽來實現或者beforeRouterUpdate()
watch:{    "$router"(){   
    } }
beforeRouterUpdate(to,from,next);

02二、什麼是路由守衛？路由的鉤子函數有哪些？分別說出使用的場景，及用法
一、什麼是路由守衛？       路由跳轉先後作的一些驗證
二、路由常見的鉤子函數 berforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
使用的場景 beforeRouteEnter:當路由進入以前:登錄驗證、熱力圖的記錄、
beforeRouteUpdate:當路由進行更新的時候。若是當前路由發生了變化，可是不須要組件的建立銷燬的過程的 時候，就須要用到這個鉤子函數
beforeRouterLeave:當路由離開的時候、當用戶沒有進行支付離開的時候、當用戶填寫完信息沒有保存的時 候......

02三、什麼是全局守衛
beforeEach:全局守衛。驗證用戶是否登錄
router.beforeEach((to,from,next)=>{     //登錄狀態    let status = false;    //因此路由組建的name名字    const nextRouter = ["two","three","detail"];
    if(nextRouter.indexOf(to.name)>=0){              if(!status){                   router.push({name:"login"})                }else{                   next();                }     }else{              next();        } })

02四、axios與jquery的ajax有什麼不一樣
axios的優勢：    一、從nodejs中建立http請求
    二、支持promiseAPI
    三、提供了一些併發請求的接口
    四、自動轉換json數據
    五、客戶端支持防止CSRF/XSRF
ajax的缺點：    一、jQuery項目龐大，單純的使用ajax卻要引入整個Jquery很是不合理
    二、基於原生的XHR開發，可是XHR架構並不清晰

02五、簡述vuex的數據傳遞流程
當組件進行數據修改的時候咱們須要調用dispatch來觸發actions裏面的方法。actions裏面的每一個方法中都會 有一個commit方法，當方法執行的時候會經過commit來觸發mutations裏面的方法進行數據的修改。 mutations裏面的每一個函數都會有一個state參數，這樣就能夠在mutations裏面進行state的數據修改 ，當數據修改完畢後，會傳導給頁面。頁面的數據也會發生改變

02六、雙向數據綁定的原理
vue實現雙向數據綁定的原理就是利用了 Object.defineProperty() 這個方法從新定義了對象獲取屬性值(get)和 設置屬性值(set)的操做來實現的。
Object.defineProperty() 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性， 並返回 這個對象。

02七、使用vue的時候會一會兒加載全部的東西使得初始化頁面很卡，該如何解決？ vue-router解決首次加載緩慢的問題。懶加載簡單來講就是按需加載。
像vue這種單頁面應用，若是沒有應用懶加載，運用webpack打包後的文件將會異常的大，形成進入首頁時， 須要加載的內容過多，時間過長，會出現長時間的白屏，即便作了loading也是不利於用戶體驗，而運用懶加載 則能夠將頁面進行劃分，須要的時候加載頁面，能夠有效的分擔首頁所承擔的加載壓力，減小首頁加載用時。
用法：在配置路由時使用：component:resolve=>require([「@components/路由的路徑」]，resolve)。 就是用了懶加載後打完包直接運行那個index.html會報錯，報文件引用錯誤實際上是打包時候路徑配置有點問 題，找到build下面的webpack.prod.conf.js   添加   publicPath："./",

02八、vue中的scoped
1. 在vue組件中，在style標籤上添加scoped屬性，以表示它的樣式做用於當下的模塊，很好的實現了樣式私有 化的目的，這是一個很是好的機制。
2. scoped確定是解決了樣式私有化的問題，但同時也引入了新的問題---樣式不易（可）修改，而不少時候， 咱們是須要對公共組件的樣式作微調的。因此我才說要謹慎使用 。 02九、vue路由傳值params和query的區別
1.query傳參和接收參數    傳參: this.$router.push({ path:'/xxx' query:{ id:id } })
    接收參數: this.$route.query.id
注意:傳參是this.$router,接收參數是this.$route,這裏千萬要看清了！！！
2.params傳參和接收參數    傳參: this.$router.push({ name:'xxx' params:{ id:id } })         接收參數: this.$route.params.id
兩者還有點區別，直白的來講query至關於get請求，頁面跳轉的時候，能夠在地址欄看到請求參數，而 params至關於post請求，參數不會再地址欄中顯示

030、跨域的方式
一、jsonp
二、正向代理 用http-proxy-middleware模塊 app.use("/api",proxy({
    target:"協議+域名",    changeOrigin:true }))
三、cors PHP中

03一、在Vue中使用插件的步驟 * 採用ES6的import ... from ...語法或CommonJSd的require()方法引入插件
* 使用全局方法Vue.use( plugin )使用插件,能夠傳入一個選項對象Vue.use(MyPlugin, { someOption: true })

03二、請列舉出3個Vue中經常使用的生命週期鉤子函數 * created: 實例已經建立完成以後調用,在這一步,實例已經完成數據觀測, 屬性和方法的運算, watch/event事件回調. 然而, 掛載階段尚未開始, $el屬性目前還不可見
* mounted: el被新建立的 vm.$el 替換，並掛載到實例上去以後調用該鉤子。若是 root 實例掛載了一個 文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。
* activated: keep-alive組件激活時調用 03三、第一次頁面加載會觸發哪幾個鉤子 第一次頁面加載時會觸發 beforeCreate, created, beforeMount, mounted 這幾個鉤子

03四、簡單描述每一個週期具體適合哪些場景
* beforecreate : 能夠在這加個loading事件，在加載實例時觸發
* created : 初始化完成時的事件寫在這裏，如在這結束loading事件，異步請求也適宜在這裏調用
* mounted : 掛載元素，獲取到DOM節點
* updated : 若是對數據統一處理，在這裏寫上相應函數
* beforeDestroy : 能夠作一個確認中止事件的確認框
* nextTick : 更新數據後當即操做dom

03五、Vue裏面router-link在電腦上有用，在安卓上沒反應怎麼解決？
Vue路由在Android機上有問題，babel問題，安裝babel polypill 插件解決。

03六、vuex有哪幾種屬性(modules)有五種，分別是 State、 Getter、Mutation 、Action、 Module* vuex的State特性 A、Vuex就是一個倉庫，倉庫裏面放了不少對象。其中state就是數據源存放地，對應於通常Vue對象裏面的 dataB、state裏面存放的數據是響應式的，Vue組件從store中讀取數據，如果store中的數據發生改變，依賴這個 數據的組件也會發生更新C、它經過mapState、mapGetters把全局的 state 和 getters 映射到當前組件的 computed 計算屬性中* vuex的Getter特性 A、getters 能夠對State進行計算操做，它就是Store的計算屬性B、 雖然在組件內也能夠作計算屬性，可是getters 能夠在多組件之間複用C、 若是一個狀態只在一個組件內使用，是能夠不用getters* vuex的Mutation特性 Action 相似於 mutation，不一樣在於：Action 提交的是 mutation，而不是直接變動狀態；Action 能夠包 含任意異步操做。