深入浅出学Vue(三) | Vue生命周期详解

Vue生命周期

生命周期分为四个阶段

• 初始化阶段create：初始阶段构造生成vue实例，初始化data，methods，event等属性，并根据模板生成虚拟DOM树。
• 挂载阶段mount：挂载阶段将虚拟DOM树挂载到真实DOM树上。
• 更新阶段update：更新阶段将在数据发生变化时存在，虚拟DOM将重新渲染发生变化的真实DOM。
• 销毁阶段destory

为了可以在生命周期的不同阶段不同时段横切入用户自定义的方法和操作，Vue定义了8个钩子函数给我们使用

• beforeCreate：Vue初始化后，事件和生命周期钩子初始化之后，data和事件配置初始化之前。
• created：data，methods等属性初始化之后，DOM树生成前。
• beforeMount：虚拟DOM树生成之后，挂载到真实DOM树之前。
• mounted：虚拟DOM树挂载到真实DOM树之后。
• beforeUpdate：执行数据更新之前。
• updated：执行数据更新之后
• beforeDesroty：执行销毁方法之前
• destoryed：执行销毁方法之后。

钩子函数的简单使用

<div id="app">
    <input v-model="message"><