vue 的生命周期

vue的生命周期

开始创建一个Vue的实例对象

var  vm=  new Vue(){
}

刚初始化了一个Vue空的实例对象，这时候，这个对象身上，只有默认的一些生命周期函数，和默认的事件，其它的东西都未创建

执行beforeCreate函数

注意：在beforeCreate函数执行的时候，data和 methods 中的数据都还没有初始化

执行created函数

实例的data与methods已经初始化,此时还没有开始编译模板

是否有el属性，和 template属性

vue开始编译模板

执行beforeMount函数

此函数执行的时候，模板已经在内存中编译好了，但是尚未挂载到页面中去，此时，页面还是旧的

这一步，将内存中编译好的模板，真实的替换到浏览器的页面中去：

执行mounted函数

只要执行完了mounted ，就表示真个vue实例已经完全初始化完毕了，此时，组件已经脱离了创建阶段；进入到运行阶段

通俗来讲就是：

• 先创建一个vue实例
  刚初始化了一个Vue空的实例对象，这时候，这个对象身上，只有默认的一些生命周期函数，和默认的事件，其它的东西都未创建
• 执行beforeCreate函数
  实例刚被创建出来,此时还没有初始化好data和methods属性
• 执行created函数
  实例的data与methods已经初始化,此时还没有开始编译模板
• 是否有template模板
• 开始编译模板,根据data中的数据和指令生成HTML,注意此时还没有渲染到界面上,仅存在于内存中
• 执行beforeMount函数
  此函数执行的时候，模板已经在内存中编译好了，但是尚未挂载到页面中去，此时，页面还是旧的
• 执行mounted函数
  只要执行完了mounted ，就表示真个vue实例已经完全初始化完毕了，此时，组件已经脱离了创建阶段；进入到运行阶段
• 当data数据发生改变时，会执行beforeUpdate函数
  状态更新之前执行此函数,此时data中的状态值是最新的,但是界面上显示的数据依然是旧的
• 根据最新的数据重新生成渲染的内容,然后利用刚重新渲染的内容替换之前的内容
• 实例更新完毕调用 updated 函数,此时data中的状态值和界面上显示的数据都已经完成了更新
• 执行beforeDestroy函数
  实例准备销毁,但未销毁实例属性方法任然可以使用
• 执行destroyed函数
  实例已经销毁,所有的属性和方法都不可以使用