vue钩子函数

什么是vue的生命周期

• vue实例在创建到销毁经过的一系列过程叫做生命周期

什么是生命周期钩子

• 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
• 在生命周期中被自动调用的函数叫做生命周期钩子（钩子函数）

beforeCreate

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

created

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。

beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted

实例被挂载后调用

beforeUpdate

数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

updated

数据更新完成调用

beforeDestroy

实例销毁之前调用

destroyed

实例销毁后调用。该钩子被调用后，对应Vue实例的所有指令都被解绑，所有的事件监听器都被移除，所有的子实例都被销毁

          beforeCreate(){
                console.log("实例初始化之后")
            },
            created(){
                console.log("实例创建ok")
            },
            beforeMount(){
                console.log("开始创建模板")
            },
            mounted(){
                console.log("创建模板完成")
            },
            beforeUpdate(){
                console.log("数据更新之前")
            },
            updated(){
                console.log("数据更新完毕")
            },
            beforeDestroy(){
                console.log("实例开始销毁")
            },
            destroyed(){
                console.log("实例销毁完毕")
            }

                                          生命周期图