Vue----生命週期鉤子函數

時間 2019-11-30

標籤 vue 生命週期鉤子函數简体版

原文原文鏈接

什麼是生命週期

Vue 的實例具備生命週期 Vue的實例在生成過程當中會經歷一系列初始化的過程數據的監聽編譯模板實例掛載DOM元素或者數據更新致使DOM更新在執行過程當中會運行生命週期的鉤子函數
實例在生命週期中特定的時間點執行的函數稱爲生命週期的鉤子函數 生命週期不能人爲控制執行順序

經常使用的生命週期

beforeCreate 在實例初始化以後數據觀測（data observer）和 watch配置以前被調用
created 實例建立完成後調用在這一步已經完成數據觀測屬性和方法的運算 watch事件的回調可是現階段尚未掛載
beforeMount 在掛載開始以前被調用建立虛擬DOM
mounted 把虛擬DOM 掛載到真實的DOM上在Vue中獲取DOM元素對象項目中AJAX請求通常都會在這裏或者created中發送
beforeUpdate 當數據發生變化時會觸發這個函數
updated 數據更改致使虛擬DOM從新渲染和打補丁在這以後會調用updated
beforeDestory 在實例被銷燬以前調用若頁面中有定時器會在這個鉤子函數中清除
destroyed 實例銷燬以後調用實例中的屬性不再是響應的 watch被移除

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <div @click="fn">{{msg}}</div>
</div>

<script src="vue.js"></script>
<script>
  // 生命週期：
  // Vue 的實例具備生命週期，Vue 的實例在生成的時候，會經歷一系列的初始化的過程；數據的監聽，編譯模板，實例掛載DOM元素，或者數據更新致使 DOM 更新，在執行的過程當中，會運行一些叫作生命週期的鉤子函數，在 Vue 實例生命週期中特定的時間點執行的函數稱爲生命週期的鉤子函數；

  // 若是咱們須要在某個生命週期處理一些事情，咱們能夠把這些事情寫在鉤子函數中；等到 Vue 的實例生命週期到這個階段就會執行這個鉤子，而咱們要作的事情也就得以處理了
  // 生命週期的鉤子函數不能人爲的控制其執行的順序；

  let vm = new Vue({
    data: {
      msg: 'hello'
    },
    methods: {
      fn() {console.log(11111)}
    },
    beforeCreate() {
      // 在實例初始化以後，數據觀測 (data observer) 和 watch 配置以前被調用。
      console.log(1);
      console.log(this.msg);
      console.log(this.$el); // this.$el 是根 DOM 元素
    },
    created() {
      // 在實例建立完成後被當即調用。在這一步，實例已完成數據觀測、屬性和方法的運算、watch/event 事件回調
      // 可是在現階段尚未開始掛載，即還沒掛載到根 DOM 元素上，因此 this.$el 屬性不可見
      console.log(2);
      console.log(this.msg);
      console.log(this.$el);
    },
    beforeMount() {
      // 在掛載開始以前被調用，建立虛擬DOM（Virtual-DOM）；虛擬 DOM 不是真實的 DOM 元素，而是 js 對象，其中包含了渲染成 DOM 元素信息；
      console.log(3);
      console.log(this.msg);
      console.log(this.$el);
    },
    mounted() {
      // 把 Vue 的虛擬DOM掛載到真實的 DOM 上；
      // 若是要在 Vue 中獲取 DOM 元素對象，通常在這個鉤子中獲取
      // 項目中的 ajax 請求通常會在這裏或者 created 裏發送；
      console.log(4);
      console.log(this.msg);
      console.log(this.$el);
    },
    // 只有當數據發生變化時，纔會觸發這個函數；
    beforeUpdate() {
      console.log(5)
    },
    updated() {
      // 因爲數據更改致使的虛擬 DOM 從新渲染和打補丁，在這以後會調用該鉤子。
      console.log(6);
    },
    beforeDestroy() {
      // 在 Vue 的實例被銷燬以前調用，若是頁面中有定時器，咱們會在這個鉤子中清除定時器；
      console.log(7);
    },
    destroyed() {
      // Vue 實例銷燬後調用，實例中的屬性也再也不是響應式的，watch 被移除
      console.log(8);
    }
  });

  vm.$set(vm, 'msg', 'hello world'); // 由於 Vue 的數據都是響應式的，只有修改數據纔會觸發 beforeUpdate 和 updated 鉤子


  vm.$mount('#app'); // 當建立實例時不傳遞 el 屬性，能夠手動掛載到 DOM 節點；

  vm.$destroy(); // 手動銷燬實例；

</script>
</body>
</html>
複製代碼

refs 和 DOM操做

ue 是數據驅動不提倡操做DOM 可是有時候必須操做DOM 所以VUE 提供了一個行內屬性來獲取DOM vm.$refs 是Vue提供的實例專門用來獲取DOM元素的html

refs 的使用

在須要獲取的標籤內添加ref = "標識符" 行內屬性而後在Vue的實例中經過vm.refs將會得到一個數組**vue

異步DOM的更新和 nextTick

Vue 的DOM 更新是異步的若咱們想從新獲取更新數據後的渲染出來的DOM咱們須要使用nextTickajax

this.$nextTick(callback)
複製代碼

callback 放到DOM更新後執行數組

template屬性指定HTML中的模板id 或以字符串形式聲明模板這個標籤不會被渲染出來

以HTML模板形式

<template id = 'p1'>
<div>
<p v-for = "(a,i) in arr">{{a}}</p>
</div>
</template>

let vm = new Vue({
    el:'#app',
    data:{
        msg:'aaaa',
        arr:[1,2,3,4]
    },
    //template:'#p1' //HTML模板形式
    template:`<div><p v-for = "(a,i) in arr">{{a}}</p></div>` //模板字符串
})
複製代碼