生命周期
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,微信拉黑&隔离灭了你丫的,销毁了!!!)
?
?
?
?