Vue--生命周期

生命周期

Vue2.0默认是8个生命周期
方法名 状态 含义

beforeCreate creating 状态 实例创建之前调用

created creating 状态 实例创建成功，此时 data 中的数据显示出来了

beforeMount mounting 状态 数据中的 data 在模版中先占一个位置

mounted mounting 状态 模版中的 data 数据直接显示出来了

beforeUpdate updating 状态 当 data 数据发生变化调用，发生在虚拟 DOM 重新渲染和打补丁之前

updated updating 状态 数据更改导致的虚拟 DOM 重新渲染和打补丁

beforeDestroy destroying 状态 在 vue 实例销毁之前调用，此时实例任然可用

destroyed destroying 状态 在 vue 实例销毁之后调用，vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

*如果使用了keep-alive会是10个（activated、deactivated）

**
**activated：**来缓存组件状态，这个时候created钩子就不会被重复调用了， 如果我们的子组件需要在每次加载的时候进行某些操作，可以使用activated钩子触发
deactivated：组件移除时触发
根据服务端还是客户端渲染机制，生命周期依旧会发生变化

• updated 不被执行
• destroyed 不被执行

拾伍今天看到了Vue里边的生命周期，稍微有一点抽象，不过还好比起React中的稍微好一点！！！小编写了一个小列子《希望对大家有所帮助！！

生命周期就像搞对象

• 哎呀，好无聊啊，看看人家都有对象，一起学习/一起看电影一起做爱做的事，真好。我也好想有个女朋友哦（beforeCreate，概念化阶段，什么都没有）。
• 你要找的女朋友是什么样的呢？首先她是个女孩子，一个嘴巴、两条腿，等等总之就是女孩子默认的特征（created，有了雏型默认的数据有了）。
• 我未来的女朋友要像林志玲一样、或者像我的同桌这样的就行，根据自己的喜好已经勾勒出未来女朋友的样子（beforeMount，虚拟的还没有具体的目标）。
• 哇，隔壁班级新来的那位女孩子不错，她就是我喜欢的类型，我要把她追到手，让她做我女朋友（mounted，有了具体的目标形成了真实的DOM展示给了用户）。
• 追的我好累啊还没追到手，不行我得调整下战术，不能每天找她玩了，我要好好学习Vue在积云我说第二没人敢说第一那种的，给她补课（beforeUpdate，战术已调整还未投入实战）
• 去班级看看她有没有什么不会的，教教她（updated，新的战术已投入试用）
• 这死孩子真麻烦，天天教我Vue，搞的我好像多么笨似的，我自己能搞定四哥说了，要培养自己的学习能力及解决问题的能力，真烦人（beforeDestroy，已经很烦这个小伙子了，准备拒绝他的好意）
• 你又来干啥玩意儿，我自己能搞定，你给我滚，滚回你们班去，你除了Vue还会啥？四哥没告诉你吗，javascript才是最重要的，你给我滚，别来烦我（destroyed，微信拉黑&隔离灭了你丫的，销毁了！！！）

😂
😂
😂
😂

希望这个故事对大家有所帮助！！！大家可以关注我的博客！小编会持续发一些web的个人理解分享给到大家的！！

有什么问题也可以留言，拾伍会尽力解决的！