vue生命周期

话不多说，直接开始

生命周期解释图

 

//创建实例组件
new Vue({
  ele:"app"，
  data(){
      message:"HELLO WORLD !!"
}
});
*在每个钩子函数中将组件的信息进行输出*

• 组件声明

  • beforeCreate(创建前)
    
    

    beforeCreate
    
    组件中的属性值全部为undefined
  • created
    
    

    created
    
    组件的data及message初始化

此时，如果该对象没有ele，则会停止生命周期，只有当再次调用vm.$mount(el)时，才会继续生命周期的下一步

（如果有render则调用render）若内部有template则调用render取渲染template的HTML结构，若没有则使用外部HTML（渲染优先级：render函数 > template属性 > 外部html）

---

• 组件挂载

  • beforeMount
    
    

    beforeMount
    
    组件的 ele仍为虚拟DOM
  • mounted
    
    

    mounted
    
    组件 ele 已经为DOM节点

---

• 组件更新

当对DOM元素数据进行变化时会先后触发beforeUpdate和updated钩子函数

• beforeUpdate

  
  
  

  beforeUpdate

• Updated

  
  
  

  Updated

---

• 组件销毁

调用app.$destroy()进行组件销毁

• beforeDestroy
  
  

  beforeDestroy
  
  在销毁前仍可以调用vue组件
• destroyed
  
  

  destroyed
  
  组件销毁之后无法获取组件信息

---

在Vue中，一个组件的生命历程就是这样啦~

参考链接：
https://segmentfault.com/a/1190000008010666
http://www.cnblogs.com/penghuwan/p/7192203.html
https://juejin.im/post/5afd7eb16fb9a07ac5605bb3#heading-9