Vue生命周期

Vue的生命周期是什么？

• Vue实例从创建和销毁的过程就是一个生命周期

• 一个生命周期过程有四个阶段八个方法

钩子函数

四大阶段

1. 初始化
2. 挂载
3. 更新
4. 销毁

八个方法

阶段	方法名	方法名
初始化	beforeCreate	created
挂载	beforeMount	mounted
更新	beforeUpdate	updated
销毁	beforeDestroy	destroyed

1. beforeCreate:数据初始化之前
2. created：数据初始化之后 一般是发送axios请求
3. beforeMount：DOM渲染之前
4. mounted：DOM渲染之后 操作DOM
5. beforeUpdate：数据改变，DOM更新之前
6. updated：数据改变，DOM更新之后
7. beforeDestroy：销毁前 释放资源
8. destroyed：销毁后

代码

<template>
  <div>
      <h1>vue</h1>
      <p>{{msg}}</p>
      <button @click="btn">更新</button>
  </div>
</template>

<script>
export default {
    data () {
        return {
            msg:'hello vue'
        }
    },
    methods:{
        btn(){
            this.msg='vue 生命周期'
            this.$destroy()
        }
    },
    // 初始化阶段：触发beforeCreated、created钩子函数
    beforeCreate(){
        // 不会获取到data 和methods的数据
        console.log('初始化前被触发',this.msg);
    },
    created(){
        // 初始化后可以获取data和methods的数据
        console.log('初始化后触发',this.msg);
    },
    //挂载阶段：触发beforeMount、mounted钩子函数
    beforeMount () {
        // 挂载前触发，但不会获取到dom元素
        console.log('挂载前被触发');
        console.log(document.querySelector('p'));
    },
    mounted(){
        // 挂载后被触发，可以获取到dom元素
        console.log('挂载后被触发');
        console.log(document.querySelector('p'));
    },
    //更新阶段：触发beforeUpdate、updated钩子函数
    beforeUpdate(){
        console.log('数据更新前被触发');
        console.log(document.querySelector('p'));
    },
    updated(){
        // 获取数据更新后的数据
        console.log('数据更新后被触发');
        console.log(document.querySelector('p'));
    },
    //销毁阶段：触发beforeDestroy、destroyed钩子函数
    // 通过this.$destroy()触发。一般用来清除定时器、全局事件、eventBus移除事件$off方法
    beforeDestroy(){
        console.log('beforeDestroy -- 执行');
        // clearInterval(this.timer)
    },
    destroyed(){
        console.log("destroyed -- 执行");
    }
}
</script>

<style>

</style>