学习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
目录
相关文章
|
1天前
|
JavaScript
Vue3之Props组件数据传递
Vue3之Props组件数据传递
4 0
|
1天前
|
JavaScript API UED
Vue3中的Suspense组件有什么用?
Vue3中的Suspense组件有什么用?
16 6
|
1天前
|
JavaScript 前端开发 索引
Vue3基础之v-if条件与 v-for循环
Vue3基础之v-if条件与 v-for循环
6 0
|
1天前
|
JavaScript
Vue3基础之v-bind与v-on
Vue3基础之v-bind与v-on
9 0
|
1天前
|
JavaScript 测试技术 API
Vue3中定义变量是选择ref还是reactive?
Vue3中定义变量是选择ref还是reactive?
12 2
|
1天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
17 1
|
1天前
|
JavaScript 前端开发
vue2升级到vue3的一些使用注意事项记录(四)
vue2升级到vue3的一些使用注意事项记录(四)
12 0
|
1天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable收回任务后重新进行提交表单的处理
ruoyi-nbcio-plus基于vue3的flowable收回任务后重新进行提交表单的处理
13 0
|
1天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable多租户机制
ruoyi-nbcio-plus基于vue3的flowable多租户机制
|
1天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable的消息中心我的消息的升级修改
ruoyi-nbcio-plus基于vue3的flowable的消息中心我的消息的升级修改