前端面試題三（vue篇）

時間 2019-11-09

標籤端面試題 vue 简体版

原文原文鏈接

1.說說Vue組件間通訊方式

通訊種類

父組件向子組件通訊
子組件向父組件通訊 blog.csdn.net/qq_37570945…
隔代組件間通訊
兄弟組件間通訊

實現通訊方式

(一). props

經過通常標籤屬性實現父向子通訊
經過 *** 函數 *** 屬性實現子向父通訊
缺點：隔代組件和兄弟組件通訊比較麻煩

隔代組件得逐層傳遞
兄弟組件得藉助父組件

(二). vue自定義事件

vue內置實現，能夠代替函數類型的props

1). 綁定監聽：<MyComp @eventName="callback"
2). 觸發(分發)事件： this.$emit('eventName',data)

在父組件寫入子組件標籤時，給它綁定自定義監聽，給它指定回調函數，在子組件中分發事件，vue提供了$emit('指定時間名'，數據)，這時候數據就會從子組件傳遞給父組件
複製代碼

缺點：只適合子向父通訊

(三). 消息訂閱與發佈

須要引入消息訂閱與發佈的實現庫，如：pubsub-js

1). 訂閱消息： PubSub.subscribe('msg',(msg,data)=>{})
2). 發佈消息：PubSub.publish('msg',data)

優勢：此方式可用於任意關係組件間的通訊

(四). vuex

是什麼： vuex是vue官方提供的集中式管理vue多組件共享狀態數據的vue插件
優勢：對組件間關係沒有限制，且相比於pubsub庫管理更集中，更方便

(五). slot

是什麼：專門用來實現父向子傳遞帶數據的標籤

1). 子組件
2). 父組件

注意：通訊的標籤模板是在父組件中解析好再傳遞給子組件的

2.關於vue

vue是由餓了麼ued團隊開發並維護的一個漸進式js框架
vue是一個mvvm的框架

3.如何使用vue去構建項目

使用vue-cli腳手架工具構建項目
也能夠直接引入vue.js進行項目的構建

4.Vue生命週期函數

vue生命週期分爲四個階段:

組件建立時（creating）
模板渲染時（mounting）
數據更新時（updating）
組件卸載時（destroying）

vue生命週期完整過程：

5.Vuex 管理狀態的機制

對Vuex基本理解

1). 是什麼：Vuex是一個專爲Vue.js應用程序開發的狀態管理的vue插件
2). 做用：集中式管理vue多個共享的狀態和後臺獲取數據,主要是爲了解決組件間狀態共享的問題，強調的是集中式管理，主要便於維護，便於解耦，因此不是全部的項目都適合使用vuex。

Vuex的工做原理

6.說出4個vue當中的指令和它的用法

v-if 條件渲染指令，表明存在銷燬
v-bind 綁定指令，用來綁定屬性（簡寫方式是：）
v-on 監聽事情指令（簡寫是@）
v-for 循環指令

7.導航鉤子有哪些？他們有哪些參數？

導航鉤子其實就是路由的生命週期（vue-router）
主要分爲全局和局部
全局鉤子函數

1). beforeEach: 路由切換開始調用
2). afterEach: 在路由切換離開時調用

局部到單個路由

1). beforeEnter

組件的鉤子函數

1). beforeRouterEnter
2). beforeRouterUpdate
3). beforeRouterLeave

參數

1). to:即將進入的目標對象
2). from:當前導航要離開對象
3). next: 是一個函數調用 resolve 執行一下

8.v-model是什麼？Vue中標籤怎麼綁定事件？

vue中利用v-model來進行表單數據的雙向綁定
v-bind 綁定一個value的屬性
利用v-on 把當前的元素綁定到一個事件上

<div id="demo">
    <input v-model="inputValue" />
    <p>{{inputValue}}</p>
    
    <input v-bind:value="inputValue2" v-on:input="inputValue2 = $event.target.value" />
</div>
<script>
    var vm = new Vue({
        el:"#demo",
        data:{
            inputValue:'',
            inputValue2:''
        }
    })
</script>
複製代碼

9.路由懶加載

理解：路由懶加載也叫延遲加載，即在你須要的時候加載

如何使用：使用到了vue中的異步組件，配合webpack的代碼分離，只須要本身返回一個permise函數，resolve中只包含你想要用的那個xxx.vue文件就能夠了。

//在router文件的index.js中進行懶加載
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Detail from '@/components/Detail'

function resolveView(view){
    return ()=> import(/*webpack chunk name*/`@/components/${view}.vue`)
}

export default new Router({
    routes:[
        {
            path:'/',
            name:'HelloWorld',
            component: resolveView('HelloWorld')
        },
        {
            path:'/detail',
            name:'Detail',
            component: resolveView('Detail')
        },
    ]
})
複製代碼

10.Vue-loader 解釋一下

(一).什麼是vue-loader?

vue-loader 就是一個加載器，能把.vue組件轉化成Javascript模塊

(二).爲何咱們要轉譯這個vue組件

能夠動態的渲染一些數據
對三個標籤都作了優化，script中能夠直接使用es6 style 也默承認以使用sass,而且還提供了做用域的選擇
另外開發階段，還提供了熱加載

11.用過插槽碼？用的具名插槽仍是匿名插槽呢？

含義：

vue中的插槽是一個很是好用的東西，slot 說白了就是一個佔位
在vue當中插槽包含三種一種是默認插槽（匿名插槽），一種是具名插槽，一種是做用域插槽

1). 匿名插槽 ：就是沒有名字的，只要默認的都填到這裏
2). 具名插槽 ：指的是具備名字的
3). 做用域插槽 ：指只做用域當前的slot

舉例：

//子組件about.vue
<template>
    <div>
        <h2>關於插槽</h2>
        <slot name="header"></slot>                 /*具名插槽*/
        <slot></slot>                               /*匿名插槽*/
        <slot name="footer" say="hello"></slot>     /*say='hello'傳遞的參數*/
    </div>
</template>
<script>
    export default {
        name:'about'
    }
</script>

複製代碼

//父組件：helloWorld.vue
<template>
    <div>
        <About>
            <h2>這是HelloWorld組件的內容</h2>
            <div slot="footer" slot-scope="aaa">
                {{aaa}}這是底部
            </div>
            <div></div>
            <div slot="header" slot-scope="aaa">
                {{aaa}}這是頭部
            </div>
        </About>
    </div>
</template>
<script>
import About from '@/componts/About';
export defalut {
    name:'HelloWorld',
    components：{
        About
    }
}
</script>

複製代碼

打印結果：

12.說說你對vue虛擬DOM的理解

(一).什麼是虛擬dom

說白了就是以js對象的形式去添加dom元素
本質上是優化了diff算法
採用了新舊dom的對比獲取你差別的dom，一次性更新到你真實的dom上
虛擬dom自己也有本身的缺陷，他更適合批量修改dom
儘可能不要跨層級修改dom
設置key 能夠最大的利用節點

13.如何理解Vue的MVVM模式

(一). mvvm 和 mvc 之間的區別

mvc 指的是model view controller
mvvm指的是model view viewModel
而vue專一於view 和 viewModel 的框架

(二). mvc流程

用戶輸入數據(view) =>給到控制器(controller)=>控制器判斷能夠把數去傳遞給model => model傳遞完數據會再給到view
有時候用戶把數據(view)傳遞給控制期(controller),controller會判斷這個數據不須要通過數據庫請求，就能夠把數據直接返回給view
view 不須要業務處理，只須要數據請求，view 也能夠直接像model請求

(三). mvvm流程

14.Vue中keep-alive的做用

(一).什麼是keep-alive

說白了它能讓不活動的組件 "活着"
它提供了 include 和 exclude 兩個屬性容許組件有條件的緩存

(二).實現的原理

其實就是在created的時候將須要的緩存的vnode節點放到 cache 中，在render的時候根據name進行取出

(三).怎麼使用它

在路由的meta中添加 keepAlive 屬性
跟 router-view 配合使用的

// router/index.js
export default new Router({
    routes:[
        {
            path:'/',
            name:'HelloWorld',
            component:resolveView('HelloWorld'),
            meta:{
                keepAlive:true
            }
        }
    ]
})
複製代碼

// App.vue
<template>
    <div>
        <keep-alive>
            <router-view v-if="$route.meta.keepAlive" />
        </keep-alive>
    </div>
</template>
複製代碼