【vue】详解生命周期

new Vue、创建vue组件时，执行生命周期；

Vue实例化方式：

vue-cli2-runtime-compiler版本：

new Vue({
  el: '#app',
  components: { App },
  template: ''
})

vue-cli2-runtime-only版本：

new Vue({
  el: '#app',
  render: h => h(App)
})

vue-cli3版本：

new Vue({
  render: h => h(App),
}).$mount('#app')

---

Vue生命周期：

1、创建前后：

beforeCreate：创建前钩子函数；初始化事件和生命周期函数后执行（要执行周期等钩子函数要先初始化好）；
created：创建后钩子函数；初始化Vue原型，data、methods，给Vue构造函数的原型传好数据用于实例化对象，并实例化出对象后执行；所以此处常用于发送请求，请求初始数据。

2、挂载前后：

beforeMount：挂载前钩子函数；检查什么方式创建组件，编译需要使用的模板组件，结合上一步创建好的vue实例（数据、方法等），生成该组件的虚拟dom后执行，如App.vue，

mounted：挂载后钩子函数；找到要挂载到的dom位置，如：#app，并用编译好的虚拟dom替换它，替换完成后执行；

3、更新前后：

beforeUpdate：更新前钩子函数；当vue实例中data数据发生变化时执行；
updated：更新后钩子函数；当改变后的data数据重新渲染到虚拟dom后执行；

4、销毁前后

beforeDestory：销毁前钩子函数；当组件销毁被触发时执行（常见于组件切换）；
destoryed：销毁后钩子函数；拆除视图方的观察者（数据与视图的桥梁、发布订阅模式的成员）、子组件和事件监听后执行。