Vue生命周期

最新推荐文章于 2020-10-08 16:26:32 发布

我们的青春不怕疼

最新推荐文章于 2020-10-08 16:26:32 发布

阅读量264

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/surprise_bao/article/details/89576176

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Vue生命周期包括创建、运行和销毁三个阶段，涵盖一系列的生命周期钩子函数。在创建期间有beforeCreate和created等，用于数据和方法的初始化；运行期间有beforeUpdate和updated，处理数据更新和界面渲染；销毁期间的beforeDestroy和destroyed则负责资源清理和解绑。这些钩子函数为开发者提供了关键节点的控制点。

摘要由CSDN通过智能技术生成

Vue生命周期

什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
生命周期钩子 = 生命周期函数 = 生命周期事件
主要的生命周期函数分类：

1.创建期间的生命周期函数：

beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始编译模板
beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示

2.运行期间的生命周期函数：

beforeUpdate：状态更新之前执行此函数，此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点
updated：实例更新完毕之后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！

3.销毁期间的生命周期函数：

beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

<div class="app">
        <input type="button" value="修改" @click="msg='难受'">
        <p class="h3">{{msg}}</p>
    </div>
    <script>
        var vm = new Vue({
            el: '.app',
            data: {
                msg: "好嗨"
            },
            methods: {
                show() {
                    console.log('执行了show方法')
                }
            },
            beforeCreate() { //这里是第一个生命周期函数，表示实例被完全创建出来之前会执行它
                console.log(this.msg)      //undefined
                this.show() //      报错this.show is not a function
                    //注意  在beforeCreate生命周期函数执行的时候，data和methods中的数据都没有初始化


            },
            created() {
                console.log(this.msg)      //好嗨
                this.show()         //执行了show方法
                    //在created中，data和methods都已经被初始化
                    // 如果要调用methods中的方法，或者操作data中的数据，最早只能在created中操作

            },
            beforeMount() {
                //第三个生命周期函数，表示 模板已经在内存中编辑完成，但是尚未把模板渲染到页面上
                console.log(document.getElementsByClassName('h3')[0].innerHTML)       //{{msg}}
                    //在控制台输出的是{{msg}}
                    // 在beforeMount执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串

            },
            mounted() {
                // 第四个生命周期函数，表示内存中的模板，已经真实的挂载到了页面上，用户已经可以看到渲染好的页面
                console.log(document.getElementsByClassName('h3')[0].innerHTML)      //好嗨
                    //注意 mountend 是实例创建期间的最后一个生命周期函数，当执行完mounted就表示，实例已经被完全创建好，此时，如果没有其他操作的话，这个实例，就静静的躺在我们的内存中。
            },



            //接下来是运行中的两个事件
            beforeUpdate() {
                //这时候，表示，我们的界面没有被更新，数据肯定被更新了


                console.log('界面上元素的内容：' + document.getElementsByClassName('h3')[0].innerHTML)     //好嗨

                console.log('data中的数据：' + this.msg)     //难受
                    //当执行beforeUpdate的时候，页面中的显示数据，还是旧的，data里的数据是最新的，页面尚未和data中的数据保存同步。

            },
            updated() {

                console.log('界面上元素的内容：' + document.getElementsByClassName('h3')[0].innerHTML)     //难受

                console.log('data中的数据：' + this.msg)      //难受
                    //updata事件执行的时候，页面和data数据已经保持同步了，都是最新的。
            }
        })
    </script>