本文共 738 字，大约阅读时间需要 2 分钟。

官网生命周期图

Vue实例的生命周期：

挂载阶段：

• new Vue()调用构造函数
• 初始化生命周期钩子函数
• 调用this.beforeCreate钩子函数
• 监听数据、初始化方法、调用计算属性产生依赖数据
• 调用this.created钩子函数
• 判断有没有设置el属性 （如果没有el等待vm.$mount{(}^{\prime }CSS选择{器}^{\prime })）如果设置过el属性或者调用$mount方法，则继续，否则结束了生命过程
• 判断是否有template属性
• 如果有，则template指定的视图为模版
• 如果没有，则以el或$mount指定的节点的outerHTML为视图模版
• 编译模版
• 调用this.beforeMount钩子函数
• 将编译的模版挂载到真实的DOM上
• 调用this.mounted钩子函数,在mounted钩子函数中一般进行DOM的初始化

更新阶段：

• 数据发生变化
• setter方法
• 通知watcher
• 回调this.beforeUpdate钩子函数
• 触发虚拟DOM（re-render）
• 更新真实DOM
• 回调this.updated钩子函数

销毁阶段：

• 主动销毁(调用vm.$destroy())或被动销毁
• 销毁前会调用this.beforeDestroy();
• 销毁
• 销毁后调用this.destroyed()

    
       
       
           
   
        
            
    
{
  {msg}}
        
    按钮    
   
        

转载地址：http://mkhbb.baihongyu.com/