vue3 生命周期函数
时间: 2023-05-10 11:01:30 浏览: 277
vue 生命周期函数
Vue3生命周期函数是指在Vue3实例创建、更新、渲染和销毁这几个重要阶段执行的函数。Vue3中生命周期函数分为两类:组件生命周期函数和全局生命周期函数。
首先是组件生命周期函数,包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount和unmounted等方法。
beforeCreate:在实例初始化之后,数据观测和事件配置之前被调用,此时 data 和 methods 都还未被初始化。
created:组件实例已经完全创建,包括属性计算、watch/event 事件回调。在这里可以访问到已经存在的 DOM 元素,但是该组件的 DOM 元素尚未被渲染出来。
beforeMount:在挂载开始之前被调用,在此之前 template/render 函数已经完成编译。
mounted:组件挂载到 DOM 上后调用,此时真实的 DOM 元素已经生成,可以对 DOM 进行操作。
beforeUpdate:在数据更新之前被调用,此时可以进行修改数据操作。在此函数执行时组件 DOM 所依赖的 props 和 computed 已经更新,但是尚未开始重新渲染 DOM。
updated:数据更新时调用,此时组件 DOM 已经重新渲染过,可以对 DOM 进行操作。
beforeUnmount:在卸载组件之前调用,此时组件实例仍然可以访问。
unmounted:组件卸载完成后调用,在这里执行一些清理工作,比如清除定时器、解除事件监听等。
接下来是全局生命周期函数,包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated和errorCaptured等方法。
errorCaptured:可以在组件的内部所抛出的异常被捕获和处理后,再将这个异常最终传递给全局错误处理。在捕获到错误时,可以对错误进行处理,并使用 nextTick 在渲染更新后再将错误信息抛出。
总之,Vue3的生命周期函数提供了方便的钩子函数来执行组件和全局的自定义逻辑,允许开发人员在关键的阶段进行处理来实现更加复杂的业务逻辑。
阅读全文