20190604-Vue的生命週期

什麼是生命週期？

每一個Vue實例在被建立時都通過了一系列的初始化過程

• 設置數據監聽
• 編譯模板
• 將實例掛載到DOM
• 數據變化時更新DOM

在這一系列過程當中，也會運行一些「生命週期鉤子」的函數，用在給開發者在不一樣階段添加本身的代碼的機會。

「created」鉤子，在一個實例被建立後執行代碼

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 實例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

不要在選項屬性或回調上使用箭頭函數，好比 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。由於箭頭函數並無 this，this 會做爲變量一直向上級詞法做用域查找，直至找到爲止，常常致使 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之類的錯誤。

參考 Vue實例

通俗的講：就是在.Vue從加載前到銷燬後，這一些系列過程當中，有特定的階段fn能夠提供咱們開發者來進行操做。

階段

鉤子函數方法	觸發階段	操做
beforeCreate	建立前	組件實例剛被建立，組件屬性計算前，數據對象data都未定義，未初始化
created	建立後	組件實例建立完成，屬性已經綁定，數據對象data已經定義存在，DOM沒爲生成，$el未存在
beforeMount	掛載前	Vue實例的$el和data都已經初始化完成，掛在前爲虛擬的dom節點，模板尚未渲染到HTML頁面上去，data.message未替換。
mounted	掛載後	Vue實例掛載完成，模板已經渲染到HTML中，dota.message成功渲染。這個階段能夠作一些ajax請求操做，mounted在週期中只會執行一次。
beforeUpdate	更新前	當dota更新以前，會觸發beforeUpdate方法。
updated	更新後	當data更新完成後，觸發updated方法。
beforeDestory	銷燬前	Vue組件實例銷燬前執行的方法。
destroyed	銷燬後	組件銷燬後，調用的方法，對data的改變不會再觸發函數週，vue實例已經解除事件監聽和dom綁定，但dom結構依然存在。

示例

import Axios from 'axios'       // 這是一個輕量級的ajax庫，import是es6模塊導入的語法。
export default {                // 這是一個vue的模塊，後面講奧。
  name: 'app',
  components: {
  },
  data: function () {
    return {
      list: []
    }
  },
  mounted: function () {          // 掛在完成後的生命週期鉤子註冊。
    this.$nextTick(function () {  // 等待下一次更新完成後執行業務處理代碼。
      Axios.get('/api/menulist', {// 將回調延遲到下次 DOM 更新循環以後執行。在修改數據以後當即使用它，而後等待 DOM 更新
        params: {
        }
      }).then(function (res) {
        this.list = res.data
      }.bind(this))
    })
  }
}

Vue實例的全局配置

• silent

  • 類型：boolean
  • 默認值：false
  • 用法：

  Vue.config.silent = true
  // 取消Vue全部的日誌與警告

• optionMergeStrategies

  • 類型： { [key: string]: Function }
  • 默認值： {}
  • 用法：

  Vue.config.optionMergeStrategies._my_option=function( parent,child,vm){
      return child+1
  }
  const Profile = Vue.extend({
      _my_option: 1
  })
  Profile.options._my_option = 2
  // 自定義合併策略選項
  // 合併策略選項分別接受第一個參數做爲父實例，第二個參數爲子實例，Vue實例上下文被做爲第三個參數傳入。

• devtools

  • 類型：boolean
  • 默認值：true
  • 用法：

  // 務必在加載 Vue 以後，當即同步設置如下內容Vue.config.devtools = true
  // 配置是否容許 vue-devtools 檢查代碼。開發版本默認爲 true，生產版本默認爲 false。生產版本設爲 true 能夠啓用檢查。

Vue的全局API

• Vue.nextTick

語法：Vue.nextTick([callback, context])

{Function}[callback]
{Object}[callback]

用法：

在下次DOM更新循環結束後執行延遲迴調。在修改數據以後當即使用這個方法，獲取更新後的DOM

// 修改數據
vm.msg = 'msg'
// DOM未更新
Vue.nexTick(function() {
    // DOM更新了
    // 執行操做
})

• Vue.set

語法：Vue.set( object, key, value)

參數:

{Object} object
{String} key
{any} value

用法：

設置對象數據。若是對象是響應式的，確保屬性被建立後也是響應式的，同時觸發視圖更新，這個方法主要用於避開Vue不能檢測屬性被添加的限制。注意對象不能使Vue示例，或者Vue實例的根數據對象。

• Vue.complie

語法：Vue.compile(template)

參數：

{string} template

用法：

// 在render函數中編譯模板字符串
// 在獨立構建時有效
var res = Vue.Compile(`<div><span>{{ msg }}</span></div>`)

new Vuew({
    data:{
        msg:'hello'
    },
    render:res.render,
    staticRenderFns:res.staticRenderFns
})

更多的API和用法請看-> API-Vue