首页 > 其他分享 >Vue 的父组件和子组件生命周期钩子函数执行顺序?

Vue 的父组件和子组件生命周期钩子函数执行顺序?

时间:2024-03-22 18:01:16浏览次数:30  
标签:updated 生命周期 更新过程 钩子 Vue 和子 组件

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分:

  • 加载渲染过程
    父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

  • 子组件更新过程
    父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

  • 父组件更新过程
    beforeUpdate -> 父 updated

  • 销毁过程
    父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

以上是Vue的父组件和子组件生命周期钩子函数执行顺序的完整流程,包括加载渲染过程、子组件更新过程、父组件更新过程和销毁过程。每个阶段都有相应的钩子函数执行顺序,确保了组件的生命周期管理和数据更新的正确性。

标签:updated,生命周期,更新过程,钩子,Vue,和子,组件
From: https://blog.csdn.net/Cwhat/article/details/136916176

相关文章

  • Vue和SpringBoot实现的通用商城系统,高质量毕业论文范例,附送源码、数据库脚本,项目导入
    1.项目技术栈前端必学三个基础:“HTML、CSS、JS”,基本每个B/S架构项目都要用到,基础中的基础。此外项目页面使用Vue等前端框架技术。后端使用Java主流的框架 SpringBoot,使用MySQL数据库,是一个JavaWEB进阶学习的好资源。2.适合对象Java初学者、Java课题设计、Java毕业设......
  • vue或react项目上线刷新出现404的原因以及解决办法
    问题描述:vue/react项目,正常的页面操作跳转,不会出现404的问题,但是一旦刷新,就会出现404报错。产生原因:我们打开vue/react打包后生成的dist文件夹,可以看到只有一个index.html文件及一些静态资源,这个是因为vue/react是单页应用(SPA),只有一个index.html作为入口文件,其它的路由都是通......
  • vue2.0是如何监听双向绑定的?
    <!DOCTYPEhtml><html><head><metacharset="utf-8"/><title></title><style>.contanier{width:300px;height:300px;......
  • Vue学习笔记57--vue默认插槽 +
    vue默认插槽示例一:不使用插槽Category.vue<template><divclass="category"><h3>{{title}}</h3><ul><liv-for="(item,index)inlistData":key="index">{{item}}</li>......
  • Ant Design Vue 修改表格头部样式
    在网上搜了好多修改表格头部样式的,最后自己摸索出来,分享给大家,最后附上完整代码。首先用到的是customHeaderRow这个API,类型是一个函数1.HTML部分<a-tablesize='small'//样式大小:columns="columns":data-source="data"bordered:pagination="false"//不显示页数:c......
  • Vue 中给 data 中的对象属性添加一个新的属性时会发生什么?如何解决?
    <template><div><ul><liv-for="valueinobj":key="value">{{value}}</li></ul><button@click="addObjB">添加obj.b</button></div>&......
  • Vue中会出现哪些跨域问题?如何解决
    跨域跨域指的是在网络通信中,由于安全策略的限制,浏览器的一个文档或者脚本试图去请求另一个源(域名、协议或端口)下的资源时,会受到限制或阻止。这种情况通常发生在网页上的JavaScript发起跨域请求时。跨域请求可能会导致安全漏洞,因此浏览器通常会执行同源策略(Same-OriginPolicy),阻......
  • ruoyi-nbcio-plus基于vue3的flowable增加开始节点的表单绑定修改
    更多ruoyi-nbcio功能请看演示系统gitee源代码地址前后端代码:https://gitee.com/nbacheng/ruoyi-nbcio演示地址:RuoYi-Nbcio后台管理系统http://122.227.135.243:9666/更多nbcio-boot功能请看演示系统 gitee源代码地址后端代码:https://gitee.com/nbacheng/nbcio-boot......
  • vue3 + ts +element-plus + vue-router + scss + axios搭建项目
    本地环境:node版本:20.10.0目录一、搭建环境二、创建项目三、修改页面四、封装路由vue-router五、element-plus六、安装scss七、封装axios一、搭建环境1、安装vue脚手架npmi-g@vue/cli2、查看脚手架版本vue-V3、切换路径到需要创建项目的地方二、创建......
  • 基于springboot+vue的乡村民宿管理系统
    一、系统架构        前端:vue|element-ui        后端:springboot|mybatis-plus        环境:jdk1.8+|mysql|maven|nodejs二、代码及数据库        三、功能介绍   01.登录页  02.注册 03.管理员-首页 ......