vue生命週期鉤子函數

 1 <template>
 2     <div>
 3       <h2>this is from C.vue</h2>
 4     </div>
 5 </template>
 6 
 7 <script>
 8 export default {
 9   name: 'C',
10   data () {
11     return {
12       msg: 'hello C.cue',
13       moneyInit: 100
14     }
15   },
16   computed: {
17     money () {
18       return this.moneyInit * 100
19     }
20   },
21   methods: {
22     test () {
23       console.log('this is a test')
24     }
25   },
26   beforeCreate () {
27     console.log('beforeCreate')
28 
29     // this的結果是VueComponent
30     console.log('this:', this)
31     // beforeCreate時 data,computed都不能訪問，爲undefined
32     console.log('this.msg:', this.msg, 'this.money:', this.money)
33   },
34   created () {
35     console.log('created')
36     // created時，data,computed,methods均能訪問
37     console.log('this.msg:', this.msg, 'this.money:', this.money)
38     this.test()
39   }
40 }
41 </script>
42 
43 <style lang="scss" scoped>
44 
45 </style>

View Code

<template>
  <div id="app">
    <div @click="changeMsg">this is from app.vue {{msg}}</div>
    <router-link :to="{name:'A'}">to A Page</router-link>
    <router-link :to="{name:'B'}" tag="div">to B Page</router-link>
    <router-link :to="{name:'C'}">to C Page</router-link>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      msg: 'hello'
    }
  },
  methods: {
    changeMsg () {
      if (this.msg === 'hello') {
        this.msg = 'today'
      } else {
        this.msg = 'hello'
      }
    }
  },
  created () {
    // created 時 this.$el還不能訪問，DOM還未掛載
    console.log('created function from App.vue, this.$el:', this.$el)
  },
  beforeMount () {
    // 注意beforeMount的this.$el也爲undefined
    console.log('beforeMount function  from App.vue, this.$el:', this.$el)
  },
  mounted () {
    // mounted 此時this.$el能訪問，vue實例掛載到了DOM上
    console.log('mounted function  from App.vue, this.$el:', this.$el)
  },
  // data發生變化，即dom發生變化
  beforeUpdate () {
    console.log('beforeUpdate function from App.vue')
  }

}
</script>

<style>
  #app{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
</style>

View Code

注意幾點：

1. created與mounted都常見於ajax請求，前者若是請求響應時間過長，容易白屏

2. mounted不能保證全部子組件都一塊兒被掛載。若是要等到整個視圖更新完畢，使用vm.$nextTick()

 

nextTick：在vue中，用於處理DOM更新操做。vue裏面有個watcher,用於觀察數據變化，而後更新DOM，vue並非每次數據更新都會觸發DOM更新，而是將這些操做緩存在一個隊列。在一個事件循環結束後，刷新隊列，統一執行DOM更新。

vm.$nextTick([callback])將回調延時到下次DOM更新循環結束以後執行。在修改數據後使用這個方法，它會獲取更新後的DOM。它的this會綁定到調用的實例上，這是與Vue.nextTick惟一不一樣的地方。

 1 <template>
 2     <div>
 3       <div ref="tag">{{msg}}</div>
 4       <div>msg1:{{msg1}}</div>
 5       <div>msg2:{{msg2}}</div>
 6       <button @click="changeMsg">click it</button>
 7     </div>
 8 </template>
 9 
10 <script>
11 export default {
12   name: 'C',
13   data () {
14     return {
15       msg: '',
16       msg1: '',
17       msg2: ''
18     }
19   },
20   methods: {
21     changeMsg () {
22       this.msg = 'hello'
23       // this.msg1沒有當即更新，沒能獲取到更新後的DOM
24       this.msg1 = this.$refs.tag.innerHTML
25       // this.msg2成功渲染，成功獲取到了更新後的DOM
26       this.$nextTick(() => {
27         this.msg2 = this.$refs.tag.innerHTML
28       })
29     }
30   }
31 }
32 </script>
33 
34 <style lang="scss" scoped>
35 
36 </style>

View Code

 

參考連接：https://juejin.im/entry/5aee8fbb518825671952308c