在写科研管理项目的时候,遇到了一个问题,
需求是这个鸭子
是子组件需要从父组件中获取接口请求到的数据,同时需要每次进入父组件的页面时,这个数据都是从接口拿到的最新的数据。
发现问题,
发现每次通过面包屑点开父组件,然后进入其他页面,再重新进入这个父组件时,希望子组件的数据是更新后的,从而控制一些样式改变。
会发现每次拿到的都是原来的数据。
从控制台输出也发现,父组件接口请求到数据总是比渲染子组件晚。
(因为接口请求是异步的原因)
问题解决
所以要想每次进入这个父组件页面都让子组件获得最新的数据,就需要等接口数据请求完毕后去加载子组件。
通过v-if控制子组件的加载
<Reject
v-if="this.showReject"
:textarea="rejectionReason"
:content="this.$route.query.values"
/>
初始值showReject=false;
在接口数据请求完毕后,showReject=true
这样就可以了。
这样做的样式会出现闪现数据,所以价格loading。
补充:
vue生命周期可以分为八个阶段,分别是:
beforeCreate(创建前)、created(创建后)、beforeMount(载入前)、mounted(载入后)、beforeUpdate(更新前)、updated(更新后)、beforeDestroy(销毁前)、destroyed(销毁后)
下面分别看看vue生命周期的这八个阶段:
1、创建前(beforeCreate)
对应的钩子函数为beforeCreate。此阶段为实例初始化之后,此时的数据观察和事件机制都未形成,不能获得DOM节点。
2、创建后(created)
对应的钩子函数为created。在这个阶段vue实例已经创建,仍然不能获取DOM元素。
3、载入前(beforeMount)
对应的钩子函数是beforemount,在这一阶段,我们虽然依然得不到具体的DOM元素,但vue挂载的根节点已经创建,下面vue对DOM的操作将围绕这个根元素继续进行;beforeMount这个阶段是过渡性的,一般一个项目只能用到一两次。
4、载入后(mounted)
对应的钩子函数是mounted。mounted是平时我们使用最多的函数了,一般我们的异步请求都写在这里。在这个阶段,数据和DOM都已被渲染出来。
5、更新前(beforeUpdate)
对应的钩子函数是beforeUpdate。在这一阶段,vue遵循数据驱动DOM的原则;beforeUpdate函数在数据更新后虽然没立即更新数据,但是DOM中的数据会改变,这是Vue双向数据绑定的作用。
6、更新后(updated)
对应的钩子函数是updated。在这一阶段DOM会和更改过的内容同步。
7、销毁前(beforeDestroy)
对应的钩子函数是beforeDestroy。在上一阶段vue已经成功的通过数据驱动DOM更新,当我们不在需要vue操纵DOM时,就需要销毁Vue,也就是清除vue实例与DOM的关联,调用destroy方法可以销毁当前组件。在销毁前,会触发beforeDestroy钩子函数。
8、销毁后(destroyed)
对应的钩子函数是destroyed。在销毁后,会触发destroyed钩子函数。
vue的生命周期的思想贯穿在组件开发的始终,通过熟悉其生命周期调用不同的钩子函数,我们可以准确地控制数据流和其对DOM的影响;vue生命周期的思想是Vnode和MVVM的生动体现和继承。