VUE生命周期深入理解

一 基础的生命周期理解

上面的图片详细解释了生命周期钩子里应该做哪些事情,诸位可以自行取舍,下面我们结合案例总结下:

1. created钩子: 发ajax请求
2. mounted钩子: 也可以发送ajax请求,更多的是操作DOM元素
3. updated钩子: 可以用来监听路由变化
4. beforeDestroy钩子: 记录当前页面的一些数据,清楚页面滚动事件
5. destroy钩子: 清楚定时器等

二 深入理解生命周期

上面的内容都是单个VUE页面或则组件的对应的生命周期,但是如果一个页面里拥有多个相同生命周期钩子呢?

比如:

对于上面的问题,一个页面有相当于三个组件(父页面也可以看做一个组件),每个组件都有自己的生命周期钩子,那么其中具体的生命周期执行顺序又是怎样的呢,我们可以代码验证:

代码:

<template>
    <div>
        我是父组件
        <son></son>
    </div>
</template>

<script>
import son from "./components/son.vue"
export default {
    components: {
        son
    },
    data(){
        return {}
    },
    beforeCreate(){
        console.log("我是父组件的----beforeCreate钩子------")
    },
    created(){
        console.log("我是父组件的----created钩子------")
    },
    beforeMount(){
        console.log("我是父组件的----beforeMount钩子------")
    },
    mounted(){
        console.log("我是父组件的----mounted钩子------")
    },
    beforeUpdate(){
        console.log("我是父组件的----beforeUpdate钩子------")
    },
    update(){
        console.log("我是父组件的----update钩子------")
    },
    beforeDestroy(){
        console.log("我是父组件的----beforeDestroy钩子------")
    },
    destroyed(){
        console.log("我是父组件的----destroy钩子------")
    }
}
</script>

<style>

</style>

从上面结果我们可以看到,我们最应该注意到的是:父组件的mounted钩子是最后执行的

好了,很多人说我们为什么要关注多重组件嵌套时的生命周期执行情况,其实很简单,这种嵌套的场景很多;而且,很多开发者喜欢在一个组件里面做好所有的事情,比如:

在created钩子里发送请求渲染数据,这样下次使用的时候是很方便的.但是这也带来了一个问题,如果这个组件使用了两次,那么发送请求也会执行两次,这样肯定是不被认可的,那我们应该怎样避免他呢?

解决办法: 将发请求的方法放到父页面来,获取到数据后在传递到子组件里