120、父子组件的生命周期

news/2024/7/10 0:34:06 标签: vue

一、父子组件的生命周期对比 

  • 加载渲染过程

  父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

在父组件执行beforeMount阶段后,进入子组件的beforeCreate、Created、beforeMount阶段,这些阶段和父组件类似。

子组件beforeMount阶段后,执行的是子组件的Mounted阶段,该阶段时子组件已经挂载到父组件上,并且父组件随之挂载到页面中。 

子组件的activated:我们发现在子父组件全部挂载到页面之后被触发。这是因为子组件my-components被<keep-alive> 包裹,随$el的挂载被触发。如果子组件没有被<keep-alive>包裹,那么该阶段将不会被触发。

父组件的mounted执行时:此时el已经渲染完成并挂载到实例上。

  • 子组件更新过程

  父beforeUpdate->子beforeUpdate->子updated->父updated

存在<keep-alive>时,子组件的调用顺序:beforeUpdate、deactivated、updated;

deactivated函数的触发时间是在视图更新时触发。因为当视图更新时才能知道keep-alive组件被停用了。

  • 父组件更新过程

  父beforeUpdate->父updated

  • 销毁过程

  父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

注意:所有的生命周期钩子自动绑定 this 上下文到实例中,所以不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是导致this指向父级。 


http://www.niftyadmin.cn/n/1022378.html

相关文章

python之psutil模块

简述 psutil是一个跨平台库&#xff08;http://code.google.com/p/psutil/&#xff09; &#xff0c;能够轻松实现获取系统运行的进程和系统利用率&#xff08;包括CPU、内存、磁盘、网络等&#xff09;信息。它主要应用于系统监控&#xff0c;分析和限制系统资源及进程的管理。…

docker的初步使用

导读本文不追求严谨的措辞&#xff0c;仅为没有用过docker的用户提供快速的概览docker是一个轻量的虚拟机虚拟机 :从网上下载了一个软件&#xff0c;不确定是否包含病毒&#xff1b;或者只是临时用一下&#xff0c;有点洁癖不希望有这个软件的残留。此时把这个软件放到虚拟机的…

121、git

&#xff08;1&#xff09;提交文件到远程仓库&#xff1a; git add 文件名 &#xff1a; 将工作文件修改提交到本地暂存区&#xff0c;这个时候还不算添加到了本地仓库。例如&#xff1a;git add test.c &#xff1b;git commit -m 描述信息&#xff1a; 把缓存区里的文件提…

122. mixin(混入)

&#xff08;1&#xff09;mixin的作用&#xff1a; 使用mixin可以抽离组件的公共逻辑&#xff1b;就是有很多组件需要同一个方法、同一个变量、做同样的事。这个时候就用到这个混入的功能。混入之后变量组件内可用&#xff0c;方法也可用&#xff0c;写在周期函数的代码也会…

struts2官方 中文教程 系列十二:控制标签

介绍 struts2有一些控制语句的标签&#xff0c;本教程中我们将讨论如何使用 if 和iterator 标签。更多的控制标签可以参见 tags reference. 到此我们新建一个struts2 web 项目&#xff1a;struts_basic2 本帖地址&#xff1a;struts2官方 中文教程 系列十二&#xff1a;控制标签…

89、小米一面---- 编辑距离(动态规划)

编辑距离_牛客题霸_牛客网 一、题目 给定两个单词word1和word2&#xff0c;请计算将word1转换为word2至少需要多少步操作。 你可以对一个单词执行以下3种操作&#xff1a; a&#xff09;在单词中插入一个字符 b&#xff09;删除单词中的一个字符 c&#xff09;替换单词中的一…

css中的px、em、rem 详解

概念介绍&#xff1a; 1、px (pixel&#xff0c;像素)&#xff1a;是一个虚拟长度单位&#xff0c;是计算机系统的数字化图像长度单位&#xff0c;如果px要换算成物理长度&#xff0c;需要指定精度DPI(Dots Per Inch&#xff0c;每英寸像素数)&#xff0c;在扫描打印时一般都有…

判断是否手机是否有导航栏

private boolean hasNavigationBar() {Display display getWindowManager().getDefaultDisplay();DisplayMetrics displayMetrics new DisplayMetrics();if (Build.VERSION.SDK_INT > Build.VERSION_CODES.JELLY_BEAN_MR1) {// 获取设备的硬件屏幕高度display.getRealMetr…