【Vue2】Vue的生命周期和钩子函数

且陶陶

发布于 2023-04-12 16:01:23

3710

发布于 2023-04-12 16:01:23

文章被收录于专栏：Triciaの小世界Triciaの小世界

生命周期三个阶段

初始化阶段

数据初始化

钩子函数：

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

应用场景：

created：里发送ajax请求

DOM渲染

钩子函数：

beforeMount：DOM渲染之前，DOM还没渲染
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>

运行阶段

钩子函数：

beforeUpdate: 数据更新，DOM更新前
updated: 数据更新，DOM更新后

应用场景：

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

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

销毁阶段

钩子函数：

beforeDestroy: 组件销毁前 ⭐
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(父组件)

更新阶段：