30分钟学完Vue——生命周期

生命周期函数

    含义:每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。

    那么这些过程中，具体vue做了些啥，我们往下来了解一下。

    为了方便记忆，我们可以将他们分类：

创建时：beforeCreate 组件创建之前、created 组件创建完成

渲染时：beforeMount 组件渲染之前、mounted 组件渲染完成

更新时：beforeUpdate 组件更新之前、updated 组件更新之后

卸载时：beforeUnmount 组件卸载之前、unmounted 组件卸载之后

语法模板:直接在export default {~}之中使用

<script>
export default {
    name: " ",
    data(){	},
    beforeCreate(){
        alert("组件创建之前调用的时beforeCreate函数")
    },
    created(){
        alert("组件创建完成调用的时Created函数")
    },
    beforeMount(){
        alert("组件渲染之前调用的时beforeMount函数")
    },
    mounted(){
        alert("组件渲染完成调用的时mounte函数")
    },
    beforeUpdate(){
         alert("组件更新之前调用的时beforeUpdate函数")
    },
    updated(){
         alert("组件更新之后调用的时updated函数")
    },
    beforeUnmount(){
         alert("组件卸载之前调用的时beforeUnmount函数")
    },
    unmounted(){
         alert("组件卸载之后调用的时unmounted函数")
    },
}
</script>

以下是案例完整代码:

<template>
    <div>
        <h1>vue生命周期</h1>
    </div>
</template>

<script>
export default {
    name: "MyComponent",
    data(){
        return{
            message:" "
        }
    },
    beforeCreate(){
        alert("组件创建之前调用的时beforeCreate函数")
    },
    created(){
        alert("组件创建完成调用的时Created函数")
    },
    beforeMount(){
        alert("组件渲染之前调用的时beforeMount函数")
    },
    mounted(){
        alert("组件渲染完成调用的时mounte函数")
    },
    beforeUpdate(){
         alert("组件更新之前调用的时beforeUpdate函数")
    },
    updated(){
         alert("组件更新之后调用的时updated函数")
    },
    beforeUnmount(){
         alert("组件卸载之前调用的时beforeUnmount函数")
    },
    unmounted(){
         alert("组件卸载之后调用的时unmounted函数")
    },
}
</script>

<style>
    body{
        background-color:azure
    }
    div{
        width:200px;
        height:200px;
        margin:auto;
    }
</style>

​     一点开运行,我们会发现页面弹出了下面这个弹框,说明执行了beforeCreate函数,点击确定后发现又有另一个弹窗是Created函数,后面也是一样分别是beforeMount函数和mounte函数.一共是四个函数.

​     他们的弹窗顺序和我们源码中的编写顺序无关,而是是一种固定的流程形式,可以仔细想一想,当运行一个组件时,是不是先创建组件,然后创建完毕.创建完毕之后就是开始渲染组件,到最后渲染完毕,流程顺序是不是和上面四个函数所表示的功能意义相关,所以这就是Vue生命周期的顺序.

​     那么我们又要疑问了,为什么我们明明写了有八个生命周期函数,但是最后却又4个执行了呢? 这是因为另外其他四生命周期函数更新组件和卸载组件时才会自动执行,而我们的源代码中没有涉及到这两类的内容,所以就不会执行那4条函数.

​     Vue生命周期函数的基础知识就学到这里了,相对来所还是比较简单的,后面我们做到别的项目的时候,再涉及到了其他的生命周期函数,到时候再慢慢聊,总之Vue生命周期函数就只有这么多啦!

    *本篇文章为学习笔记,可能存在一些表述不当或者错误内容,如有发现请在评论区留言或者私信我!
    我一定会及时更正!也希望能与大家一同学习进步,为我们的未来奋斗努力冲!!!