詳解vue生命週期(重點！！)
首先，每個Vue例項在被建立之前都要經過一系列的初始化過程,這個過程就是vue的生命週期。首先看一張圖吧~這是官方文件上的圖片相信大家一定都會很熟悉：
可以看出在vue——整個的生命週期中會有很多鉤子函式提供給我們在vue生命週期的不同時可進行操作，那麼先列出所有的鉤子函式，然後我們在一一詳解！
- beforeCreate //例項建立前狀態 el與data都為undefined
- created //建立完畢狀態 el為undefined， data 裡面已經有資料
- beforeMount //掛載前狀態 el:undefined data裡面已有資料
- mounted //掛載後狀態 el與data都有相對應的屬性
- beforeUpdate //更新前狀態 data裡面的屬性值改變 el:[object HTMLDivElement]
- updated //更新完成狀態 data裡面的屬性值改變 el:[object HTMLDivElement]
- beforeDestroy //銷燬前狀態
- destroyed //銷燬狀態
打印出來的結果：
1. 在beforeCreate和created鉤子函式之間的生命週期
在這個生命週期之間，進行初始化事件，進行資料的觀測，可以看到在created
注意看下：此時還是沒有el選項
2. created鉤子函式和beforeMount間的生命週期
在這一階段發生的事情還是比較多的。
首先會判斷物件是否有el選項。如果有的話就繼續向下編譯，如果沒有el選項，則停止編譯，也就意味著停止了生命週期，直到在該vue例項上呼叫vm.$mount(el)。此時註釋掉程式碼中:
el: '#app',然後執行可以看到到created的時候就停止了：
如果我們在後面繼續呼叫vm.$mount(el),可以發現程式碼繼續向下執行了
vm.$mount(el) //這個el引數就是掛在的dom接點
然後，我們往下看，template引數選項的有無對生命週期的影響。
（1）.如果vue例項物件中有template引數選項，則將其作為模板編譯成render函式。
（2）.如果沒有template選項，則將外部HTML作為模板編譯。
（3）.可以看到template中的模板優先順序要高於outer HTML的優先順序。
修改程式碼如下, 在HTML結構中增加了一串html，在vue物件中增加了template選項：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue生命週期學習</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="app">
<!--html中修改的-->
<h1>{{message + '這是在outer HTML中的'}}</h1>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
template: "<h1>{{message +'這是在template中的'}}</h1>", //在vue配置項中修改的
data: {
message: 'Vue的生命週期'
}
</script>
</html>執行後的結果可以看到在頁面中顯示的是：
那麼將vue物件中template的選項註釋掉後列印如下資訊：
這下就可以想想什麼el的判斷要在template之前了~是因為vue需要通過el找到對應的outer template。
new Vue({
el: '#app',
render: function(createElement) {
return createElement('h1', 'this is createElement')
}
})在vue物件中還有一個render函式，它是以createElement作為引數，然後做渲染操作，而且我們可以直接嵌入JSX.
可以看到頁面中渲染的是：
所以綜合排名優先順序：
render函式選項 > template選項 > outer HTML.
所以綜合排名優先順序：
render函式選項 > template選項 > outer HTML.
3. beforeMount和mounted 鉤子函式間的生命週期
可以看到此時是給vue例項物件新增$el成員，並且替換掉掛在的DOM元素。因為在之前console中列印的結果可以看到beforeMount之前el上還是undefined。
4. mounted
在mounted之前h1中還是通過{{message}}進行佔位的，因為此時還有掛在到頁面上，還是JavaScript中的虛擬DOM形式存在的。在mounted之後可以看到h1中的內容發生了變化。
5. beforeUpdate鉤子函式和updated鉤子函式間的生命週期
當vue發現data中的資料發生了改變，會觸發對應元件的重新渲染，先後呼叫beforeUpdate和updated鉤子函式。我們在console中輸入：
vm.message = '觸發元件更新'發現觸發了元件的更新：
6.beforeDestroy和destroyed鉤子函式間的生命週期
6.beforeDestroy和destroyed鉤子函式間的生命週期
beforeDestroy鉤子函式在例項銷燬之前呼叫。在這一步，例項仍然完全可用。
destroyed鉤子函式在Vue 例項銷燬後呼叫。呼叫後，Vue 例項指示的所有東西都會解繫結，所有的事件監聽器會被移除，所有的子例項也會被銷燬。
相關推薦
詳解vue生命週期(重點！！)
首先，每個Vue例項在被建立之前都要經過一系列的初始化過程,這個過程就是vue的生命週期。首先看一張圖吧~這是官方文件上的圖片相信大家一定都會很熟悉： 可以看出在vue——整個的生命週期中會有很多鉤子函式提供給我們在vue生命週期的不同時可進行操作，那麼先列出所
例項化vue發生了什麼?(詳解vue生命週期)
例項化vue發生了什麼?(詳解vue生命週期) 本文將對vue的生命週期進行詳細的講解,讓你瞭解一個vue例項的誕生都經歷了什麼~ 我在Github上建立了一個存放vue筆記的倉庫,以後會陸續更新一些知識和專案中遇到的坑,有興趣的同學可以去看看哈(歡迎star)! 傳送門 例項化一個Vue c
例項化vue發生了什麼(詳解vue生命週期)
const app = new Vue({ el:"#app', data:{ message:'hello,lifePeriod' }, methods:{ init(){ console.log('這是一個方法!'
【Vue】詳解Vue生命周期
pda -a clas 文本 con 存在 操作 ef6 註意 Vue實例的生命周期全過程（圖） （這裏的紅邊圓角矩形內的都是對應的Vue實例的鉤子函數） 在beforeCreate和created鉤子函數間的生命周期 在beforeC
Docker 命令詳解-容器生命週期管理（RUN）
一、概況 run: 建立一個新的容器並執行一個命令; 二、RUN詳情 2.1 語法 $ sudo docker run [OPTIONS] IMAGE [COMMAND] [ARG...] 具體版本特性，可通過命令檢視引數說明 $ sudo docke
詳解React生命週期及鉤子函式
父元件 import React , {Component} from 'react' import Son from './Son' class Father extends Component { constructor(props){
Android基礎：3分鐘詳解Activity生命週期
前言 Android開發中，會經常接觸 Activity，所以深入瞭解Activity生命週期非常重要 本文將深入講解Activity生命週期 的相關內容 閱讀本文 需 3分鐘
Vue生命週期函式詳解
vue例項的生命週期 1 什麼是生命週期（每個例項的一輩子） 概念：每一個Vue例項建立、執行、銷燬的過程，就是生命週期；在例項的生命週期中，總是伴隨著各種事件，這些事件就是生命週期函式； 生命週期：例項的生命週期，就是一個階段，從建立到執行，再到銷燬的階段； 生命週期函式：在例項的生命週
vue 生命週期詳解
每個Vue例項在被建立之前都要經過一系列的初始化過程,這個過程就是vue的生命週期。下面是生命週期圖 可以看到在vue一整個的生命週期中會有很多鉤子函式提供給我們在vue生命週期不同的時刻進行操作, 那麼先列出所有的鉤子函式，然後我們再一一詳解: befo
vue生命週期詳解
初心-楊瑞超個人部落格誠邀您加入qq群(IT-程式猿-技術交流群)：757345416 先上圖: 下面我們用例項來理解生命週期： <div class="test" style="border: 1px black dashed;padding: 8
vue 生命週期詳解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <st
詳解Vue的鉤子函式(路由導航守衛、keep-alive、生命週期鉤子)
說到Vue的鉤子函式，可能很多人只停留在一些很簡單常用的鉤子(created,mounted)，而且對於裡面的區別，什麼時候該用什麼鉤子，並沒有仔細的去研究過，且Vue的生命週期在面試中也算是比較高頻的考點，那麼該如何回答這類問題，讓人有眼前一亮的感覺呢… Vue-Router導航守衛：
Vue入門系列（五）Vue實例詳解與生命周期
auto res context mode parent all from bool silent 【入門系列】 【本文轉自】 http://www.cnblogs.com/fly_dragon Vue的實例是Vue框架的入口，其實也就是前端的ViewM
重磅！頭部姿態估計「原理詳解 + 實戰程式碼」來啦！
寫在前面 經過兩週的文獻和部落格閱讀，CV_Life君終於欣(dan)喜(zhan)若(xin)狂(jing)地給各位帶來head pose estimation這篇文章，因為剛剛入手這個方向，如有疏漏請各位多多包涵，並多多指教。廢話少說，先放個Demo熱熱身。 Head Pose Estimatio
Python 拓展之詳解深拷貝和淺拷貝！
首先我在這介紹兩個新的小知識，要在下面用到。一個是函式 id() ，另一個是運算子 is。id() 函式就是返回物件的記憶體地址；is 是比較兩個變數的物件引用是否指向同一個物件，在這裡請不要和 == 混了，== 是比較兩個變數的值是否相等。 >>> a = [1,2,3] &
在Eclipse上安裝外掛springsource-tool-suite詳解，完美不報錯！以及yml無自動提示？
在Eclipse上操作springboot過程中，開啟yml檔案時，為何沒有提示訊息？ 答：提示訊息是需要eclipse的一個叫sts的外掛支援的。 為何在eclipse上線上安裝springsource-tool-suite外掛時，總報錯，安裝不成功？ 那麼我們需要離
瑞芯微RK3399中文詳解（帶開源資料）！！！
RK3399： RK3399是瑞芯微推出的一款低功耗、高效能的應用處理器晶片，該晶片基於Big.Little架構,即具有獨立的NEON協同處理器的雙核Cortex-A72及四核Cortex-A53組合架構，主要應用於計算機、個人網際網路移動裝置、VR、廣告機等智慧終端裝置。
在Eclipse上安裝外掛springsource-tool-suite詳解，完美不報錯！&&yml為何沒有提示訊息？
在Eclipse上操作springboot過程中，開啟yml檔案時，為何沒有提示訊息？ 答：提示訊息是需要eclipse的一個叫sts的外掛支援的。 為何在eclipse上線上安裝springsour
linux命令詳解，史上最全！！！
linux常用命令總結，歡迎轉載 一.咿咿呀呀階段 首先先教你們四個熱鍵，學會這四個鍵，收益一輩子。 Tab按鍵---命令補齊功能 Ctrl+c按鍵---停掉正在執行的程式
使用Pytorch訓練分類器詳解（附python演練）！
【前言】：你已經瞭解瞭如何定義神經網路，計算loss值和網路裡權重的更新。現在你也許會想資料怎麼樣？ 目錄： 一．資料 二．訓練一個影象分類器 使用torchvision載入並且歸一化CIFAR10的訓練和測試資料集 定義一個卷積神經網路 定義一個損失函式 在