很全面的vue面試題總結

時間 2019-11-05

標籤全面 vue 面試總結欄目快樂工作简体版

原文原文鏈接

VUE面試題

v-show 與 v-if 區別
動態綁定class的方法
計算屬性和 watch 的區別
怎樣理解單向數據流
keep-alive
自定義組件的語法糖 v-model 是怎樣實現的
生命週期
組件通訊
路由跳轉
vue-router 有哪幾種導航鉤子
Vue.js 2.x 雙向綁定原理
什麼是 MVVM，與 MVC 有什麼區別
vuex
this.$nextTick()
vue的原理
理解Vue中的Render渲染函數
slot插槽

v-show 與 v-if 區別

v-hsow和v-if的區別： v-show是css切換，v-if是完整的銷燬和從新建立。
使用頻繁切換時用v-show，運行時較少改變時用v-if
v-if=‘false’ v-if是條件渲染，當false的時候不會渲染

綁定 class 的數組用法

對象方法 v-bind:class="{'orange': isRipe, 'green': isNotRipe}"
數組方法 v-bind:class="[class1, class2]"
行內 v-bind:style="{color: color, fontSize: fontSize+'px' }"

計算屬性和 watch 的區別

計算屬性是自動監聽依賴值的變化，從而動態返回內容，監聽是一個過程，在監聽的值變化時，能夠觸發一個回調，並作一些事情。因此區別來源於用法，只是須要動態值，那就用計算屬性；須要知道值的改變後執行業務邏輯，才用 watch，用反或混用雖然可行，但都是不正確的用法。javascript

說出一下區別會加分css

computed 是一個對象時，它有哪些選項？ computed 和 methods 有什麼區別？ computed 是否能依賴其它組件的數據？ watch 是一個對象時，它有哪些選項？html

有get和set兩個選項
methods是一個方法，它能夠接受參數，而computed不能，computed是能夠緩存的，methods不會。
computed能夠依賴其餘computed，甚至是其餘組件的data
watch 配置

handler deep 是否深度 immeditate 是否當即執行前端

總結vue

當有一些數據須要隨着另一些數據變化時，建議使用computed。當有一個通用的響應數據變化的時候，要執行一些業務邏輯或異步操做的時候建議使用watcherjava

事件修飾符

綁定一個原生的click事件，加native，
其餘事件修飾符
stop prevent self
組合鍵 click.ctrl.exact 只有ctrl被按下的時候才觸發

組件中 data 爲何是函數

爲何組件中的 data 必須是一個函數，而後 return 一個對象，而 new Vue 實例裏，data 能夠直接是一個對象？react

由於組件是用來複用的，JS 裏對象是引用關係，這樣做用域沒有隔離，而 new Vue 的實例，是不會被複用的，所以不存在引用對象的問題。面試

keep-alive

cn.vuejs.org/v2/guide/co…vue-router

自定義組件的語法糖 v-model 是怎樣實現的

www.cnblogs.com/attacking-c…vuex

根據官方文檔介紹，v-model本質上就是語法糖，即利用v-model綁定數據後，其實就是既綁定了數據，又添加了一個input事件監聽，以下：

怎樣理解單向數據流

這個概念出如今組件通訊。父組件是經過 prop 把數據傳遞到子組件的，可是這個 prop 只能由父組件修改，子組件不能修改，不然會報錯。子組件想修改時，只能經過 $emit 派發一個自定義事件，父組件接收到後，由父組件修改。通常來講，對於子組件想要更改父組件狀態的場景，能夠有兩種方案：在子組件的 data 中拷貝一份 prop，data 是能夠修改的，但 prop 不能：

export default {
  props: {
    value: String
  },
  data () {
    return {
      currentValue: this.value
    }
  }
}
複製代碼

若是是對 prop 值的轉換，可使用計算屬性：

export default {
  props: ['size'],
  computed: {
    normalizedSize: function () {
      return this.size.trim().toLowerCase();
    }
  }
}
複製代碼

生命週期

建立先後 beforeCreate/created

在beforeCreate 階段，vue實例的掛載元素el和數據對象data都爲undefined，還未初始化。在created階段，vue實例的數據對象有了，el尚未。
載入先後 beforeMount/mounted

在beforeMount階段，vue實例的$el和data都初始化了，但仍是掛載以前未虛擬的DOM節點，data還沒有替換。在mounted階段，vue實例掛載完成，data成功渲染。
更新先後 beforeUpdate/updated

當data變化時，會觸發beforeUpdate和updated方法。這兩個不經常使用，不推薦使用。
銷燬先後beforeDestory/destoryed

beforeDestory是在vue實例銷燬前觸發，通常在這裏要經過removeEventListener解除手動綁定的事件。實例銷燬後，觸發的destroyed。

組件間的通訊

父子 props/event $parent/$children ref provide/inject
兄弟 bus vuex
跨級 bus vuex provide inject

路由的跳轉方式

通常有兩種

<router-link to='home'> router-link標籤會渲染爲<a>標籤，咋填template中的跳轉都是這種；
另外一種是編程是導航也就是經過js跳轉好比 router.push('/home')

Vue.js 2.x 雙向綁定原理

這個問題幾乎是面試必問的，回答也是有深有淺。基本上要知道核心的 API 是經過 Object.defineProperty() 來劫持各個屬性的setter / getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調，這也是爲何 Vue.js 2.x 不支持 IE8 的緣由（IE 8 不支持此 API，且沒法經過 polyfill 實現）。 cn.vuejs.org/v2/guide/re…

什麼是 MVVM，與 MVC 有什麼區別

www.ruanyifeng.com/blog/2015/0…

nextTick()

在下次 DOM 更新循環結束以後執行延遲迴調。在修改數據以後，當即使用這個回調函數，獲取更新後的 DOM。

// 修改數據
vm.msg = 'Hello'
// DOM 還未更新
Vue.nextTick(function () {
  // DOM 更新
})
複製代碼

vue的原理

segmentfault.com/a/119000001…

Vue的模式是m-v-vm模式，即（ model-view-modelView），經過modelView做爲中間層（即vm的實例），進行雙向數據的綁定與變化。

經過創建虛擬dom樹document.createDocumentFragment(),方法建立虛擬dom樹。
一旦被監測的數據改變，會經過Object.defineProperty定義的數據攔截，截取到數據的變化。
截取到的數據變化，從而經過訂閱——發佈者模式，觸發Watcher（觀察者）,從而改變虛擬dom的中的具體數據。
最後，經過更新虛擬dom的元素值，從而改變最後渲染dom樹的值，完成雙向綁定雙向綁定的實現

object.defineProperty 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性， 並返回這個對象。
語法：Object.defineProperty(obj, prop, descriptor)

var obj = {};
Object.defineProperty(obj,'hello',{
  get:function(){
    //咱們在這裏攔截到了數據
    console.log("get方法被調用");
  },
  set:function(newValue){
    //改變數據的值，攔截下來額
    console.log("set方法被調用");
  }
});
obj.hello//輸出爲「get方法被調用」，輸出了值。
obj.hello = 'new Hello';//輸出爲set方法被調用，修改了新值
複製代碼

咱們能夠作到數據的雙向綁定：

var obj = {};
Object.defineProperty(obj,'hello',{
  get:function(){
    //咱們在這裏攔截到了數據
    console.log("get方法被調用");
  },
  set:function(newValue){
    //改變數據的值，攔截下來額
    console.log("set方法被調用");
    document.getElementById('test').value = newValue;
    document.getElementById('test1').innerHTML = newValue;
  }
});
//obj.hello;
//obj.hello = '123';
document.getElementById('test').addEventListener('input',function(e){
  obj.hello = e.target.value;//觸發它的set方法
})
複製代碼

理解Vue中的Render渲染函數

www.cnblogs.com/tugenhua070…

VUE通常使用template來建立HTML，而後在有的時候，咱們須要使用javascript來建立html，這時候咱們須要使用render函數。

render函數return一個createElement組件中的子元素存儲在組件實列中 $slots.default 中。

return createElement('h1', this.title); createElement返回的是包含的信息會告訴VUE頁面上須要渲染什麼樣的節點及其子節點。咱們稱這樣的節點爲虛擬DOM，能夠簡寫爲VNode。

createElement 參數

{String | Object | Function}
複製代碼

一個HTML標籤字符串，組件選項對象，或者一個返回值類型爲String/Object的函數。該參數是必須的

子節點

子節點，可選，String 或 Array

Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // 標籤名稱
      this.$slots.default // 由子節點構成的數組
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})
複製代碼