一张图搞定Vue的生命周期

Vue的生命周期

life.png

life1.png

各个钩子函数的执行时间点：

    
    
    
    



    
{{message}}

• 执行上面代码，可以看到：
  beforecreated ：el 和 data 并未初始化
  created：完成了data数据的初始化 el 没有
  beforeMount：完成了el 和 data的初始化
  mounted：完成了挂载
  也就是说挂载前的状态是虚拟DOM技术，先把坑站住了挂载之后才真正的把值渲染进去
• data里的值被修改会出发update的操作
• 我们在浏览器console里执行命令：app.$destroy();
  触发了destroy相关的钩子函数，也就是说组件被销毁,
  更改message的值DOM中的值不变也就是说DOM元素依然存在只是不受vue控制了