uniapp生命周期函數詳解

一、beforeCreate

1、描述：在實例初始化之後，數據觀測和event/watcher事件配置之前被調用。

2、使用場景：在該生命周期內無法訪問vm實例上的$data、$props、$refs、$parent和$children等屬性。

3、代碼示例：

<template>
  <div v-if="isReady">
    {{ message }}
  </div>
</template>

<script>
  export default {
    beforeCreate () {
    	console.log('beforeCreate')
    },
    data() {
      return {
        isReady: true,
        message: 'hello world'
      }
    }
  }
</script>

二、created

1、描述：在實例創建完成後立即被調用。根實例、組件的數據綁定、計算屬性、watch/event等已經完成初始化，可以訪問到$data、$props、$refs、$parent和$children等屬性。

2、使用場景：在該生命周期內可以拿到$el選項，但是不能保證子組件完全被渲染。如果想保證子組件都已經被渲染至DOM，可以使用vm.$nextTick()

3、代碼示例：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
  export default {
    created () {
      console.log('created')
    },
    data() {
      return {
        message: 'hello world'
      }
    }
  }
</script>

三、beforeMount

1、描述：在模板編譯/掛載之前被調用。

2、使用場景：在該生命周期內可以訪問$template選項，並且該DOM還沒有被渲染或被掛載到HTML文檔中。

3、代碼示例：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
  export default {
    beforeMount () {
      console.log('beforeMount')
    },
    mounted() {
      console.log('mounted')
    },
    data() {
      return {
        message: 'hello world'
      }
    }
  }
</script>

四、mounted

1、描述：在布局和文件的位置時，mounted在編寫複雜組件或插件時很有用。

2、使用場景：在該生命周期內，該vm實例已經被渲染到界面上。$el為其對應的真實DOM，並且可以進行DOM操作。

3、代碼示例：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
  export default {
    mounted () {
      console.log('mounted')
      this.$el.addEventListener('click', this.handleClick)
    },
    methods: {
      handleClick() {
        console.log('click')
      }
    },
    data() {
      return {
        message: 'hello world'
      }
    }
  }
</script>

五、beforeUpdate

1、描述：在數據更新之前被調用，發生在虛擬DOM比對更新之前，可以在該生命周期內進行數據的修改。

2、使用場景：在該生命周期內可以訪問vm實例上的$data、$props數據。無法訪問$el，因為此時還未更新。

3、代碼示例：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
  export default {
    beforeUpdate () {
      console.log('beforeUpdate')
      this.message = 'updated!'
    },
    data() {
      return {
        message: 'hello world'
      }
    }
  }
</script>

六、updated

1、描述：在重新渲染後調用，發生在虛擬DOM比對更新之後，可以訪問更新後的DOM。

2、使用場景：在該生命周期內可以訪問vm實例上的$data、$props數據以及更新後的$el DOM。

3、代碼示例：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
  export default {
    updated () {
      console.log('updated')
    },
    data() {
      return {
        message: 'hello world'
      }
    }
  }
</script>

七、beforeDestroy

1、描述：在實例銷毀之前調用。在這一步，實例仍然完全可用。

2、使用場景：在該生命周期內，可以進行一些清理工作，如清除定時器、解綁事件等操作。

3、代碼示例：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
  export default {
    beforeDestroy () {
      console.log('beforeDestroy')
      clearInterval(this.interval)
      this.$el.removeEventListener('click', this.handleClick)
    },
    data() {
      return {
        message: 'hello world',
        interval: null
      }
    },
    mounted() {
      this.interval = setInterval(() => {
        console.log('interval')
      }, 1000)
      this.$el.addEventListener('click', this.handleClick)
    },
    methods: {
      handleClick() {
        console.log('click')
      }
    }
  }
</script>

八、destroyed

1、描述：在實例銷毀之後調用。該鉤子被調用時，Vue實例已經解除了該實例所有的監聽器和刪除了所有的DOM綁定。該鉤子跟蹤該實例，從而可以在實例銷毀後執行異步操作或發送分析數據。

2、使用場景：在該生命周期內無法訪問vm實例上的$data、$props、$refs、$parent和$children等屬性。

3、代碼示例：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
  export default {
    beforeDestroy () {
      console.log('beforeDestroy')
    },
    destroyed() {
      console.log('destroyed')
    },
    data() {
      return {
        message: 'hello world',
        interval: null
      }
    },
    mounted() {
      this.interval = setInterval(() => {
        console.log('interval')
      }, 1000)
    }
  }
</script>