Vue生命周期

私人博客

许小墨のBlog —— 菜鸡博客直通车

系列文章完整版，配图更多，CSDN博文图片需要手动上传，因此文章配图较少，看不懂的可以去菜鸡博客参考一下配图！

系列文章目录

前端系列文章——传送门
后端系列文章——传送门

---

---

vue生命周期

vue从开始创建到最终被销毁的整个过程，是vue的生命周期。整个过程如下图：

整体分为3个阶段：

• 初始化阶段
  • 创建vue实例
  • 初始化vue中的很多监听，开始生命周期
  • 将data中的数据进行监听，并放在vue实例上，可以访问到数据了
  • 判断是否有el参数，如果没有就一直等待vue实例调用$mount(el参数)
  • 判断是否有template参数
    • 如果有，就将template编译成渲染函数
    • 如果没有，就将el的outerHTML编译成template
  • 创建vue实例的$el属性，并且用上面的渲染函数或template替换掉指定的el参数
  • 挂载好了，页面也就显示出来了
• 更新阶段
  • 当数据发生改变的时候，虚拟节点重新渲染并且打补丁
  • 重新挂载好
• 销毁阶段
  • 当vue实例调用$destory的时候，拆掉监听、拆掉子组件、拆掉事件。。。
  • 已经销毁了

为了让我们更灵活的操控vue，vue框架内置了8个生命周期钩子函数，可以让我们在vue在整个生命周期中进行到某个阶段的时候，执行我们的代码。例如在挂载的时候，操作一下标签；在初始化以后操作一下数据。。。

生命周期钩子是函数是vue内置的，在生命周期进行到对应的阶段的时候，会自动调用，我们只需要将自己要执行的代码写好即可，不需要手动调用。

1. beforeCreate - 此时vue实例中还没有数据
2. created - 此时vue实例中有数据了，但是还不能操作dom
3. beforeMount - 同上
4. mounted - 挂载好了，页面显示出来了，可以操作dom了
5. beforeUpdate - 数据即将修改，但是还没有修改完成
6. updated - 数据修改完成，dom也重新渲染了
7. beforeDestroy - 已经调用了销毁方法，即将销毁
8. destroyed - 已经销毁了

我们通常会在created阶段发送请求，给data数据赋值；需要操作的dom的话，就在mouted阶段进行；需要在vue实例销毁的时候清空一些数据的操作，就在beforeDestroy阶段进行。。。

---

注

本博文缺失大量图片，严重影响内容完整性以及阅读体验，完整内容请前往本人菜鸡博客——许小墨のBlog