私人博客
许小墨のBlog —— 菜鸡博客直通车
系列文章完整版，配图更多，CSDN博文图片需要手动上传，因此文章配图较少，看不懂的可以去菜鸡博客参考一下配图！
系列文章目录
前端系列文章——传送门
后端系列文章——传送门
文章目录
- 私人博客
- 系列文章目录
- vue生命周期
- 注
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内置的，在生命周期进行到对应的阶段的时候，会自动调用，我们只需要将自己要执行的代码写好即可，不需要手动调用。
- beforeCreate - 此时vue实例中还没有数据
- created - 此时vue实例中有数据了，但是还不能操作dom
- beforeMount - 同上
- mounted - 挂载好了，页面显示出来了，可以操作dom了
- beforeUpdate - 数据即将修改，但是还没有修改完成
- updated - 数据修改完成，dom也重新渲染了
- beforeDestroy - 已经调用了销毁方法，即将销毁
- destroyed - 已经销毁了
我们通常会在created阶段发送请求，给data数据赋值；需要操作的dom的话，就在mouted阶段进行；需要在vue实例销毁的时候清空一些数据的操作，就在beforeDestroy阶段进行。。。
注
本博文缺失大量图片，严重影响内容完整性以及阅读体验，完整内容请前往本人菜鸡博客——许小墨のBlog
