VUE生命周期

以下主要從幾個方面來講：

1.vue的生命周期是什么和執行順序。

2.vue中內置的方法 屬性和vue生命周期的運行順序（methods、computed、data、watch）.

 

一、vue的生命周期是什么

Vue實例有一個完整的生命周期，也就是從開始創建、初始化數據、編譯模板、掛載Dom、渲染→更新→渲染、卸載等一系列過程，我們稱這是Vue的生命周期。通俗說就是Vue實例從創建到銷毀的過程，就是生命周期。

在組件中具體的方法有:

  beforeCreate、created(此時需說明可以在created中首次拿到data中定義的數據)、beforeMount、mounted(此時需說明dom樹渲染結束，可訪問dom結構)、beforeUpdate、updated、beforeDestroy、destroyed

 

二、vue中內置的方法 屬性和vue生命周期的運行順序（methods、computed、data、watch、props)

  props => methods =>data => computed => watch; 

 

Vue中computed和watch的區別

計算屬性computed : 

1. 支持緩存，只有依賴數據發生改變，才會重新進行計算

2. 不支持異步，當computed內有異步操作時無效，無法監聽數據的變化

3.computed 屬性值會默認走緩存，計算屬性是基於它們的響應式依賴進行緩存的，也就是基於data中聲明過或者父組件傳遞的props中的數據通過計算得到的值

4. 如果一個屬性是由其他屬性計算而來的，這個屬性依賴其他屬性，是一個多對一或者一對一，一般用computed

5.如果computed屬性屬性值是函數，那么默認會走get方法；函數的返回值就是屬性的屬性值；在computed中的，屬性都有一個get和一個set方法，當數據變化時，調用set方法。

 

 

偵聽屬性watch：

1. 不支持緩存，數據變，直接會觸發相應的操作；

2.watch支持異步；

3.監聽的函數接收兩個參數，第一個參數是最新的值；第二個參數是輸入之前的值；

4. 當一個屬性發生變化時，需要執行對應的操作；一對多；

5. 監聽數據必須是data中聲明過或者父組件傳遞過來的props中的數據，當數據變化時，觸發其他操作，函數有兩個參數，

　　immediate：組件加載立即觸發回調函數執行，當值第一次進行綁定的時候並不會觸發watch監聽，使用immediate則可以在最初綁定的時候執行。

　　deep: 深度監聽，為了發現 對象內部值的變化，復雜類型的數據時使用，例如數組中的對象內容的改變，注意監聽數組的變動不需要這么做。注意：deep無法監聽到數組的變動和對象的新增，參考vue數組變異,只有以響應式的方式觸發才會被監聽到。

如果只是監聽obj內的某一個屬性變化，可以直接obj.key進行監聽。

 

 

v-for循環key的作用

問題

v-for循環時為什么要加key。

問題描述

問這個問題時，好多人再先回答的都是頁面有警告，編輯器有提示，我會直接說不考慮報錯和提示的問題，或者會問如果不加key的話，頁面會不會出現什么異常情況。有的人會說是一個標識，標識他的唯一性，我會繼續追問為什么要標識唯一性呢，不加又怎么樣？

期望答案

vue的dom渲染是虛擬dom，數據發生變化時，diff算法會只比較更改的部分，如果數據項的順序被改變，Vue將不是移動DOM元素來匹配數據項的改變，而是簡單復用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素。舉例說明：有一個列表我們現在在中間插入了一個元素，diff算法會默認復用之前的列表並在最后追加一個，如果列表存在選中一類的狀態則會隨着復用出現綁定錯誤的情況而不是跟着原元素，key的作用就可以給他一個標識，讓狀態跟着數據渲染。(這一塊是我自己的一個大概理解，表述不太清楚，具體的可以去查一下文檔，本文就不具體描述此問題了。)

 

$nextTick作用

問題

$nextTick用過嗎，有什么作用。

問題描述

問到這個問題時，很多人都會說到可以處理異步，而往下追問為什么要用nextTick，他解決了什么問題，不用他會怎么樣的時候就很多人說不上來了。

期望答案

在下次 DOM 更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的 DOM。(官網解釋)解決的問題：有些時候在改變數據后立即要對dom進行操作，此時獲取到的dom仍是獲取到的是數據刷新前的dom，無法滿足需要，這個時候就用到了$nextTick。

 

$set作用

問題

vue中的$set用過嗎，為什么要用它，解決了什么問題

問題描述

這個問題知道的人就基本都能說出來，但是不知道的就是一點不了解，有的還會說到es6的set結構

期望答案

向響應式對象中添加一個屬性，並確保這個新屬性同樣是響應式的，且觸發視圖更新。它必須用於向響應式對象上添加新屬性，因為 Vue 無法探測普通的新增屬性 (比如 this.myObject.newProperty = 'hi')(官方示例)

我自己的理解就是，在vue中對一個對象內部進行一些修改時，vue沒有監聽到變化無法觸發視圖的更新，此時來使用$set來觸發更新，使視圖更新為最新的數據。

 

組件間的傳值

問題

說一下組件間的傳值方式，你知道的所有方式都說一下

期望答案

1. provide / inject這對選項需要一起使用，以允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深，並在起上下游關系成立的時間里始終生效。

2. Vue.observable讓一個對象可響應。Vue 內部會用它來處理 data 函數返回的對象。返回的對象可以直接用於渲染函數和計算屬性內，並且會在發生改變時觸發相應的更新。也可以作為最小化的跨組件狀態存儲器，用於簡單的場景：

const state = Vue.observable({ count: 0 })const Demo = {  render(h) {    return h('button', {      on: { click: () => { state.count++ }}    }, `count is: ${state.count}`)  }}

3. $attrs包含了父作用域中不作為 prop 被識別 (且獲取) 的特性綁定 (class 和 style 除外)。當一個組件沒有聲明任何 prop 時，這里會包含所有父作用域的綁定 (class 和 style 除外)，並且可以通過 v-bind="$attrs" 傳入內部組件——在創建高級別的組件時非常有用。

4. $listeners包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它可以通過 v-on="$listeners" 傳入內部組件——在創建更高層次的組件時非常有用。

5. props

6. $emit

7. eventbus

8. vuex

9. $parent / $children / ref