父子组件创建，更新，销毁时候的生命周期

于 2024-03-08 11:49:16 发布
阅读量208 收藏
点赞数 2
分类专栏： vue 文章标签： 生命周期 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44473483/article/details/136557439
版权

创建阶段

当父子组件创建的时候

  • 父：beforeCreate
  • 父：create
  • 父：beforeMount
  • 子：beforeCreate
  • 子：create
  • 子：beforeMount
  • 子：mounted
  • 父：mounted

更新阶段

只更新父组件

  • 父：beforeUpdate
  • 父：updated

如果只更新父组件那么子组件不参与变更

只更新子组件

  • 子：beforeUpdate
  • 子：updated

如果只更新子组件那么父组件不参与变更

更新父组件但是子组件也使用该数据，例如props传参

  • 父：beforeUpdate
  • 子：beforeUpdate
  • 子：updated
  • 父：updated

销毁阶段

子组件销魂

  • 父：beforeUpdate
  • 子：beforeDestroy
  • 子：destroyed
  • 父：updated

父组件销毁

  • 父：beforeDestroy
  • 子：beforeDestroy
  • 子：destroyed
  • 父：destroyed
丹丹的小跟班
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue同步父子组件和异步父子组件的生命周期顺序问题
10-17
主要介绍了vue同步父子组件和异步父子组件的生命周期顺序问题,需要的朋友可以参考下
vue2.0父子组件及非父子组件之间的通信方法
08-31
给大家介绍了vue2.0父子组件及非父子组件之间的通信方法，非常不错，具有参考借鉴价值，需要的朋友参考下吧
vue的生命周期及父子组件生命周期
Celester_best的博客
06-08 4057
本文讲解了vue的生命周期，父子组件涉及的生命周期过程以及created和mouted钩子的区别
父子组件通信时候触发的生命周期有哪些
CarrreyYan_979292的博客
05-13 187
父子组件通信时候触发的生命周期有哪些 1：父子组件之间共享了数据 2：数据是响应式，并且会存在更新线上 先说结婚，再解释，为什么是这样结果 初始化 结论 初始化数据 父：beforeCreate created 子 beforeCreate created 初始化渲染dom 父beforeMount 子beforeMounte 子 mounted 父mounted 生命周期为什么这么执行？ 因为vue的模板需要经过编译处理，变为真是的dom, 1：vue模板是根据初始化响应式数据生成虚拟
Vue父子组件的生命周期
weixin_45817987的博客
03-14 4712
Vue父子组件的生命周期 首先来介绍一下Vue的生命周期 Vue的生命周期 Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载DOM、渲染—>更新—>渲染、销毁等一系列过程，这就是Vue的生命周期。简单来说就是Vue实例从创建到销毁的过程。 Vue的生命周期分为了三个阶段：初始化阶段，更新阶段，销毁Vue的实例，每个阶段又有着自己的钩子函数 初始化阶段钩子函数 beforeCreate()实例创建前：数据和模板均未获取到 created()实例创建后：最早可以访问到
Vue父子组件生命周期的先后顺序
qq_57334853的博客
07-11 2720
Vue父子组件生命周期的先后顺序 组件的调用顺序是先父后子，渲染完成的顺序是先子后父。组件的销毁操作是先父后子，销毁完成的顺序是先子后父 初次渲染完成触发的声明周期 挂载/加载/渲染阶段 子组件更新阶段 父组件更新阶段 销毁阶段............
vue父子组件生命周期执行顺序
当幸福来敲门
05-08 2354
生命周期： 一个组件从创建到销毁的整个过程就是生命周期。 生命周期函数（钩子函数）： vue框架内置函数，随着组建的生命周期，自动按次序执行。 beforeCreate:创建实例之前执行，元素和数据都是undefined。 created:实力初始化完成后执行，可以访问数据或方法，不能操作DOM。可以做一些初始数据的获取，发送ajax。 beforeMount:挂载前执行，虚拟DOM创建完成，即将开始渲染。 Mount​​​​​​​ed:页面渲染完成后执行，可以对DOM进行操作。 befor
父子组件生命周期执行顺序
m0_50125215的博客
09-04 5665
我们已经非常熟悉单个的vue组件的生命周期执行顺序了，但是，如果有嵌套组件，父子组件的生命周期的执行顺序是什么？ 当父子组件在加载的时候，执行的先后顺序为 父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted 然后理解下这个顺序： 1.当父组件执行完beforeMount挂载开始后，会依次执行子组件中
vue父子组件生命周期顺序_VUE生命周期含父子组件生命周期简介
weixin_39922361的博客
02-22 486
前言:写这些东西的目的是为了给我媳妇总结下前端一些基本知识点，写的不好见谅.一 .单页面生命周期过程创建(credted)挂载(mounted)更新(updated)销毁(destoryed)单页面从创建到销毁，也就是离开本页面的或称分为这四个阶段，其中每个阶段有分为前后两个周期，每个周期对应一个钩子函数，故我总结VUE单页面的生命周期为四个阶段，八个勾子。如：beforeCreate和creat...
Vue生命周期&父子组件的生命周期
乌龙茶不甜的博客
02-13 910
beforeCreate --created 在这个阶段初始化事件，进行数据观测。 created vue实例创建完后被调用，此时已经完成了数据观测(data observer)，属性和方法的运算，watch/event 事件回调的配置。 可调用methods中的方法，访问和修改data中的数据，并触发响应式变化使DOM渲染更新，触发watch中相应的方法，computed相关属性...
父子组件生命周期
Alex_killer的博客
07-01 189
父子组件生命周期的执行顺序是：父亲、父亲、父亲、孩子、孩子、孩子、孩子、父亲、父亲、孩子、孩子、父亲；孩子的早于父亲
深入理解Vue父子组件生命周期执行顺序及钩子函数
10-18
本文通过实例代码给大家介绍了Vue父子组件生命周期执行顺序及钩子函数的相关知识，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
Vue 父子组件的数据传递、修改和更新方法
08-27
下面小编就为大家分享一篇Vue 父子组件的数据传递、修改和更新方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
组件el-scrollbar的使用
热门推荐
qq_44473483的博客
05-30 2万+
对于elementui里面的scrollbar组件，一直没有一个清晰的使用方法，似乎每次使用需要的代码都不同，需要加各种乱七八糟的样式加穿透样式，今天自己测试了下，似乎并没有想象的复杂。 1.最简单的使用 <template> <div> <el-scrollbar> <div class="box"> <ul> <li v-for="item in 100">{{ item
vue实现连接打印机功能
qq_44473483的博客
04-20 1万+
1.安装依赖 npm i vue-print-nb 2.挂载依赖 Vue.use(Print) 3.包装元素 <!-- 需要给外层包裹元素ref，在点击打印阶段需要使用ref获取打印元素，需要指定id用于捆绑触发打印的按钮 --> <div ref="printTest" id="printTest"> 需要打印的数据 </div> 4.创建打印按钮 <!-- v-print指令可以直接绑定到对应的打印区域--> <el-button v-pr
vue里面的文件动态引入
qq_44473483的博客
02-11 8038
在vue里，会出现很多文件引入的情况。常见的就是在router或者公共组件的引用，我们分别对这两种情况进行讨论，并提出优化方式。 一.router文件的引入 当我们的项目体系足够大时，将路由全都放在index.js文件是不优雅的，页面代码过于复杂会造成阅读和维护的困难。所以这个时候，我们一般采取分模块引用，一个模块对应一个js文件，里面存放对应的路由信息。但是当我们的模块足够多时，重复的文件引入对我们来说也是一个困扰，所以就可以使用动态引入。 我们简单写几个文件为例。上面的文件除了index.js外分别对
路由传参的三种方式和props获取路由传参
qq_44473483的博客
07-05 4281
一直理不清楚路由传参的几种方式，今天总结记录下 第一种方法通过params与配置路由格式（特点：刷新数据不会丢失，会以/user/1234格式拼接显示在url里面） 路由配置 { path: '/user/:id', name: 'user', component: user } 带参数传递 //直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: '/user/123',
vue缺点
qq_44473483的博客
05-21 3971
浅谈vue几个缺点 1.不利于SEO SEO是Search Engine Optimization的缩写，意思是“搜索引擎优化”，搜索引擎的基础爬虫的原理就是抓取你的url，然后获取你的html源代码并解析。而vue里面的大部分数据是存在于js代码里面的，也就是说，如果一个单页应用，html在服务器端还没有渲染出所有数据，在浏览器才渲染出所有数据，而搜索引擎请求到的html是没有渲染数据的。 这样就很不利于内容被搜索引擎搜索到。 2.首页白屏 主要原因还是因为他是SPA的特性，会在首页的时候将所有的js、c
vue父子组件的生命周期
最新发布
06-01
在组件更新时，父子组件的生命周期钩子函数执行顺序如下： 1. 父组件 beforeUpdate 2. 子组件 beforeUpdate 3. 子组件 updated 4. 父组件 updated 当组件被销毁时，父子组件的生命周期钩子函数执行顺序如下： 1. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值