最近博主在學習vue的ssr渲染部分，使用的是nuxt.js，跟着官網學習，其中涉及到nuxt生命周期的問題，官網只給出了生命周期的圖片，沒有文字講解，這讓我很迷惑，到底哪個階段發生了什么，哪個階段是在服務端運行的，哪個階段是在客戶端運行的，下面是我查閱其他人的博客整理出來的，如果有錯誤，希望大家能狠狠的戳我幾下。
在講解nuxt生命周期前，我們需要了解一下nuxt是用來做什么的！
1.nuxt官方文檔
https://www.nuxtjs.cn/guide
簡單來說，Nuxt 就是基於Vue的一個應用框架，采用 服務端渲染 ，讓你的SPA應用(Vue)也可以擁有SEO
Nuxt.js簡單的說是Vue.js的通用框架，最常用的就是用來作SSR（服務器端渲染）。再直白點說，就是Vue.js原來是開發SPA（單頁應用）的，但是隨着技術的普及，很多人想用Vue開發多頁應用，並在服務端完成渲染。這時候就出現了Nuxt.js這個框架，她簡化了SSR的開發難度。還可以直接用命令把我們制作的vue項目生成為靜態html。
生成的文件夾架構：
2、NuxtJs的生命周期
眾所周知，Vue 的生命周期全都跑在客戶端(瀏覽器)，而Nuxt的生命周期有些在服務端(Node)、客戶端，甚至兩邊都在:
以上是 nuxt.js 的生命周期流程圖，紅框內的是Nuxt 的生命周期(運行在服務端)，黃框內同時運行在服務端&&客戶端上，綠框內則運行在客戶端
因為 紅框、黃框內的周期都不存在Window對象，所以不能直接使用window
<script>
export default {
asyncData() {
console.log(window) // 服務端報錯
},
fetch() {
console.log(window) // 服務端報錯
},
created () {
console.log(window) // undefined
},
mounted () {
console.log(window) // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
}
}
</script>
下面詳細講一下每個鈎子函數執行情況：
incoming request
這個階段是服務器收到請求，開始走流程
nuxtServerInit
1.服務器初始化
2.只能夠在store/index.js中使用
3.用於在渲染頁面之前存儲數據到vuex中
例子
參數：
第一個參數是：vuex上下文
第二個參數是：Nuxt上下文
middleware
這個階段會執行一些預定義的中間件，自己定義的中間件也會在這個階段執行
validate
可以讓你在動態路由對應的頁面組件中配置一個校驗方法用於校驗動態路由參數的有效性。(具體實現請參考官方文檔)
asyncData
這個方法可以使得你能夠在渲染組件之前異步獲取數據。好比你在vue組件中用created獲取數據一樣，不同的是asyncData是在服務端執行的
還有要注意的是：asyncData只是在首屏的時候調用一次（即頁面渲染之前，所以事件觸發不了它）
fetch
fetch 方法用於在渲染頁面前填充應用的狀態樹（store）數據， 與 asyncData 方法類似，不同的是它不會設置組件的數據。
如果頁面組件設置了 fetch 方法，它會在組件每次加載前被調用（在服務端或切換至目標路由之前）。
fetch 方法的第一個參數是頁面組件的上下文對象 context，我們可以用 fetch 方法來獲取數據填充應用的狀態樹。為了讓獲取過程可以異步，你需要返回一個 Promise，Nuxt.js 會等這個 promise 完成后再渲染組件。
注意，在fetch階段是無法使用this獲取組件實例，fetch是在組件初始化之前被調用（好像fetch函數也會在created和beforeMount之間執行一次）
<template>
<h1>Stars: {{ $store.state.stars }}</h1>
</template>
<script>
export default {
fetch({ store, params }) {
return axios.get('http://my-api/stars').then(res => {
store.commit('setStars', res.data)
})
}
}
</script>
如果要在fetch中調用並操作store，請使用store.dispatch，但是要確保在內部使用async / await等待操作結束：
<script>
export default {
async fetch({ store, params }) {
await store.dispatch('GET_STARS')
}
}
</script>
render
這個階段開始准備客戶端渲染，如果過程中有通過nuxt-link跳轉，會退回至middleware階段重新執行
beforeCreat和created階段
這個和vue中的鈎子函數功能基本類似，有一個小的差別，vue的這兩個鈎子只在客戶端執行，nuxt的這兩個鈎子在客戶端和服務端都會執行一遍
其他階段
之后的階段都是在客戶端中執行，比如beforeMount和mounted階段等等
好了，關於nuxt生命周期的內容就寫到這里吧，如果有哪里寫的不對或者需要補充的，歡迎在評論區@我
