vue小知识（1）

1. 使用transition实现过渡动效时，transition必须是最外层，不可以出现

<div>
    <transition></transition>
</div>

2. vue生命周期

场景：我需要在父路由中先请求一个接口，然后子路由中请求另一个接口，但是子路由的接口请求需要父接口的一些参数返回。我的template是这样写的，然后接口请求放在了mounted里边

<template>
    <section>
        <router-view v-if="lotInfo"></router-view>
    </section>
</template>

<script>
    export default {
        methods: {
			async fetchData () {
				await this.$store.dispatch(aTypes.getLotInfo)
			}
        },
		async mounted (){
			await this.fetchData()

		},
    }
</script>

   子路由的组件模板是这样写的

<template>
    <div  v-if="matchList">
         ....
    </div>
</template>


<script>
    export default{
        computed: {
            lotInfo() {
                return this.$store.state.gyj.lotInfo
            }
        }
        
        methods: {
            async fetchData () {
				let lotid = 62
		
                let selectedIdx = 0
                let expect = ''
                this.lotInfo[this.tab] && this.lotInfo[this.tab].some((item, idx) => {
                	if (item.active) {
                		selectedIdx = idx
                        expect = item.expect
                    }
                })

                await this.$store.dispatch(aTypes.getExpect,{
                    lotid: lotid,
                    expect: expect,
                    playid: '411'
                })
            },
        },
        async mounted() {
            await this.fetchData()
        }
    }

</script>

然后查看network接口调用发现是这样的：

虽然子路由的接口请求参数从父路由那里拿到了，但是父组件里边的接口请求却在子组件后边，明明我都用了v-if来保证lotInfo有值才进行子组件渲染的啊。我们都知道，vue的生命周期是父组件先创建，但是子组件先挂载，也就是说子组件会先执行自己的mounted，即使我在view-router中用了v-if，也没法让父组件先进行接口请求，但是因为vue的服务端渲染是会走created和beforeCreated钩子的，所以要让父组件的接口先请求，只能把接口请求写在beforeMount....

详细记录下父子组件生命周期函数的执行过程：

加载渲染过程：父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

更新过程：父beforeUpdate->子beforeUpdate->子updated->父updated

销毁过程：父beforeDestroy->子beforeDestroy->子destroyed->父destroyed