vue生命周期

生命周期

什么是生命周期

从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
生命周期函数=生命周期事件=生命周期钩子

8个生命周期

<template>
<div>
    lifeView
    {{ msg }}
    <input type="text" v-model="value">
    <router-link to="/index">index</router-link>
</div>
</template>

beforeCreate
初始化之前，data和methods中的数据还没有初始化，获取不到
作用：页面重定向

// 初始化之前	data和methods中的数据还没有初始化，获取不到
// 页面重定向
beforeCreate() {
  console.log(this)
  console.log(this.msg)//undefined
}

created
初始化之后，data和methods中的数据已经初始化，第一个可以操作data和methods数据的生命周期
作用：数据初始化，接口请求

// 初始化之后，data和methods中的数据已经初始化，第一个可以操作data和methods数据的生命周期
created() {
  console.log(this.msg)
}

beforeMount
虚拟DOM挂载

beforeMount() {
  console.log('beforeMount')
}

mounted
真实的DOM挂载，此时组件已经创建完成
作用：第一个可以操作DOM元素的生命周期

mounted() {
  console.log('mounted')
}

beforeUpdate
更新之前
可以执行零次或者无数次
区别：页面中的数据是旧的，data中的数据是新的，数据和页面尚未保持同步

beforeUpdate() {
  console.log('beforeUpdate')
}

updated
更新之后
可以执行零次或者无数次
区别：页面中的数据和data中的数据都是新的

updated() {
  console.log('updated')
}

beforeDestroy
销毁之前
作用：清空定时器，页面监听

beforeDestroy() {
  console.log('beforeDestroy')
}

destroyed
销毁之后

destroyed() {
  console.log('destroyed')
}