vue生命週期筆記-version0.1

一：vue父子組件生命週期鉤子執行前後順序 

代碼 :

父組件(A.vue) <template>
<div>
  <div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
    <child></child>
  </div>
</div>
</template>

<script>
import child from './B'
export default {
  name: 'A',
  data () {
    return {
      message: 'Hello'
    }
  },
  components: {
    child
  },
  computed: {
    // 計算屬性的getter 默認的
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  },
  // 生命週期鉤子
  beforeCreate () {
    console.log('父組件 beforeCreate')
  },
  created () {
    console.log('父組件 created')
  },
  beforeMount () {
    console.log('父組件 beforeMount')
  },
  mounted () {
    console.log('父組件 mounted')
  },
  beforeUpdate () {
    console.log('父組件 beforeUpdate')
  },
  updated () {
    console.log('父組件 updated')
  },
  beforeDestroy () {
    console.log('父組件 beforeDestroy')
  },
  destroyed () {
    console.log('父組件 destroyed')
  }
}
</script>

<style scoped>

</style>
------------------------- 子組件(B.vue) <template>
<div style="border: 1px solid red;">
  <p >This is child component</p>
</div>
</template>

<script>
export default {
  name: 'B',
  data () {
    return {
    }
  },
  // 生命週期鉤子
  beforeCreate () {
    console.log('子組件 beforeCreate')
  },
  created () {
    console.log('子組件 created')
  },
  beforeMount () {
    console.log('子組件 beforeMount')
  },
  mounted () {
    console.log('子組件 mounted')
  },
  beforeUpdate () {
    console.log('子組件 beforeUpdate')
  },
  updated () {
    console.log('子組件 updated')
  },
  beforeDestroy () {
    console.log('子組件 beforeDestroy')
  },
  destroyed () {
    console.log('子組件 destroyed')
  }
}
</script>

<style scoped>

</style>

 

驗證效果: 

總結一： 

1.父組件掛載前要先進行子組件的建立、掛載！  

 

二：各個生命週期分別作了什麼事情？

 

三：如何觸發update類鉤子？   緩存？

 

四：什麼狀況會執行destroy類鉤子    緩存？