Vue學習知識點總結

使用vue已經有一段時間了，在這裏先說一些本身感受有必要鞏固一下知識查漏補，因此總結的一些vue知識點，vue官網的文檔已經很是清楚了，若是有什麼不明白的或錯誤的歡迎大佬們給我留言。

1.vue生命週期

學習和使用vue就離不開vue生命週期，每一個 Vue 實例在被建立時都要通過一系列的初始化過程，而生命週期就是在這個過程當中運行的一些方法。

下圖是vue生命週期示意圖，在這張圖中咱們能夠看到在vue的生命週期中的一些方法：

當new一個實例的時候vue就會按照這個生命週期進行渲染。

1.1 beforeCreate

beforeCreate (建立前) ---在實例初始化以後，數據觀測 (data observer) 和 event/watcher 事件配置以前被調用。

在這個生命週期中能夠設置loading動畫或者根據路由信息進行重定向，使用最多的一個操做就是在獲取路由信息而後結合Vuex把這些信息存儲在store中，若是有其餘的能夠在留言區交流。

(Tips:該代碼結合了nuxt.js、vuex的一些方法。)

1.2 created

created (建立後) --- 在實例建立完成後被當即調用。在這一步，實例已完成如下的配置：數據觀測 (data observer)，屬性和方法的運算，watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。

在今生命週期中this.$data能夠訪問，可以直接調用methods定義的方法，watcher、events也能夠執行；

1.3 beforeMount

beforeMount (載入前)在掛載開始以前被調用：相關的 render 函數首次被調用。

該鉤子在服務器端渲染期間不被調用。

1.4 mounted

mounted (載入後)el 被新建立的 vm.$el 替換，並掛載到實例上去以後調用該鉤子。若是 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。

注意 mounted 不會承諾全部的子組件也都一塊兒被掛載。若是你但願等到整個視圖都渲染完畢，能夠用 vm.$nextTick 替換掉 mounted：

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}複製代碼

該鉤子在服務器端渲染期間不被調用。

1.5 beforeUpdate

beforeUpdate (更新前)數據更新時調用，發生在虛擬 DOM 打補丁以前。這裏適合在更新以前訪問現有的 DOM，好比手動移除已添加的事件監聽器。

該鉤子在服務器端渲染期間不被調用，由於只有初次渲染會在服務端進行。

1.6 updated

因爲數據更改致使的虛擬 DOM 從新渲染和打補丁，在這以後會調用該鉤子。

當這個鉤子被調用時，組件 DOM 已經更新，因此你如今能夠執行依賴於 DOM 的操做。然而在大多數狀況下，你應該避免在此期間更改狀態。若是要相應狀態改變，一般最好使用計算屬性或 watcher 取而代之。

注意 updated 不會承諾全部的子組件也都一塊兒被重繪。若是你但願等到整個視圖都重繪完畢，能夠用 vm.$nextTick 替換掉 updated：

updated: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been re-rendered
  })
}複製代碼

該鉤子在服務器端渲染期間不被調用。

1.7 beforeDestroy

beforeDestroy (銷燬前)實例銷燬以前調用。在這一步，實例仍然徹底可用。

該鉤子在服務器端渲染期間不被調用。

1.8 destroyed

destroyed (銷燬後)Vue 實例銷燬後調用。調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。

該鉤子在服務器端渲染期間不被調用。

2.Vue組件間的參數傳遞

2.1父子組件傳值

父組件給子組件傳值：子組件經過props方法接受數據;

子組件給父組件傳值：$emit方法傳遞參數；

2.1非父子組件傳值

使用vuex，vuex是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。後續會添加一些vuex的使用方法。