vue生命周期

钩子函数

作用：特定的时间点，执行特定的操作

场景：组件创建完毕后，可以在created生命周期函数中发起Ajax请求，从而初始化data数据

分类：4大阶段8个方法

<template>
<div>
     <p id="myP">重新值</p>
     <ul id="myUL">
         <li v-for="(item,index) in arr" :key="index">{{item}}</li>
     </ul>
     <input type="text" v-model="msg">
     <button @click="fn">添加</button>
</div>
</template>

<script>
export default {
    data(){
        return{
            arr:[1,2,3],
            msg:"哈哈哈"
        }
    },
    methods:{
        fn(){
            this.arr.push(this.arr[this.arr.length-1] + 1)
        }
    },

    // 一、初始化
    // new Vue()以后，vue内部给实例对象添加了一些属性和方法，data和methods初始化“之前”
    beforeCreate(){
        console.log("beforeCreate执行:" + this.msg) // beforeCreate执行:undefined
    },
    created(){
        console.log("created执行:" + this.msg) // created:哈哈哈
    },

    // 二、挂载
    // 真实DOM挂载之前
    // 场景：预处理data，不会触发updated钩子函数
    beforeMount(){
        console.log("beforeMount执行:" + document.getElementById('myP')) // beforeMount执行:null
    },
    // 真实DOM挂载以后
    // 场景：挂载后真实DOM
    mounted(){
        console.log("mounted执行:" + document.getElementById('myP')) // mounted执行:[object HTMLParagraphElement]
    },

    // 三、更新
    // 前提：data数据改变才执行
    // 更新之前
    beforeUpdate(){
        console.log("beforeUpdate执行:" + document.querySelectorAll("ul>li")[3]) // beforeUpdate执行:undefined
    },
    // 更新之后
    // 更新之后的真实BOM
    updated(){
        console.log("updatedUpdate执行:" + document.querySelectorAll("ul>li")[3]) // updatedUpdate执行:[object HTMLLIElement]
    },
    // 四、销毁
    // 前提：v-if="false" 销毁Vue实例
    // 场景：移除全局时间，移除当前组件，计时器，定时器，eventBus移除事件$off方法
    beforeDestroy(){
        console.log("beforeDestroy执行:")
        clearInterval(this.timer)
    },
    destroyed(){
        console.log("destroyed执行:")
    }
}
</script>

<style>

</style>

1、Vue实例从创建到编译模板执行了哪些钩子函数？

beforeCreate/created

2、created函数触发能获取data？

能获取data，但不能获取真是DOM

3、Vue实例从创建到显示都经历了哪些钩子函数

beforeCreate/created/beforeMount/mounted

4、在什么钩子函数里可以获取真实DOM？

mounted

5、什么时候才执行updated钩子函数

当数据发生变化并更新页面后

6、在哪可以获取更新后的DOM

在updated钩子函数里

7、一般在beforeDestroy/destroyed里做什么？

手动消除计时器、定时器、全局事件

图解vue生命周期全过程：