Vue初級面試題彙總

時間 2019-11-06

標籤 vue 初級面試彙總欄目快樂工作简体版

原文原文鏈接

Vue2.0兼容IE哪一個版本以上嗎？

參考答案

不支持ie8及如下，部分兼容ie9 ，徹底兼容10以上，由於vue的響應式原理是基於es5的Object.defineProperty(),而這個方法不支持ie8及如下。css

請描述下vue的生命週期是什麼？

參考答案

beforeCreate：實例建立前被調用；
created：實例建立後被調用，完成數據觀測，屬性和方法的運算，watch/event事件回調，模板渲染成html前（vm.$el未定義）故數據初始化最好在這階段完成；
beforeMount：在$el掛載前被調用，相關的 render 函數首次被調用，期間將模塊渲染成html,此時vm.$el仍是未定義；
mounted：在$el掛載後被調用，此時vm.$el能夠調用，不能保證全部的子組件都掛載，要等視圖所有更新完畢用vm.$nextTick();
beforeUpdate：數據更新時調用;
updated：數據更新後調用;
activated：<keep-alive></keep-alive>包裹的組件激活時調用；
deactivated:<keep-alive></keep-alive>包裹的組件離開時調用；
beforeDestroy:實例銷燬以前調用,此時實例仍然徹底可用；
destroyed：實例銷燬以後調用,此時實例的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。

computed中的屬性名和data中的屬性名能夠相同嗎？

參考答案

不能同名，由於不論是computed屬性名仍是data數據名仍是props數據名都會被掛載在vm實例上，所以這三個都不能同名。html

if (key in vm.$data) {
    warn(`The computed property "${key}" is already defined in data.`, vm)
} else if (vm.$options.props && key in vm.$options.props) {
    warn(`The computed property "${key}" is already defined as a prop.`, vm)
}
複製代碼

data的屬性名能夠和methods中的屬性名相同嗎？

參考答案

不能同名，由於看源碼vue

let data = vm.$options.data
const keys = Object.keys(data)
const methods = vm.$options.methods
let i = keys.length
while (i--) {
    const key = keys[i]
    if (process.env.NODE_ENV !== 'production') {
        if (methods && hasOwn(methods, key)) {
            warn(
              `Method "${key}" has already been defined as a data property.`,
              vm
            )
        }
    }
}
複製代碼

怎麼緩存當前打開的路由組件，緩存後想更新當前組件怎麼辦呢？

參考答案

用<keep-alive></keep-alive>內置組件包裹路由組件,在鉤子函數activated中更新。緩存

跟keep-alive有關的生命週期是哪些？

參考答案

activated鉤子：keep-alive 組件激活時調用。
deactivated鉤子：keep-alive 組件停用時調用。
以上鉤子服務器端渲染期間不被調用。

watch的屬性使用箭頭函數定義能夠嗎？

參考答案

不能夠。this會是undefind,由於箭頭函數中的this指向的是定義時的this，而不是執行時的this，因此不會指向Vue實例的上下文。bash

watch:{
    show:(val)=>{
        console.log(this)//undefind this會指向show
    },
    id(val){
        conosle.log(this)//Vue實例對象
    }
}
複製代碼

怎麼在watch監聽開始以後當即被調用？

參考答案

在選項參數中指定immediate: true將當即以表達式的當前值觸發回調。服務器

watch怎麼深度監聽對象變化？

參考答案

watch:{
   a:{
       handler:function(val,oldval){
           
       },
       deep:true
   }
}
複製代碼

methods的方法用箭頭函數定義能夠嗎？

參考答案

不能夠。this會是undefind,由於箭頭函數中的this指向的是定義時的this，而不是執行時的this，因此不會指向Vue實例的上下文。less

怎麼強制刷新組件？

參考答案

this.$forceUpdate()。
組件上加上key，而後變化key的值。

父組件中的自定義事件怎麼接收子組件的多個參數？

參考答案

this.$emit('eventName',data),data能夠是個對象，包含子組件的多個參數，而後傳給父組件。ide

給組件綁定自定義事件無效怎麼解決？

參考答案

加上修飾詞.native。

怎麼訪問子組件的實例或者子元素？

參考答案

先用ref特性爲子組件賦予一個ID引用<base-input ref="myInput"></<base-input>
- 好比子組件有個focus的方法，能夠這樣調用this.$refs.myInput.focus()；
- 好比子組件有個value的數據，能夠這樣使用this.$refs.myInput.value。

先用ref特性爲普通的 DOM 元素賦予一個ID引用

<ul ref="mydiv">
    <li class="item">第一個li</li>
    <li class="item">第一個li</li>
</ul>
console.log(this.$refs['mydiv'].getElementsByClassName('item')[0].innerHTML)//第一個li
複製代碼

怎麼在子組件中訪問父組件的實例？

參考答案

使用this.$parent來訪問函數

怎麼在組件中訪問到根實例？

參考答案

this.$rootpost

組件會在何時下被銷燬？

參考答案

沒有使用keep-alive時的路由切換；
v-if='false'；
執行vm.$destroy()；

is這個特性你有用過嗎？主要用在哪些方面？

參考答案

動態組件

<component :is="componentName"></component>， componentName能夠是在本頁面已經註冊的局部組件名和全局組件名,也能夠是一個組件的選項對象。當控制componentName改變時就能夠動態切換選擇組件。
is的用法

有些HTML元素，諸如 <ul>、<ol>、<table>和<select>，對於哪些元素能夠出如今其內部是有嚴格限制的。

而有些HTML元素，諸如 <li>、<tr> 和 <option>，只能出如今其它某些特定的元素內部。
```
<ul>
    <card-list></card-list>
</ul>
複製代碼
```
因此上面<card-list></card-list>會被做爲無效的內容提高到外部，並致使最終渲染結果出錯。應該這麼寫：
```
<ul>
    <li is="cardList"></li>
</ul>
複製代碼
```

Vue組件之間的通訊都有哪些？

參考答案

props
this.$emit('input',data)
this.$root.$on('input',function(data){})和this.$root.$emit('emit',data)
this.$refs.tree
this.$parent
provide和inject
vueX

prop驗證的type類型有哪幾種？

參考答案

String、Number、Boolean、Array、Object、Date、Function、Symbol，此外還能夠是一個自定義的構造函數Personnel，而且經過 instanceof 來驗證propwokrer的值是不是經過這個自定義的構造函數建立的。

function Personnel(name,age){
    this.name = name;
    this.age = age;
}
export default {
    props:{
        wokrer:Personnel
    }
}
複製代碼

prop是怎麼作驗證的？能夠設置默認值嗎？

參考答案

export default {
    props:{
        propA:[String,Number],
        propB:{
            type:Number,
            default:1,
        },
        propC:Boolean,
        propD:{
            type:Object,
            default(){
                return{}
            }
        }
    }
}
複製代碼

在Vue事件中是如何使用event對象的？

參考答案

@click="handleOpen" 默認第一個參數傳入event對象;
@click="handleOpen(0, $event)",若是本身須要傳入參數和event對象，則須要使用$event來獲取event對象並傳入handleOpen。

在Vue事件中傳入`$event`，使用`$event.target`和`$event.currentTarget`有什麼區別？

參考答案

$event.currentTarget始終指向事件所綁定的元素，而$event.target指向事件發生時的元素。

寫出你知道的表單修飾符和事件修飾符

參考答案

事件修飾符
- .stop：阻止事件傳遞；
- .prevent：阻止默認事件；
- .capture ：在捕獲的過程監聽，沒有capture修飾符時都是默認冒泡過程監聽；
- .self：當前綁定事件的元素才能觸發；
- .once：事件只會觸發一次；
- .passive：默認事件會當即觸發，不要把.passive和.prevent一塊兒使用，由於.prevent將不起做用。
表單修飾符.number .lazy .trim

使用事件修飾符要注意什麼？

參考答案

要注意順序很重要，用@click.prevent.self會阻止全部的點擊，而@click.self.prevent只會阻止對元素自身的點擊。

說說你對Vue的表單修飾符.lazy的理解。

參考答案

input標籤v-model用lazy修飾以後，並不會當即監聽input的value的改變，會在input失去焦點以後，纔會監聽input的value的改變。

Vue如何監聽鍵盤事件？

參考答案

使用按鍵修飾符 <input @keyup.enter="submit">按下回車鍵時候觸發submit事件。

.enter
.tab
.delete (捕獲「刪除」和「退格」鍵)
.esc
.space
.up
.down
.left
.right

寫出你經常使用的指令有哪些？

參考答案

v-show、v-if、v-else-if、v-else、v-for、v-on、v-bind、v-model、v-once、v-slot、v-html、v-text。

v-once的使用場景有哪些？

參考答案

其做用是隻渲染元素和組件一次。隨後的從新渲染，元素/組件及其全部的子節點將被視爲靜態內容並跳過。故當組件中有大量的靜態的內容可使用這個指令。

v-show和v-if有什麼區別？使用場景分別是什麼？

參考答案

v-show，切換元素的display屬性,來控制元素顯示隱藏，初始化會渲染，適用頻繁顯示隱藏的元素,不能用在<template>上；
v-if，經過銷燬並重建組件，來控制組件顯示隱藏，初始化不會渲染，不適用頻繁顯示隱藏的組件，能夠用在<template>上。

v-on能夠綁定多個方法嗎？

參考答案

能夠，v-on後面接一個對象，可是不支持事件修飾符。

<template>
    <div v-on:{click:a,dblclick:b}></div>
</template>
<script>
    methods:{
        a(){
            alert(1)
        },
        b(){
            alert(2)
        }
    }
</script>
複製代碼

v-clock和v-pre有什麼做用

參考答案

v-clock：能夠解決在頁面渲染時把未編譯的 Mustache 標籤（{{value}}）給顯示出來。
```
[v-cloak] {
    display: none!important;
}
<div v-cloak>
    {{ message }}
</div>
複製代碼
```
v-pre：跳過這個元素和它的子元素的編譯過程。能夠用來顯示原始Mustache標籤。跳過大量沒有指令的節點會加快編譯。 <span v-pre>{{ this will not be compiled }}</span>

:class和:style有幾種表示方式？

參考答案

4種，動態綁定Class和Style

在.vue文件中style是必須的嗎？那script是必須的嗎？

參考答案

都不是必須的。

怎麼使css樣式只在當前組件中生效？

參考答案

<style lang="less" scoped></style>

在style上加scoped屬性須要注意哪些？

參考答案

若是在公共組件中使用，修改公共組件的樣式須要用/deep/。

你知道style上加scoped屬性的原理嗎？

參考答案

vue經過在DOM結構以及css樣式上加上惟一的標記`data-v-xxxxxx`，保證惟一，達到樣式私有化，不污染全局的做用。

Vue渲染模板時怎麼保留模板中的HTML註釋呢？

參考答案

在組件中將comments選項設置爲true
<template comments> ... <template>

vm.$nextTick有什麼做用？

參考答案

vm.$nextTick(() =>{this.handleadd()}),將handleadd回調延遲到下次 DOM 更新循環以後執行。

Vue中怎麼重置data？

參考答案

Object.assign(this.$data,this.$options.data())

手寫一個過濾器

參考答案

filters:{
    addUnit(val){
        if(val){
            return val+'元/米'
        }else{
            return ''
        }
    }
}
Vue.filter('addUnit',function(val){
    if(val){
        return val+'元/米'
    }else{
        return ''
    }
})
new Vue({
  // ...
})
複製代碼