关于vue的生命周执行顺序遇到的一些问题

562 阅读2分钟

1.vue的生命周期

vue整体的生命周期: beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestory -> destoryed。

image.png

2.父子组件之前的部分生命周期执行顺序

父级created=>子级created=>子级mounted=>父级mounted。

3.本次遇到的问题:

子组件会在mounted里面执行给予绑定的时间(time)筛选值一个初始值,而这个值会根据一个”type“的参数赋予不同的类型(在type为mounth的时候是一个字符串,daterange的时候是一个数组)。

image.png

所以在这里就出问题了!!!! 当我从第二种type的路由切换到第一种的时候 按理来说想要的是都是默认在初始化的时候展示当前月份的时间展示。

image.png

但是实际上在切换到第二个界面的时候,绑定的time在最后被置空了,

image.png

所以展示出来的还是空的时间选择器如下图:

image.png

原因是在哪里呢?

上图一与图二是使用了时间筛选组件的两个页面

另外我发现在子组件中有一个侦听对象,会把时间置空

image.png

4.debugg测试

首先子组件在mounted里面初始化给予time一个本月的初始值:

image.png

time改变触发untilTime的改变

image.png

这个时候不进入time的置空操作步骤

然后才会进入父组件的mounted方法里面,这个时候会执行一次置空包含time、untilTime等参数的大对象(filters)

image.png

untilTime值改变所以再次进入侦听

image.png

总的来说是这个监听执行到了引起绑定的time被再次置空的操作,所以子组件没有显示所需要的本月时间。

解决办法

跳过这个watch事件或者整理父子组件之间mounted的顺序,避免这种本来该后执行的方法跑到前面来了。

image.png