Vue2Vue的生命周期和钩子函数

Posted 2023-03-31 Morningº

 

生命周期三个阶段

初始化阶段

数据初始化

钩子函数：

1. beforecreate：data数据初始化之前，组件还没有数据
2. created: data数据初始化之后，可以获取到组件的数据 ⭐

应用场景：

created：里发送ajax请求

DOM渲染

钩子函数：

1. beforeMount：DOM渲染之前，DOM还没渲染
2. mounted：DOM渲染之后，可以操作DOM了 ⭐

应用场景：

mounted：里面操作DOM

• 初始化一些库 (例如echarts …)

<template>
  <div id="app">
    <h1>生命周期与钩子函数</h1>
  </div>
</template>

<script>
export default 
  data() 
    return 
      money: 10000
    
  ,
  beforeCreate() 
    console.log('数据初始化之前执行', this.money)
  ,
  created() 
    console.log('数据初始化之后执行', this.money)
  ,
  beforeMount() 
    console.log('在DOM渲染之前执行', document.querySelector('h1'))
  ,
  mounted() 
    console.log('在DOM渲染之后执行', document.querySelector('h1'))
  

</script>

<style></style>

 

运行阶段

钩子函数：

1. beforeUpdate: 数据更新，DOM更新前
2. updated: 数据更新，DOM更新后

应用场景：

updated：数据变化之后，操作DOM (一般用nextTick)

beforeUpdate() 
    console.log('DOM更新之前执行', this.money)
  ,
  updated() 
    console.log('DOM更新之后执行', this.money)
  

 

销毁阶段

钩子函数：

1. beforeDestroy: 组件销毁前 ⭐
2. destroyed: 组件销毁后

应用场景：

beforeDestroy：释放资源

• 如果不释放，会造成内存泄漏

销毁：调用destroy方法 :

methods: 
    kill() 
      this.$destroy()
    
  ,

beforeDestroy() 
    console.log('组件销毁之前执行')
  ,
  destroyed() 
    console.log('组件销毁之后执行')
  

 

内存泄漏

例如：

在组件销毁之后，定时器依旧执行，且无法销毁，占用内存！

mounted() 
    // console.log('在DOM渲染之后执行', document.querySelector('h1'))
    // 开启定时器
    this.timer = setInterval(() => 
      console.log('定时器开启', this.money)
    , 1000)
  ,

 

解决内存泄漏

在beforeDestroy中，清除定时器

beforeDestroy() 
    // console.log('组件销毁之前执行')
    clearInterval(this.timer)
  ,

Vue 的父组件和子组件生命周期钩子函数执行顺序？

初始化阶段：

beforeCreate(父组件) ==> created(父组件) ==> beforeMount(父组件) ==> beforeCreate(子组件) ==> created(子组件) ==> beforeMount (子组件) ==> mounted(子组件) ==> 父 mounted(父组件)

更新阶段：

• 父组件更新：

beforeUpdate(父组件) ==> updated(父组件)

• 子组件更新：

beforeUpdate(父组件) ==> beforeUpdate(子组件) ==> updated(子组件) ==> updated(父组件)

销毁阶段：

beforeDestroy(父组件) ==> beforeDestroy(子组件) ==> destroyed(子组件) ==> destroyed(父组件)