在vue的官网上,有一个很难懂的图,还是英文的········

简单总结一下,方面处理数据和渲染dom

第一个:单独组件的生命周期;

  1. beforeCreate:dom和data以及motheds未定义;
  2. creaded:dom未定义,data和motheds定义;
  3. beforemount:dom和data以及motheds已经定义,但是dom上利用的data和motheds并没有被赋值和渲染;
  4. mounted:dom和data以及motheds已经定义,并且已经渲染;
  5. beforeUpdate和updated都是在data改变后才执行;
  6. actived:这个想必很少用到,这个只有在用到vue的标签<keep-alive>才会触发,方便保存数据,避免第二次进入界面时重复调用接口

说一下<keep-alive>

keep-alive是vue的内部标签,包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们;当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。sas

第二个:Vue中父组件和子组件在一起的生命周期。

创建时:
1.父--beforeCreate

2.父--created

3.父--beforeMounted

4.子--beforeCreate

5.子--created

6.子--beforeMounted

7.子--mounted

8.子--actived(如过有<keep-alive>标签)

9.父--mounted

10.父--actived(如过有<keep-alive>标签)

销毁时:

1.父--beforeDestroy

2.子--beforeDestroy

3.子--destroyed

4.父--destroyed

vue的组件的生命周期相关推荐

  1. Vue组件的生命周期以及钩子函数的作用

    什么叫做生命周期 一个组件从创建到销毁的过程叫做组件生命周期. Vue在生命周期中提供了一些函数可以在其内部实现一些业务逻辑并且这些函数会在一些特定的场合下执行. 组件的生命周期钩子函数大致可以分为三 ...

  2. React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期

    React简介: 前面只是简单介绍移动APP开发,后面还会继续深入介绍移动app开发:其中想要用ReactNative开发出更出色的应用,那么就得学好React,下面将介绍React: React 是 ...

  3. React 初探 [五] React 组件的生命周期

    说起生命周期,最先接触的是Andorid 开发中 Activity 和 Fragment 的生命周期,再者是Vue 组件,那么今天要梳理的是React 组件的生命周期,可见对生命周期的理解和掌握对组件 ...

  4. 组件的生命周期,小程序如何引入第三方ui框架

    笔记 组件开发的三要素 properties //相当于vue中的props接收属性 triggerEvent//相当于vue中是$emit slot//和vue是类似的slot 1.可以通关slot ...

  5. Vue之MVVM、Vue实例对象、生命周期

    1.初识Vue Vue是一套用于构建用户界面的渐进式框架,Vue 被设计为可以自底向上逐层应用,Vue的核心是只关注视图层(如何理解),不仅易于上手,还便于与第三方库或既有项目整合. 渐进式框架:渐进 ...

  6. jquery 监听td点击事件_VUE @hook浅析(监听子组件的生命周期钩子) - 古兰精

    一.前言 接触hook是从webhook开始接触的,webhook是git的一个扩展服务,可以在仓库接收到push/commit事件并发送http request至一个开发者可以自定义的URL.通过这 ...

  7. Vue 进阶系列丨生命周期

    Vue 进阶系列教程将在本号持续发布,一起查漏补缺学个痛快!若您有遇到其它相关问题,非常欢迎在评论中留言讨论,达到帮助更多人的目的.若感本文对您有所帮助请点个赞吧! 2013年7月28日,尤雨溪第一次 ...

  8. Vue 进阶语法和生命周期

    文章目录 Vue 进阶语法和生命周期 16.Vue:生命周期[了解] 17.Vue:computed计算属性 18.Vue:watch监控属性 Vue 进阶语法和生命周期 a. 每个 Vue 应用都是 ...

  9. 【微信小程序】组件的生命周期及自定义组件

    文章目录 组件的生命周期 自定义组件的生命周期函数 执行顺序 组件常用的生命周期函数 lifetimes节点 组件所在页面的生命周期函数 pageLifetimes节点 自定义组件 创建自定义组件 创 ...

最新文章

  1. java boolean几个字节_Java中boolean类型到底占用多少个字节?
  2. Understanding JVM Internals---不得不转载呀
  3. Visual Studio中怎样更改Nuget程序包源
  4. 什么是springboot框架
  5. mysql 必知必会 笔记
  6. Nginx支持比Apache高并发的原因
  7. 1910140852linux安装g
  8. kaggle实战—泰坦尼克(二、数据清洗及特征处理)
  9. discuz x2.5 mysql_Discuz2.5的MYSQL数据库的备份与恢复
  10. img 居中_如何解决img标签下面的小空隙(详细教程)
  11. C++ WinExec system 隐藏黑框;清空文件
  12. 【Gulimall+】免费白嫖内网穿透:小米球ngrok
  13. postman接口文档
  14. 【毕设资料】 Web版RSS阅读器(一)——dom4j读取xml(opml)文件
  15. java-第十三章-类的无参方法(一)-模拟一个简单的购房商贷月供计算器
  16. spring定时任务需要在项目启动时执行一次
  17. BI(商业智能)的未来?
  18. android控制创维电视,创维电视怎么连接手机 创维电视连接手机的方法【详细介绍】...
  19. Python不借助中间值实现两个数之间的交换
  20. NAT 2 - 利用Rotary NAT实现TCP流量负载均衡 [译] + GNS3实现

热门文章

  1. java 判断当前月天数
  2. 【FinE】统计与计量指标计算(Matlab)
  3. 大数据起步之wormhole初识
  4. chmod 777命令_实用的linux 命令(上)
  5. Ionic2 WARNING: sanitizing HTML stripped some content when no content stripped
  6. 网络优化之“弱覆盖与过覆盖”
  7. Android开发技术前线 (android-tech-frontier) --优质技术文章的聚合项目
  8. 7、统计字母、空格、数字 与 其它字符的个数
  9. 爬虫:Robots协议
  10. 【VScode】VCode配置C++编译器