Vue生命周期

vue对象的生命周期

生命周期：

1. 又名：生命周期回调函数、生命周期函数、生命周期钩子。
2. 是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
3. 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
4. 生命周期函数中的this指向是vm 或 组件实例对象。

---

1. 初始化显示

• beforeCreate()
• created()
• beforeMount()
• mounted()

2. 更新状态

• beforeUpdate()
• updated()

3. 销毁 vue 实例: vm.$destory()

• beforeDestory()
• destoryed()

原理解释图

挂载阶段

beforeMount，挂载前状态，在我的理解挂载就是将虚拟Dom转变成真实Dom的过程，所以在这之前，我们的el当然还是拿不到的。

mounted，挂载结束，意味着虚拟Dom已经挂载在了真实的元素上，所以从此开始我们就可以拿到el了。

 

生命周期的每个阶段适合做什么

created： 在Vue实例创建完毕状态，我们可以去访问data、computed、watch、methods上的方法和数据

mounted： 虚拟Dom已经被挂载到真实Dom上，此时我们可以获取Dom节点，$ref在此时也是可以访问的。发送ajax请求, 启动定时器、绑定自定义事件、订阅消息等异步任务【初始化操作】

beforeDestroy： 在Vue实例销毁之前被调用，在此时我们的实例还未被销毁。在此时可以做一些收尾工作，比如销毁定时器，解绑全局事件，销毁插件对象等

父子组件的生命周期

⽗组件挂载完成⼀定是等⼦组件都挂载完成后，才算是⽗组件挂载完，所以⽗组件的mounted在⼦组 件mouted之后