Vue 2.0中生命周期與鉤子函數的一些理解

更新時間：2017年05月09日 08:45:20 作者：夏日蟬鳴

這篇文章主要給大家介紹了關于Vue 2.0中生命周期與鉤子函數的相關資料，對大家學習或者使用vue2.0具有一定的參考學習價值，需要的朋友們下面隨小編一起來看看吧。

前言

在使用vue一個多禮拜后，感覺現在還停留在初級階段，雖然知道怎么和后端做數據交互，但是對于mounted這個掛載還不是很清楚的。放大之，對vue的生命周期不甚了解。只知道簡單的使用，而不知道為什么，這對后面的踩坑是相當不利的。

因為我們有時候會在幾個鉤子函數里做一些事情，什么時候做，在哪個函數里做，我們不清楚。

于是我開始先去搜索，發(fā)現vue2.0的生命周期沒啥文章。大多是1.0的版本介紹。最后還是找到一篇不錯的（會放在最后）

vue生命周期簡介

咱們從上圖可以很明顯的看出現在vue2.0都包括了哪些生命周期的函數了。

生命周期探究

對于執(zhí)行順序和什么時候執(zhí)行，看上面兩個圖基本有個了解了。下面我們將結合代碼去看看鉤子函數的執(zhí)行。

ps:下面代碼可以直接復制出去執(zhí)行

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app">
 <p>{{ message }}</p>
</div>

<script type="text/javascript">
 
 var app = new Vue({
 el: '#app',
 data: {
  message : "xuxiao is boy" 
 },
 beforeCreate: function () {
  console.group('beforeCreate 創(chuàng)建前狀態(tài)===============》');
  console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
  console.log("%c%s", "color:red","data : " + this.$data); //undefined 
  console.log("%c%s", "color:red","message: " + this.message) 
 },
 created: function () {
  console.group('created 創(chuàng)建完畢狀態(tài)===============》');
  console.log("%c%s", "color:red","el : " + this.$el); //undefined
  console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 
  console.log("%c%s", "color:red","message: " + this.message); //已被初始化
 },
 beforeMount: function () {
  console.group('beforeMount 掛載前狀態(tài)===============》');
  console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
  console.log(this.$el);
  console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 
  console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
 },
 mounted: function () {
  console.group('mounted 掛載結束狀態(tài)===============》');
  console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
  console.log(this.$el); 
  console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
  console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
 },
 beforeUpdate: function () {
  console.group('beforeUpdate 更新前狀態(tài)===============》');
  console.log("%c%s", "color:red","el : " + this.$el);
  console.log(this.$el); 
  console.log("%c%s", "color:red","data : " + this.$data); 
  console.log("%c%s", "color:red","message: " + this.message); 
 },
 updated: function () {
  console.group('updated 更新完成狀態(tài)===============》');
  console.log("%c%s", "color:red","el : " + this.$el);
  console.log(this.$el); 
  console.log("%c%s", "color:red","data : " + this.$data); 
  console.log("%c%s", "color:red","message: " + this.message); 
 },
 beforeDestroy: function () {
  console.group('beforeDestroy 銷毀前狀態(tài)===============》');
  console.log("%c%s", "color:red","el : " + this.$el);
  console.log(this.$el); 
  console.log("%c%s", "color:red","data : " + this.$data); 
  console.log("%c%s", "color:red","message: " + this.message); 
 },
 destroyed: function () {
  console.group('destroyed 銷毀完成狀態(tài)===============》');
  console.log("%c%s", "color:red","el : " + this.$el);
  console.log(this.$el); 
  console.log("%c%s", "color:red","data : " + this.$data); 
  console.log("%c%s", "color:red","message: " + this.message)
 }
 })
</script>
</body>
</html>

create 和 mounted 相關

咱們在chrome瀏覽器里打開，F12看console就能發(fā)現