【vue进阶之旅】父子组件的生命周期执行流程
在vue中有一道面试必问题,那就是vue的生命周期。
月薪5K的回答:
beforeCreate=>created=>beforeMount=>mounted=> beforeUpdate=>updated=>beforeDestroy=>destroyed
有点经验的能勉强扯扯keep-alive的两个生命周期:
activated和deactivated
正文:
我们都知道vue是组件化开发思想,下面来抛出我们日常开发中最常见的一个业务场景,比如一个编辑功能如下图:有两个组件,父组件嵌套子组件,在子组件里面有一个下拉选择框,我们在父组件里面调后端接口获取数据,传给子组件,渲染到页面。你是怎么做的呢?
一、错误写法:
在父组件的Created,获取数据赋值给data对象,然后通过prop的方式传给子组件,子组件在Created里面接收处理数据,渲染到页面。
对于组件通信,要补课的同学可以看看我这篇文章。
下面我们来演示这种错误写法:
父组件:
子组件:
子组件数据:
在子组件的ceated里面处理父组件传过来的数据:
页面效果:
页面显示了枚举值5对应的城市:厦门。
很多人是不是在想:咦~东东吖,你不是说这是错误写法吗?这不就是我们想要的效果吗?我平时也是这样写的,没有问题呀!!!
别急,我们是不是漏了什么呢???我刚刚说的是从后端获取数据,从后端获取数据我们的数据会受到网络等因素的影响,那代表什么?那代表会有异步产生。
我们用settimeout来模拟异步请求。
这个时候我们会发现,我们的页面是没有选中的,平时大家这样写,是会有bug的,因为我们的数据会受到网络等因素制约,当后端返回的数据比较快时,我们可能在页面正常展示了数据,但当后端返回的数据较慢时,我们的页面就不能正常地展示数据,就会出现bug,而且这种bug不是必现的,有的同学就会觉得很诡异。对了,这里除了网络因素,组件被v-show控制时,组件没有被销毁,只会在第一次走created这个生命周期,比如你点击多条数据的编辑按钮,还可能出现上一条的数据。我们需要编辑的时候把上一次的值置空,再获取对应的值赋值
那怎么解决呢?我们都是知道初次渲染,单组件的生命周期是:
beforeCreate=>created=>beforeMount=>mounted
那父子组件他们的生命周期又是怎么样的呢?
少废话,控制台:
我们发现父子组件的生命周期执行流程:父组件执行了前三个生命周期:beforeCreate=>created=>beforeMounted,然后等子组件执行完四个生命周期:beforeCreate=>created=>beforeMount=>mounted,父组件再执行了mountedued
父组件先执行了Created这个生命周期,然后等子组件执行了Created,最后再挂载的,按道理我们在父组件的Created里面通过props传值,在子组件的Created里面处理数据是没问题的,但是你有没有想过,我们的生命周期不会等我们的异步请求呀,尤雨溪对vue做性能设计的时候可没那么傻。
对了,来人给我把尤雨溪摁住!!!前两天听他直播讲vue3的生态,最近一两个月他就要强制更新vue的官网到vue3了。
回归正题:
我们在父组件的Created里面模拟一个异步请求:
在父子组件里面的created里面打印这个枚举值值,打开控制台查看结果:
我们发现无论父组件还是子组件,我们都不能获取到我们的枚举值6
要想在子组件获取到这个枚举值6,渲染到页面上,我们应该怎么做呢?
二、野鸡写法:
这时候,有的同学就会想到,我们只要在子组件里面获取到这个值,就能解决这个bug,那我们能不能利用v-if重新构建vue实例呢?从而打断我们的父子组件原本的生命周期执行流程。当value存在的时候再渲染这个子组件
我们打开控制台查看结果,发现父子组件的生命周期执行流程被v-if阻断了,变成了两个单组件的生命周期,先执行了父组件,当value这个值存在的时候,再创建vue实例,执行子组件的生命周期,并在子组件成功获取到了这个枚举值6
页面效果:
这个时候页面确实展示了我们想要的效果,但是这个子组件是获取到值了,才渲染的,也就是说,他获取到值了,整个子组件1秒后才闪现展示到我们的页面的(自行想象),我不能说你这种写法错误,只能这种写法真的野鸡。
野鸡???
啥是野鸡? 懂的都懂,不懂的请输入以下词条自行类比:
三、家鸡写法:
用watch监听属性值,监听到值后,再处理数据。
打开控制台,我们是发现我们是能在watch里面监听到这个枚举值6的。
页面效果:"美丽,这个问题解决了"。
最后补充一点:我们这里是监听的一个属性,当我们监听的是一个对象,还需要利用deep深度监听,并通过immediate立即渲染。这里我就不再演示了,同学们自己试一试哦(其实是因为我懒,不想写示例了,哈哈哈)
总结:
对于一些配置数据,比如我们需要传入一个属性,来控制disabled,这种可以直接在组件上赋值,类似于第一种Created里面直接赋值,不过在组件上直接赋值代码更加简洁。但对于异步数据,我们必须用watch来监听赋值,如果监听的是对象,还需要设置深度监听和立即渲染两个属性。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfbacc
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24