vue学习笔记-生命周期

最新推荐文章于 2024-09-21 11:29:05 发布

置顶 VickQ

最新推荐文章于 2024-09-21 11:29:05 发布

阅读量151

点赞数

分类专栏： web前端-vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_43069222/article/details/103375565

版权

web前端-vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

vue生命周期

vue生命周期就是vue实例从创建到销毁一系列过程中
在这个过程中会执行的一些函数的自调用，这些函数又称为钩子函数。

下图是vue官方生命周期图示:
在这里插入图片描述
从图中可以看到
当vue实例创建时首先有一个初始化阶段。

在初始化之后所调用函数beforeCreate,此时data和methods以及dom结构都还没有初始化。
在实例创建完成后所调用函数Created，此时data和methods已经可以使用，完成初始化，不过页面dom还未渲染出来

接下来是dom挂载阶段。

dom挂载之前所调用函数beforeMount，此时页面还没有数据，只是一个模板页面
dom挂载之后所调用函数mounted，此时vue实例中的el被新创建的vm.$el替换，并挂载到实例上去之后调用该函数。，此时数据已经渲染到页面模板中，完成dom挂载阶段

数据更新阶段

在数据更新时调用，发生在虚拟 DOM 打补丁之前所调用的函数beforeUpdate，此时页面数据还是之前的数据
在由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后所调用的函数updated，此时数据已经更新完成

最后是销毁阶段（当调用vm.$destroy()时会销毁vue实例）

在实例销毁前所调用的函数beforeDestroy，此时vue实例仍然完全可用
在实例销毁后所调用的函数destroyed，此时会解除绑定vue实例所有东西，所有事件监听器，子实例。

用代码演示vue中的生命周期

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <span>{{msg}}</span>
        <button @click="handleUpdate">更新数据</button>
        <button @click="handleDestroy">销毁</button>
    </div>
</body>
<!-- 引入vue.js -->
<script src="./vue.js"></script>
<script>
    //创建vue实例
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'vue中的数据'
        },
        methods: {
            //更新数据
            handleUpdate() {
                this.msg = "更新后的数据"
            },
            //销毁实例
            handleDestroy() {
                vm.$destroy()
            }
        },
        //在实例初始化之后所调用
        beforeCreate() {
            console.log('实例初始化之后执行的函数beforeCreate')
        },
        //在实例创建完成后所调用
        created() {
            console.log('实例创建完成后执行的函数created')
        },
        //在挂载开始之前被调用
        beforeMount() {
            console.log('在挂载开始之前执行的函数beforeMount')
        },
        //在挂载开始之后被调用
        mounted() {
            console.log('在挂载开始之后执行的函数mounted')
        },
        //在数据更新之前被调用
        beforeUpdate() {
            console.log('在数据更新前执行的函数beforeUpdate')
        },
        //数据更新之后被调用
        updated() {
            console.log('在数据更新后执行的函数updated')
        },
        //销毁实例之前被调用
        beforeDestroy() {
            console.log('销毁实例之前被调用beforeDestroy')
        },
        //销毁实例之前被调用
        destroyed(){
            console.log('销毁实例之前被调用destroyed')
        },
    })


</script>

</html>

页面显示结果如下:

在这里插入图片描述

可以看到beforeCreate、created、beforeMount、mounted被依次调用。

点击更新数据
页面显示结果如下:
在这里插入图片描述

点击销毁
页面显示结果如下:

在这里插入图片描述
尝试再次修改数据

因为vue实例已经销毁，所以页面数据并没有发生变化

常用的钩子函数如下

beforeCreate：在实例初始化之后所调用
created：在实例创建完成后所调用
beforeMount：在挂载开始之前被调用
mounted：el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子
beforeUpdate：数据更新时调用，发生在虚拟DOM打补丁之前
updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子
beforeDestroy：实例销毁之前调用
destroyed：实例销毁后调用