Vue2 的生命周期函数介绍和应用 ——详细总结

Vue的生命周期函数，又称生命周期钩子，它是Vue在实例创建、挂载、更新和销毁等过程中所调用的方法，是代表 Vue 页面创建进行某些操作后的状态，因此能在不同过程进行操作

我会按照我学习的顺序，以及遇到的问题，将常见的解释+自我理解进行介绍（可能有部分错误或缺失，欢迎指出）
——借用 Vue官网 的图片进行讲解

在 Vue 实例被创建出来时（new Vue），生命周期函数开始初始化

一、beforeCreate（在创建前）

Vue 实例刚刚创建，数据（data props）以及事件机制（$emit $on 等等）都还未初始化

二、created（已创建）

数据和事件机制刚刚初始化，以及数据劫持和观察者实例 watcher 的完成，这个时候才可以访问到它们的数据（data props methods），但是这时还没挂载到 $el 上面

进入判断（has " el " option），如果没有 el 的话就等待创建 el （不知道什么时候会出现后者的情况）

$el 是指向当前组件实例所关联的 DOM 元素的引用（就是通过 this. $el 可以看到其组件内所有DOM元素）

进入判断（has " template " option）有的话将其化为 render 函数，没有的话就解析 $el 上面的 HTML 作为组件的 template

render函数是用来生成虚拟DOM的函数，它通过可以接收一个createElement方法作为参数，用于创建虚拟DOM，灵活控制组件的渲染过程

// main.js
  render: h => h(App),
  
  <span>{{appData}}</span>
  // 等效于
  render:function(createElement){
    // 返回一个虚拟DOM节点
	return createElement('span',this.appData)	
  }

三、beforeMounted（真实DOM 挂载前）

在进入 beforeMounted 之前，Vue 已经解析好 template 的内容，并转化为 render 函数，但是还未生成真实DOM元素，与 beforeMounted 对应的方法有 $forceUpdate（组件强制更新）

this.$forceUpdate()	// 没有参数

随后执行

这个时候开始将 Vue 实例的 template 编译成 render 函数，再将其转化为虚拟DOM，最后转化为真实的DOM（Create vm.$el and replace “el” with it）——将虚拟的DOM赋值到 $el 属性上面的过程

四、mounted（已挂载）

真实的 DOM 元素被挂载到页面时调用，通过 $el 属性可以看到挂载后的DOM，也可以访问并对其进行操作这个过程使用场景非常多 （例如 自定义事件绑定、发送网络请求，获取数据并更新状态 等等）

如果说 mounted 是 Vue 自动挂载的话，那么 $mount 就是 Vue 的手动挂载，它和 mounted 的功能几乎一样

var vm = new Vue({
	data:{
		
	}
})
// 手动挂载到 app(DOM元素)上
vm.$mount('#app')

是不是很眼熟，其实就是 main.js 文件里面的代码

截止 mounted，组件页面的渲染就基本完成了，剩下的生命周期函数，都是在特定的场景才能被触发

五、beforeUpdate （视图更新之前）

当 Vue 实例中的 响应式数据（ 视图 ）发生改变（when data changes），会进入到 beforeMounted，更新 render 函数里的数据，生成新的虚拟DOM树，通过 Diff 算法对比新旧虚拟DOM树上不一样的节点，然后进行替换局部更新

响应式数据通过插值运算符呈现在视图：

响应式数据不在视图上：

因此，只有当响应式而且在视图呈现的数据发生变化时才会进入 beforeUpdate，原因很简单，这是 Vue 性能优化的一种方法，数据与DOM无关时并不会再次生成虚拟DOM导致整个组件的刷新，可以节省不必要资源，如果非要进行刷新，可以使用 this.$forceUpdate()

六、updated（视图更新完成）

这里代表新的数据已经重新挂载到 DOM 上面，然后就会准备再次进入 mounted，进行了一次循环

上面两个钩子函数常在路由跳转时生效

七、beforeDestroy （组件销毁之前）

在组件销毁之前所进行的操作，在这个过程可以操作实例，访问 DOM 元素（可以进行关闭定时器，注销事件总线，保存用户数据或状态等等）

随后执行( teardown watchers,childcomponents and event listeners)

翻译：卸载 watchers（观察者实例），childcomponents（子组件）and event listeners（事件监听）

八、destroyed （组件销毁完成）

Vue 实例上面的东西全部被移除（常在路由跳转/切换时触发）

以上内容均为本人学习总结知识点，如有错漏欢迎指出