认识生命周期

每个组件都可能会经历从创建、挂载、更新、卸载等一系列的过程
在这个过程中的某一个阶段，我们可能会想要添加一些属于自己的代码逻辑（比如组件创建完后就请求一些服务器数据）
但是我们如何可以知道目前组件正在哪一个过程呢？Vue给我们提供了组件的生命周期函数

生命周期函数

生命周期函数是一些钩子函数（回调函数），在某个时间会被Vue源码内部进行回调
通过对生命周期函数的回调，我们可以知道目前组件正在经历什么阶段
那么我们就可以在该生命周期中编写属于自己的逻辑代码了

vue

<script>
    export default {
        //1.组件被创建之前
        beforeCreate() {
            console.log("beforeCreated")
        },
        //组件被创建完成
        created() {
            console.log("creacted")
            console.log("1.发送网络请求，请求数据")
            console.log("2.监听eventbus事件")
            console.log("3.监听watch事件")
        },
        //3.组件template准备被挂载
        beforeMount() {
            console.log("beforeMount")
        },
        //组件template被挂载：虚拟DOM -> 真实DOM
        mounted() {
            console.log("mounted")
        },
        //数据发生改变
        //准备更新DOM
        beforeUpdate() {
            console.log("beforeUpdate")
        },
        //更新DOM
        updated() {
            console.log("updated")
        },
        //卸载VNode -> DOM元素
        //卸载之前
        beforeUnmount() {
            console.log("beforeUnmount")
        },
        //DOM元素被卸载完成
        unmounted() {
            console.log("unmounted")
        }
    }
</script>

认识生命周期 ​

生命周期函数 ​

认识生命周期

生命周期函数