1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > Vue 3——生命周期钩子函数

Vue 3——生命周期钩子函数

时间:2021-12-09 18:47:31

相关推荐

Vue 3——生命周期钩子函数

可以直接导入onXXX一族的函数来注册生命周期钩子:

import {onMounted, onUpdated, onUnmounted } from 'vue'const MyComponent = {setup() {onMounted(() => {console.log('mounted!')})onUpdated(() => {console.log('updated!')})onUnmounted(() => {console.log('unmounted!')})},}

这些生命周期钩子注册函数只能在setup()期间同步使用, 因为它们依赖于内部的全局状态来定位当前组件实例(正在调用 setup() 的组件实例), 不在当前组件下调用这些函数会抛出一个错误。

组件实例上下文也是在生命周期钩子同步执行期间设置的,因此,在卸载组件时,在生命周期钩子内部同步创建的侦听器和计算状态也将自动删除。

1、与 2.x 版本生命周期相对应的组合式 APIbeforeCreate -> 使用 setup()created -> 使用 setup()beforeMount -> onBeforeMountmounted -> onMountedbeforeUpdate -> onBeforeUpdateupdated -> onUpdatedbeforeDestroy -> onBeforeUnmountdestroyed -> onUnmountederrorCaptured -> onErrorCaptured2、新增的钩子函数除了和 2.x 生命周期等效项之外,组合式 API 还提供了以下调试钩子函数:onRenderTrackedonRenderTriggered两个钩子函数都接收一个 DebuggerEvent,与 watchEffect 参数选项中的 onTrack 和 onTrigger 类似:

export default {onRenderTriggered(e) {debugger// 检查哪个依赖性导致组件重新渲染},}

依赖注入

provide 和 inject 提供依赖注入,功能类似 2.x 的 provide/inject。两者都只能在当前活动组件实例的 setup() 中调用。

import {provide, inject } from 'vue'const ThemeSymbol = Symbol()const Ancestor = {setup() {provide(ThemeSymbol, 'dark')},}const Descendent = {setup() {const theme = inject(ThemeSymbol, 'light' /* optional default value */)return {theme,}},}

inject 接受一个可选的的默认值作为第二个参数。如果未提供默认值,并且在 provide 上下文中未找到该属性,则 inject 返回 undefined。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。