热点面试题:Vue2、3 生命周期及作用?
前言
系列首发于公众号『前端进阶圈』 ,更多精彩内容敬请关注公众号最新消息。
Vue2 的生命周期?
分类:
Vue 生命周期分为 8 个阶段:创建前后,载入前后,更新前后,销毁前后
beforeCreate : 组件实例创建前
created : 组件实例创建后
beforeMount : 组件挂载前
mounted : 组件挂载到实例上后
beforeUpdate : 组件数据发生变化,更新前
updated : 组件数据更新后
beforeDestroy : 组件实例销毁前
destroyed : 组件实例销毁后
activated : keep-alive 缓存的组件激活时
deactivated : keep-alive 缓存的组件停用时调用
errorCaptured : 捕获一个来自子孙组件的错误时被调用
作用/过程
**
beforeCreate -> created
**:初始化Vue
实例created
:
可调用
methods
中的方法可访问和修改
data
中的数据来触发响应式渲染dom
可调用
computed
和watch
方法。但此时
vm.$el
还未创建。
create -> beforeMount
:
判断
el
是否存在,若不存在停止编译,直接调用vm.$mount(el)
继续编译。编译优先级:
render -> template -> outerHTML
beforeMount
:
可获取到
vm.el
已完成
DOM
初始化,但还未挂载DOM
beforeMount -> mounted
:vm.el
已完成挂载,vm.$el
生成的DOM
已经替换了el
上所对应的DOM
mounted
:vm.el
已完成DOM
的挂载和渲染beforeUpdate
:
view
层还没更新若在
beforeUpdate
中修改数据,不会触发当前方法
updated
:
完成了
view
层的更新若在
updated
中修改数据,会再次触发更新方法(beforeUpdate, updated
)
beforeDestroy
:Vue
实例销毁前调用,此时实例的属性和方法仍可访问。bestroyed
:
销毁
Vue
实例并没有清除
DOM
,仅仅是销毁Vue
实例
Vue3 的生命周期?
生命周期函数
onBeforeMount : 组件挂载前
onMounted : 组件挂载后
onBeforeUpdate : 组件更新前
onUpdated : 组件更新后
onBeforeUnmount : 组件实例卸载前
onUnmounted : 组件实例卸载后
onErrorCaptured : 捕获后代组件错误
onRenderTracked : `Dev Only:仅在开发模式下可用` 组件渲染过程中追求响应式依赖时调用
onRenderTriggered : 调试钩子,依赖项触发了组件渲染时调用
onActivated : 组件实例是 `<KeepAlive>` 缓存树的一部分,当组件被`插入`到 DOM 中时调用
onDeactivated : 组件实例是 `<KeepAlive>` 缓存树的一部分,当组件从 DOM 中被`移除`时调用
onServerPrefetch : 异步方法,SSR 服务端渲染前
作用/过程
onMounted()
: 注册一个回调函数,在组件挂载完成后执行。
onUpdated()
:注册一个回调函数,在组件因为响应式状态变更而更新其DOM
树之后调用。父组件的更新钩子将在其子组件的更新钩子之后调用。
onUnmounted()
:注册一个回调函数,在组件实例被卸载之后调用。
onBeforeMount()
:注册一个钩子,在组件被挂载之前被调用。当这个钩子被调用时,组件已经完成了其响应式状态的设置,但还没有创建DOM
节点。它即将首次执行DOM
渲染过程。
onBeforeUpdate()
:注册一个钩子,在组件即将因为响应式状态变更而更新其DOM
树之前调用。这个钩子可以用来在 Vue 更新DOM
之前访问DOM
状态。在这个钩子中更改状态也是安全的。
onBeforeUnmount()
:注册一个钩子,在组件实例被卸载之前调用。当这个钩子被调用时,组件实例依然还保有全部的功能。
onErrorCaptured()
: 注册一个钩子,在捕获了后代组件传递的错误时调用。错误可以从以下几个来源中捕获:
组件渲染
事件处理器
生命周期钩子
setup()
函数侦听器
自定义指令钩子
过渡钩子这个钩子带有三个实参:错误对象、触发该错误的组件实例,以及一个说明错误来源类型的信息字符串。
你可以在 errorCaptured()
中更改组件状态来为用户显示一个错误状态。注意不要让错误状态再次渲染导致本次错误的内容,否则组件会陷入无限循环。
这个钩子可以通过返回 false
来阻止错误继续向上传递
onRenderTracked()
:dev only
。注册一个调试钩子,当组件渲染过程中追踪到响应式依赖时调用。这个钩子仅在开发模式下可用,且在服务器端渲染期间不会被调用。
onRenderTriggered()
:注册一个调试钩子,当响应式依赖的变更触发了组件渲染时调用。这个钩子仅在开发模式下可用,且在服务器端渲染期间不会被调用。
onActivated()
: 注册一个回调函数,若组件实例是<KeepAlive>
缓存树的一部分,当组件被插入到DOM
中时调用。
onDeactivated()
:注册一个回调函数,若组件实例是<KeepAlive>
缓存树的一部分,当组件从DOM
中被移除时调用。
onServerPrefetch()
: 注册一个异步函数,在组件实例在服务器上被渲染之前调用。
特殊字符描述:
问题标注
Q:(question)
答案标注
R:(result)
注意事项标准:
A:(attention matters)
详情描述标注:
D:(detail info)
总结标注:
S:(summary)
分析标注:
Ana:(analysis)
提示标注:
T:(tips)
往期回顾:
最后:
版权声明: 本文为 InfoQ 作者【控心つcrazy】的原创文章。
原文链接:【http://xie.infoq.cn/article/3a232c1fb1b6117dd2e5065b4】。文章转载请联系作者。
评论