Vue学习小札——2.0 vue的生命周期钩子

生命周期函数就是Vue实例在某一时间点会自动执行的函数。

创建Vue实例。

首先会初始化事件和生命周期相关的一些内容。当最基础的实例化完成后，在这个时间点，Vue会自动执行  beforeCreate( )生命周期函数。

Vue会继续处理一些外部的注入包括双向绑定的一些内容，当这部分初始化也完成后，基本上Vue实例的一些初始化都完成了。这个时间点，Vue会自动执行  created( ) 生命周期函数。

Vue初始化结束。然后会询问一个条件：实例是否有“el”这个选项。如果有“el”这个选项，紧接着就会询问是否有“template”这个选项，如果没有“template”这个选项，就会把“el”的外层outerHTML当成模板。如果有“template”，就根据模板渲染页面。

有了模板有了数据并没有直接渲染页面，在渲染页面之前，会自动生成一个生命周期函数beforeMount（）。 beforeMount执行完成之后，结合模板和数据生成最终的DOM元素会被挂载到页面上（页面被显示）。

页面被显示之后，又有一个生命周期函数  mounted（）会被自动执行。

当组件即将被销毁"vm.$destroy()"的时候会自动执行 beforeDestroy（） 生命周期函数。当组件完全被销毁之后会自动执行 destroyed（） 生命周期函数。

当数据发生改变，还没重新渲染之前会自动执行 beforeUpdate（）生命周期函数。当数据被重新渲染之后，会自动执行 updated（）生命周期函数。

Vue实例的生命周期函数定义的话，并不放在 methods对象里，单独放在Vue实例里就可以。