If the component is also alive.
这里以一个例子说明(组件test
的生命周期):
1 |
|
基本组件的生命周期
beforeCreate
组件创建前执行。数据还未加载,没有真实dom。
1 | beforeCreate(){ |
created(开始有数据)
组件创建完毕执行,数据已经存在
,可以在这个阶段进行一些数据请求(axios)操作。
1 | created(){ |
注意,这时候修改数据,数据会变化,但不会触发beforeUpdate
以后的钩子函数。
beforeMount
挂载之前。不常用,和created
类似
1 | beforeMount(){ |
mounted
挂载之后。模板内容已经渲染到页面上,真实dom已经生成。这时候常规的操作都可以进行了。
1 | mounted(){ |
在这个阶段修改数据,会触发beforeUpdate
和updated
钩子函数。
beforeUpdate
数据更新前.
1 | beforeUpdate(){ |
数据是更新后的值,但dom中的数据还未更新。
updated
数据更新完成.
1 | updated(){ |
数据是更新之后的值,dom中的数据也是更新后的。
beforeDestory
组件销毁之前
1 | beforeDestroy(){ |
destoryed
组件销毁之后.
1 | destroyed(){ |
在最后的两个阶段,我们一般会做一些实例销毁的后事处理
。
完整代码
1 |
|
点击查看: Vue官网的生命周期图示
另外三个生命周期钩子函数
组件:
SPA中切换组件的时候,离开
当前组件(A)切换到另一个组件(B)的时候,A组件被销毁(destory),B组件被创建(create),但对于一些场景我们并不希望组件这么频繁的销毁和创建(会导致回流,降低网页性能),用可以在销毁前缓存这个组件,减少了浏览器渲染的负担。
activated
被keep-alive
组件缓存的组件激活
时调用。可以在这里重新加载数据。
keep-alive:
可以识别包裹在标签的组件,在组件将要销毁时进行缓存。
当路由切换到被缓存的组件时,不会重新创建,从缓存取出展示
主要用来保存组件的状态和避免重复渲染组件
deactivated
被keep-alive
组件缓存的组件停用
时调用。可以用来判断用户离开的时间。
场景:组件切入切出判断用户离开时间,执行操作
1 | <script> |
errorCapture
捕获子孙组件的错误,自身出错不会被执行。
- 本文链接: https://anyway521.gitee.io/post/d553039f.html
- 最后更新:
- 版权声明: 博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议进行许可,转载请注明出处!