VUE面試題詳解

一、VUE有哪些生命週期的鉤子,分別能起什麼作用?

   Vue算起來總共有八個生命週期的鉤子,分別是:

   1.beforeCreate:在實例初始化之後,數據觀測 (data observer) 和 event/watcher 事件配置之前被調用。什麼意思呢?就是在這個階段,Vue實例被創建,但是還沒有在Vue實例對象裏添加像data,methods等一些對象屬性,就是這些還沒被初始化。也還沒有被掛載到DOM對象上。

     通常在這個鉤子裏會做一些loading事件

  2.created:數據綁定和事件監聽初始化完成,但還沒有完成掛載。就是說現在頁面上還沒有內容,Vue實例對象已經創建完成,屬性和方法什麼的都有了。

     通常會在這個階段去向後臺請求渲染頁面需要的資源。


另外在第2步和第3步中間,Vue會執行compile函數,去編譯模板。說白了就是根據<template>標籤的HTML結構來創建虛擬DOM。

  3.beforeMount,在掛載開始之前被調用。在這個階段,Vue已經將虛擬DOM繪製在頁面上,但是數據的渲染還沒做。就是說,現在已經可以訪問到$el了,但是訪問到的會是像這樣

<p>{{message}}</p>

   而且還要注意,在這個階段裏,最好不要去操作$el或$refs綁定的DOM對象。因爲這個階段是Vue去標記這些DOM節點的時候,去操作的話可能會發生意想不到的錯誤。

   4.mounted:掛載完成。就是頁面已經渲染好了。但是要注意的是,不能保證子組件也已經掛載完成,因此官方文檔中推薦,如果希望整個頁面包括子組件都渲染完成,可以使用$nextTick鉤子。

     另外,如果想要在js中去操作DOM元素,也可以在這個階段去做。

  5.beforeUpdata:數據更新時調用,發生在虛擬 DOM 打補丁之前。這裏適合在更新之前訪問現有的 DOM,      比如手動移除已添加的事件監聽器。

  6.updataed:當這個鉤子被調用時,組件 DOM 已經更新,所以你現在可以執行依賴於 DOM 的操作。就是說如果更改綁定的數據,重新渲染DOM,那麼這個鉤子中的函數會在DOM渲染完成後去執行。

    跟mounted一樣,Vue不保證子組件也能夠滿足上述條件,因此使用$nextTick會更安全一些。

  7.beforeDestroy:實例銷燬之前調用。在這一步,實例仍然完全可用。

  8.destroyed:Vue 實例銷燬後調用。調用後,Vue 實例指示的所有東西都會解綁定,所有的事件監聽器會被移     除,所有的子實例也會被銷燬。

  除了以上八個生命週期的鉤子函數,Vue還提供了三個用於組件和錯誤相關的鉤子

    1.activated:keep-alive 組件激活時調用。

    2.deactivated:keep-alive 組件停用時調用。

    3.errorCaptured:當捕獲一個來自子孫組件的錯誤時被調用。此鉤子會收到三個參數:錯誤對象、發生錯誤的組件實例以及一個包含錯誤來源信息的字符串。此鉤子可以返回 false 以阻止該錯誤繼續向上傳播。


二、Vue 如何實現組件通信

   這個可以分爲三種方法:

   1.父子組件間通信:一般父組件向子組件傳遞數據會使用props。比如像這樣

父組件:
<V-child :someData="propsData"></V-child>
propsData是定義在父組件data中的一個對象
然後在子組件的props屬性中應該這樣寫
props:{
  someData:{
     type:Object,
     default:{
       ....
     }
   }
}

需要注意的是,例子中的子組件接收的someData對象中的type屬性是指 指定的對象,如果不是指定的Object對象,就不會接收,而是使用default中定義的默認值。

另外,使用props傳遞數據是單向的。子組件如果要向父組件傳遞數據,要使用$emit和$on。舉個例子

在父組件中,
不管在模板裏或是JS代碼裏,
比如在模板的標籤裏,用v-on來監聽一個事件
<Vchild @on-change="doSomething($event)"></Vchild>
doSomething($event)是定義在父組件methods裏的一個函數,參數$event用來接收子組件傳上的參數。

在子組件中
比如mothods中任意一個方法裏去調用
this.$emit('on-change',向上傳遞的數據)

   2.非父子組件間通信

     非父子組件比如兄弟組件或是其他不同層級的組件間要實現通信,同理也是使用$on和$emit.

首先要先定義一個事件巴士,
var bass = new Vue()
然後在A組件中監聽相關事件
bass.$on('doSomething',function(){
    ....
})

在B組件中去執行該事件
bass.$emit('doSomething',傳遞的參數)

   3.使用Vuex作爲數據中心。

三、Vue的雙向數據綁定實現原理

VUE主要是使用數據劫持和發佈-訂閱模式來實現雙向數據綁定的。

主要做了下面三個工作:

1、實現一個數據監聽器Observer,能夠對數據對象的所有屬性進行監聽,如有變動可拿到最新值並通知訂閱者
2、實現一個指令解析器Compile,對每個元素節點的指令進行掃描和解析,根據指令模板替換數據,以及綁定相應的更新函數
3、實現一個Watcher,作爲連接Observer和Compile的橋樑,能夠訂閱並收到每個屬性變動的通知,執行指令綁定的相應回調函數

四、computed和watch的區別

1.computed不能監聽data中定義的屬性。一般使用來監聽一個模板中的變量,該變量依賴於data中的屬性,當data屬性有變化,能響應式的執行回調。

2.computed有緩存。計算屬性是基於他們的依賴進行緩存的。可以看成是一個getter,又有區別。就是當依賴沒有變化而去訪問了計算屬性時,不會執行回調,而是返回之前的計算結果。

而watch每次都會重新計算。

3.watch通常用來執行比較大開銷的操作。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章