vue3生命周期详解
Vue3 详解 生命周期
2023-09-11 14:19:17 时间
vue3生命周期详解
在 Vue3 中,生命周期钩子函数的数量和名称都发生了变化。Vue3中有两个新的生命周期钩子函数:beforeUnmount 和 unmounted,同时将之前的 beforeCreate 和 created 合并为一个 setup 钩子函数。
下面是 Vue3 的生命周期钩子函数:
setup: 组件实例创建之初,此时组件实例已经被创建,但 data、props 等属性还未初始化。可以在该钩子函数中进行一些数据初始化操作。
beforeMount: 组件即将被挂载到 DOM 树中,此时组件的模板已经编译完成。
onMounted: 组件成功地挂载到 DOM 树中,此时可以对 DOM 进行操作。
onBeforeUpdate: 组件的数据即将更新,重新渲染前调用。
onUpdated: 组件的数据已经更新完成,DOM 已经重新渲染。
onUnmounted: 组件即将被卸载,此时可以进行一些清理工作,比如取消定时器、解绑事件等。
onErrorCaptured: 当捕获到来自子孙组件的错误时调用。
beforeUnmount: 在组件卸载之前调用,可以在这里做一些最后的清理工作。
unmounted: 组件已经被销毁,此时组件的所有内容都已经从 DOM 树中移除。
需要注意的是,在 Vue3 中,beforeCreate 和 created 钩子函数合并为了 setup,而且在 setup 函数中不能使用 this 关键字,而是采用了新的响应式 API。
import { onMounted, onUnmounted } from 'vue';
export default {
setup() {
const message = 'Hello, Vue3!';
onMounted(() => {
console.log('mounted');
});
onUnmounted(() => {
console.log('unmounted');
});
return {
message
};
}
};
通过使用 Vue3 的生命周期钩子函数,可以更好地管理组件实例的生命周期,避免出现内存泄漏等问题。
相关文章
- Vue笔记:Vue3配置axios跨域
- Vue3 getters打印结果是Proxy对象,怎么获取其中的值?
- vue3.x:用webpack-bundle-analyzer分析chunk文件过大的原因(vue.js 3.0.5/@vue/cli 4.5.13)
- vue3:vue+nginx+php进行服务端部署的配置(nginx/1.18.0 / vue@3.2.37)
- vue3-巧用指令
- vue3中的应该知道的setup
- vue3面试题:2022 最新前端 Vue 3.0 面试题及答案(持续更新中……)
- vue3快速入门:学习Vue3为什么要学习TypeScript?使用 TypeScript 的 10 个理由
- vue3组合式Composition API之ref函数的具体用法
- Vue3快速上手资料!手把手带你彻底学会Vue3,超详细讲解!不怕学不会!【建议收藏】【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通vue3笔记资料】
- vue3 - 报错 ESLint: Component name "index" should always be multi-word.(vue/multi-word-component-names)
- Vue2.js迁移到Vue3.js的API变化
- Vue3编译优化
- vue2.x与vue3.x中自定义指令详解
- Vue3实现滚动加载动画效果
- Vue3悬浮返回主页按钮设计与实现
- 掌握Vue3模板语法,助你轻松实现高效Web开发
- Vue3+TypeScript+Element Plus前端项目构建入门