Vue基礎語法（四）

vue的生命周期鉤子函數

所有的生命周期鉤子自動綁定this到上下文實例中，因此可以訪問數據對property和方法進行運算，這意味著不蹦使用箭頭函數來定義一個生命周期方法。參考官方文檔，生命周期圖

生命周期鉤子一共有十一個，這裡只寫八個

 

<template>
  <div></div>
</template>
<script>
export default {
  //生命周期函數就是vue實例再某一時間點會自動執行的函數
  data() {
    return {}
  },
  components: {},
  methods: {},
  beforeCreate() {
    console.log('beforecreate')
  },
  created() {
    console.log('created')
  },
  beforeMount() {
    //被執行時頁面還沒有被渲染
    console.log(this.$el)
    console.log('beforeMount')
  },
  mounted() {
    //被執行的時候頁面已經被渲染完畢了
    console.log(this.$el)
    console.log('mounted')
  },
  beforeDestroy() {
    //當組件被銷毀時才會觸發
    console.log('beforeDestory')
  },
  destroyed() {
    //當組件被完全銷毀時會觸發
    console.log('detory')
  },
  beforeUpdate() {
    //當數據發生改變還沒被重新渲染之前執行
    console.log('beforeUpdate')
  },
  updated() {
    //當數據發生改變被重新渲染之後執行
    console.log('updated')
  }
}
</script>

 

Tags:

VirMach 便宜 VPS

QNews

QNews