学习Vue3 第十二章(认识组件&Vue3生命周期)

简介: 引入子组件 helloWorld 然后直接就可以去当标签去使用 (切记组件名称不能与html元素标签名称一样)

组件基础


每一个.vue 文件呢都可以充当组件来使用


每一个组件都可以复用


d71e48ec34ef47e4a59720f54f9ef13a.png


例如 helloWorld 充当子组件


3afb80a0e75444669636a67488b4d4eb.png


父组件使用


引入子组件 helloWorld 然后直接就可以去当标签去使用 (切记组件名称不能与html元素标签名称一样)


72459aa0048c47f88c487b37bf53d3e8.png


组件的生命周期


简单来说就是一个组件从创建 到 销毁的 过程 成为生命周期


在我们使用Vue3 组合式API 是没有 beforeCreate 和 created 这两个生命周期的


2dc0048de8824543aa60d9e4e4e656a3.png


onBeforeMount()


在组件DOM实际渲染安装之前调用。在这一步中,根元素还不存在。


onMounted()


在组件的第一次渲染后调用,该元素现在可用,允许直接DOM访问


onBeforeUpdate()


数据更新时调用,发生在虚拟 DOM 打补丁之前。


onUpdated()


DOM更新后,updated的方法即会调用。


onBeforeUnmount()


在卸载组件实例之前调用。在这个阶段,实例仍然是完全正常的。


onUnmounted()


卸载组件实例后调用。调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。


选项式 API Hook inside setup
beforeCreate Not needed*
created Not needed*
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeUnmount onBeforeUnmount
unmounted onUnmounted
errorCaptured onErrorCaptured
renderTracked onRenderTracked
renderTriggered onRenderTriggered
activated onActivated
deactivated onDeactivated
目录
相关文章
|
3天前
|
JavaScript
在 Vue 中处理组件选项与 Mixin 选项冲突的详细解决方案
【10月更文挑战第18天】通过以上的分析和探讨,相信你对在 Vue 中使用 Mixin 时遇到组件选项与 Mixin 选项冲突的解决方法有了更深入的理解。在实际开发中,要根据具体情况灵活选择合适的解决方案,以确保代码的质量和可维护性。
28 7
|
2天前
|
缓存 JavaScript UED
Vue 的动态组件与 keep-alive
【10月更文挑战第19天】总的来说,动态组件和 `keep-alive` 是 Vue.js 中非常实用的特性,它们为我们提供了更灵活和高效的组件管理方式,使我们能够更好地构建复杂的应用界面。深入理解和掌握它们,以便在实际开发中能够充分发挥它们的优势,提升我们的开发效率和应用性能。
29 18
|
1天前
Vue3 中使用 Event Bus
【10月更文挑战第16天】Event Bus 是 Vue3 中一种简单而实用的通信方式,在一些简单的场景中可以发挥重要作用。但在实际应用中,要根据项目的具体需求和复杂度,选择合适的通信方式,以实现最佳的性能和可维护性。同时,要遵循最佳实践,合理使用 Event Bus,避免出现问题。
11 5
|
2天前
|
前端开发 UED
vue3知识点:Suspense组件
vue3知识点:Suspense组件
11 4
|
1天前
|
JavaScript 前端开发 Java
《vue3第五章》新的组件,包含:Fragment、Teleport、Suspense
《vue3第五章》新的组件,包含:Fragment、Teleport、Suspense
10 2
|
2天前
|
Java
vue3知识点:Teleport组件
vue3知识点:Teleport组件
10 1
|
4天前
|
存储 JavaScript
Vue 组件间通信的方式有哪些?
Vue组件间通信主要通过Props、Events、Provide/Inject、Vuex(状态管理)、Ref、Event Bus等实现,支持父子组件及跨级组件间的高效数据传递与状态共享。
|
2天前
|
JavaScript 前端开发
vue全局公共组件自动引入并注册,开发效率直接起飞!
vue全局公共组件自动引入并注册,开发效率直接起飞!
18 1
|
4天前
|
JavaScript
Vue 的父组件和子组件生命周期钩子执行顺序
在 Vue 中,父组件和子组件的生命周期钩子执行顺序如下:
|
3天前
|
存储 JavaScript
vue——store全局存储
【10月更文挑战第18天】Vuex 是 Vue.js 应用中非常重要的一个工具,它为我们提供了一种有效的状态管理方式。通过合理地使用 Vuex,我们可以更好地组织和管理应用的状态,提高应用的开发效率和质量。
15 1