很全面的vue面試題總結

時間 2019-11-07

標籤全面 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，用反或混用雖然可行，但都是不正確的用法。
說出一下區別會加分
computed 是一個對象時，它有哪些選項？
computed 和 methods 有什麼區別？
computed 是否能依賴其它組件的數據？
watch 是一個對象時，它有哪些選項？javascript

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

總結css

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

事件修飾符

綁定一個原生的click事件，加native，
其餘事件修飾符

stop prevent self前端

組合鍵

click.ctrl.exact 只有ctrl被按下的時候才觸發vue

組件中 data 爲何是函數

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

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

keep-alive

https://cn.vuejs.org/v2/guide...react

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

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

怎樣理解單向數據流

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

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

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

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 實現）。
https://cn.vuejs.org/v2/guide...

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

http://www.ruanyifeng.com/blo...

nextTick()

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

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

vue的原理

https://segmentfault.com/a/11...

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渲染函數

https://www.cnblogs.com/tugen...

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
    }
  }
})