20190604-Vue的生命周期

OpenDigg 發布于2019-08-23 17:57 / 901人閱讀

摘要：銷毀前組件實例銷毀前執行的方法。銷毀后組件銷毀后，調用的方法，對的改變不會再觸發函數周，實例已經解除事件監聽和綁定，但結構依然存在。掛在完成后的生命周期鉤子注冊。生產版本設為可以啟用檢查。的全局語法用法在下次更新循環結束后執行延遲回調。

什么是生命周期？

每個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(`{{ msg }}`)

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

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

GPU云服務器云服務器線程的生命周期 bug的生命周期 activity的生命周期 ios應用的生命周期

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104408.html

Maven 生命周期

摘要：生命周期生命周期是為了對所有的構建過程進行抽象和統一，開發了一套高度完善的易擴展的生命周期。生命周期本身不做任何實際的工作，實際的任務都交給插件來完成。生命周期步驟在中，有三套相互獨立的生命周期，分別是和。 Maven 生命周期 Maven 生命周期是為了對所有的構建過程進行抽象和統一，開發了一套高度完善的、易擴展的生命周期。這個生命周期包含了項目的清理、初始化、編譯、測試、打包、集成...

CoreDump 2019-08-19 10:35 評論0 收藏0
vue生命周期

摘要：接觸兩個月了，今天說一說里邊很重要的生命周期，記得最開始接觸的時候我問了一下周邊的同事，這些生命周期都有什么用，得到的答案是里邊可以操作屬性，你記住就完事了，于是乎。。。接觸Vue兩個月了，今天說一說vue里邊很重要的生命周期，記得最開始接觸的時候我問了一下周邊的同事，這些生命周期都有什么用，得到的答案是mounted里邊可以操作屬性，你記住mounted就完事了，于是乎。。。數據...

godlong_X 2019-08-23 18:38 評論0 收藏0
用生命周期感知組件處理生命周期

摘要：生命周期感知組件會執行操作來響應另一個組件如和的生命周期狀態的改變。使用兩個主要枚舉來追蹤其關聯組件的生命周期狀態從和類中分發的生命周期事件，這些事件映射到和的回調事件中。生命周期感知組件會執行操作來響應另一個組件（如 activity 和 fragment）的生命周期狀態的改變。這些組件可以幫助你生成組織性更好、更輕量級、更易于維護的代碼。一個常見的模式是在 activity 和...

acrazing 2019-08-16 10:58 評論0 收藏0