mounted中发起请求碰到的一个问题

来源:3-7 vue父子组件生命周期调用顺序

菜卷_

2021-05-30

希望老师耐心看完,大概会用到老师3-5分钟的时间。
代码结构是这样的:

// 主页 引入父组件,并在mounted中发起请求,将数据赋值给value,然后将value传给父组件
<div>
	<father :value="value" />
</div>

// father组件,接收主页传来的value,并循环value,将value中的item传给son组件
<div v-for="item in value">
	<son :item="item">
</div>

这时候神奇的发现,son组件并没有加载,思考后发现是因为父子组件的声明周期是依次先加载created的,所以在循环son组件时,value并没有值,所以son组件不会加载

然后我这样测试了一下,问题就出现了!!!!!
在created中给value赋值,父子组件的生命周期符合预期:
主页的created
father的created
son的created
son的mounted
father的mounted
主页的mounted

不调用ajax请求,而是直接在mounted中给value赋值,这时候组件的钩子函数调用顺序变成了这样:
主页的created
father的created
father的mounted
主页的mounted
son的created
son的mounted

我隐约觉得是和更新阶段的生命周期有关,但仔细想了之后,如果和更新阶段的生命周期有关的话,那么就不会出现开头的问题,所以百思不得骑姐啊,希望老师解答~~

写回答

1回答

双越

2021-05-30

“son组件并没有加载”—— 这并不是生命周期的问题。因为 vue 中只要修改了 data ,无论是哪个生命周期中修改,都会触发视图渲染的。

你需要另外排查原因。

0
0

2024版 前端框架及项目面试 聚焦Vue3/React/Webpack

面向1-3年前端的框架及项目面试“刚需内容”

4664 学习 · 1644 问题

查看课程