用Vue開發了一個專案，雖然專案做完了，但心中卻沒有一個完整的知識體系，不能稱之為會Vue，也許只能稱之為了解，這段時間閒剩下來，找到Vue.js 的官網，簡直了。。。簡直都是自己陌生的各種語法函式，都懷疑自己是怎麼做的專案啦！

先參考vue官網從簡單的看起！先了解下vue的生命週期。

也許我們從上圖中並不能直觀的看出生命週期中的函式的具體使命，先簡短的用文字瞭解下：

beforeCreate():例項在記憶體中被創建出來，還沒有初始化好data和methods屬性。

create():例項已經在記憶體中建立，已經初始化好data和method，此時還沒有開始編譯模板。

beforeMount():已經完成了模板的編譯，還沒有掛載到頁面中。

mounted()：將編譯好的模板掛載到頁面指定的容器中顯示。

beforeUpdate():狀態更新之前執行函式，此時data中的狀態值是最新的，但是介面上顯示的資料還是舊的，因為還沒有開始重新渲染DOM節點。

updated():此時data中的狀態值和介面上顯示的資料都已經完成了跟新，介面已經被重新渲染好了！

beforeDestroy():例項被銷燬之前。

destroyed():例項銷燬後呼叫，Vue例項指示的所有東西都會解綁，所有的事件監聽器都會被移除,所有的子例項也都會被銷燬。元件已經被完全銷燬，此時組建中所有data、methods、以及過濾器，指令等，都已經不可用了。

這些都是官方說明，在實際開發專案中這些鉤子函式如何使用呢？

beforecreate : 可以在這函式中初始化載入動畫
created ：做一些資料初始化，實現函式自執行  
mounted： 呼叫後臺介面進行網路請求，拿回資料，配合路由鉤子做一些事情 
 destoryed ：當前元件已被刪除，清空相關內容 

在這裡我要說明下自己在開發專案中最常用的是什麼？在mounted中做網路請求和重新賦值，在destoryed中清空頁面資料。

 資料物件data：初始化屬性及能夠其響應資料變化，data

//使用方法
data: function () {
    return {
      message: 'Welcome Vue'，
      goodsImg: '',
      itemGoodsId: '',
      imageUrls: []
    }
  },

 計算屬性computed：將返回function內return的值賦值在html的DOM上，computed內的function也只執行一次。僅當function內涉及到Vue例項繫結的data的值的改變，function才會從新執行，並修改DOM上的內容。

<template>
  <div>
    <div>翻轉後：  {{reversedMessage}}</div>
    <div  @click="clickReverse">釋出</div>
  </div>
</template>

<script>
  export default {
    name: 'test',
    data(){
      return{
        message: 'hello'
      }
    },
    computed: {
      reversedMessage: function () {
        return this.message.split('').reverse().join('')
      }
    },
    methods:{
      clickReverse(){
        this.message = 'hello world'
        this.reversedMessage()//重新修改DOM的值
      }
    }
  }
</script>

 自定義方法methods：methods:{所有頁面的自定義函式}

<div  @click="clickReverse">點選</div>
<div  @click="clickTap('方法被呼叫了嗎')">點選傳參</div>


  methods:{
      clickReverse(){
        this.message = 'hello world'
        this.reversedMessage()//重新修改DOM的值
      },
      clickTap(data){
        console.log(data)//'方法被呼叫了嗎'
      }
    }

beforeRouteEnter(to, from, next)：進入路由之前執行的函式,寫在元件裡可根據路由進行頁面判斷或傳值。

beforeRouteLeave(to, from, next)：離開路由之前執行的函式,可用於頁面的反向傳值，頁面跳轉。

 // 點選後拿到資料返回給下單地址
  beforeRouteLeave (to, from, next) {
    if (to.name === 'home') {
      to.query.temp = '這裡是引數，選中後的地址'
    }
    console.log(to)
    console.log(from)
    next()//一定不要忘記寫
  },

上面這些函式就是在實際開發中特別常用到的，能正確的使用，可以讓我們的開發事半功倍！