【前端学习之路】——Vue生命周期

最新推荐文章于 2023-11-05 16:25:23 发布

JTz666666

最新推荐文章于 2023-11-05 16:25:23 发布

阅读量271

点赞数 1

分类专栏：前端文章标签： vue javascript html5 html vue.js

本文链接：https://blog.csdn.net/jtz666666/article/details/104114576

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

生命周期：其实就是一个组件从创建到销毁的这个过程叫做生命周期（钩子函数）

其实从官网的生命周期的图例就可以看出来，生命周期分八个阶段
分别为：beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，beforeDestory，destroyed

接下来，我们就一个阶段一个阶段的尝试，实验并且理解。

在开始之前，我们需要先搭建一个实例的模板出来：

<body>
    <div id="app">
        <h3 id="h3">{{msg}}</h3>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                msg:"aaa"
            },
            methods:{
                show(){
                    console.log("bbb")
                }
            }
        })
    </script>

</body>

这时候页面上显示的是：
在这里插入图片描述

1、创建前（beforeCreate）

这是我们遇到的第一个生命周期函数，它表示的是在实例创建出来之前，会执行它，此时，还没有data和methods属性

var vm=new Vue({
            el:"#app",
            data:{
                msg:"aaa"
            },
            methods:{
                show(){
                    console.log("bbb")
                }
            },
            //这是我们遇到的第一个生命周期函数
            //表示实例在创建出来之前，会执行它，此时，还没有data和methods属性
            beforeCreate(){
                //在beforeCreate生命周期函数执行的时候，data和methods都没被初始化
                //当我们在页面上想拿到自己定义的msg的时候，这时候页面现实的是undefind
                console.log(this.msg)
                
            }
        })

页面上显示：
在这里插入图片描述

2、创建后(created)

这是我们遇到的第二个生命周期函数，在created里，此时data和methods都被创建好了，但仍然不能获取Dom元素

//这是我们遇到的第二个生命周期函数
            created(){
                //在created里，此时data和methods都被创建好了，但仍然不能获取Dom元素
                console.log(this.msg)   //aaa
                this.show()  //bbb
            },

此时，我们看一下我们页面上显示的内容吧
在这里插入图片描述
此时，数据data已经初始化完成，方法也已经可以调用，但是DOM未渲染。

3、载入前（beforeMount）

表示模板已经在内存中编译完成了，但是还没把模板渲染到页面中去，在执行beforeMount的时候，页面中的元素还没有真正被替换过来，只是之前写的一些模板字符串

 //这是我们遇到的第三个生命周期函数（载入前）
            //表示模板已经在内存中编译完成了，但是还没把模板渲染到页面中去
            beforeMount(){
                //在执行beforeMount的时候，页面中的元素还没有真正被替换过来，只是之前写的一些模板字符串
                //让我们来获取一下当前页面上的元素吧
                console.log(document.getElementById("h3").innerText)
            },

此时，页面上显示着
在这里插入图片描述
并没有替换到我们的要显示的aaa

4、载入后(mounted)

这是我们遇到的第四个生命周期函数，这时候拿到的就是页面中的最新的数据，注意：mounted是实例创建期间的最后一个生命周期函数

			mounted(){
                //此时我们再来获取一下页面上的元素吧
                console.log(document.getElementById("h3").innerText)
            },

此时页面上打印出来的是：
在这里插入图片描述
注意：mounted是实例创建期间的最后一个生命周期函数，当执行完mounted就表示实例已经被完全创建好了，如果没有其它操作的话，这个实例，就静静的躺在我们的内存中，一动不动

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

5、更新前（beforeUpdate）

当执行beforeUpdate的时候，页面中的显示数据，还是旧的，此时data数据是最新的，页面尚未和最新的数据保持同步

//接下来是运行中的两个事件
			//这时候表示我们的界面还没有被更新
			//【数据被更新了吗？】数据肯定被更新了
            beforeUpdate(){
                //获取下当前页面上显示的是
                console.log("当前显示的是"+document.getElementById("h3").innerText)
                //当前的数据是：
                console.log("当前数据是："+this.msg)
            },

当执行这个的时候，我们需要更改页面上的数据，当你触发几次他就会执行几次，最少0次（数据从没被改变），最多无数次。

此时打印出来的是，此时，我们给那个按钮绑定了一个点击事件，只要一点击那个按钮，页面上的数据就会更改一下，原来是aaa，现在改为了bbb，但是打印出来的可不是这样的
在这里插入图片描述

6、更新后（updated）

此时，页面和data数据都保持同步了，都是最新的。

			updated(){
                //获取下当前页面上显示的是
                console.log("当前显示的是："+document.getElementById("h3").innerText)
                //当前的数据是：
                console.log("当前数据是："+this.msg)
            },

此时，当我们点击按钮时，页面上打印的是在这里插入图片描述
//当前页面上的数据是bbb，msg数据也是bbb

7、销毁前（beforeDestroy）

当执行beforeDestory钩子函数的时候，vue实例，就已经从运行阶段进入到销毁阶段，实例身上的所有的data和所有的methods以及过滤器，都处于可用的状态，但此时，还没有真正执行到销毁的过程。

8、销毁后（destroyed）

当执行到destroyed函数的时候，组件已经被完全销毁了，此时，组件中所有的数据，方法，指令，还有过滤器，所有的东西都已经不可以用了~

下面是我自己在官网图上总结下来的：

在这里插入图片描述

此篇文章笔记纯是个人总结，如有说错，欢迎在评论区或者私信交流，一起学习进步。

JTz666666

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【前端学习之路】——Vue生命周期

生命周期：一个组件从创建到销毁的这个过程叫做生命周期（钩子函数）其实从官网的生命周期的图例就可以看出来，生命周期分八个阶段分别为：beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，beforeDestory，destroyed接下来，我们就一个阶段一个阶段的尝试，实验并且理解。在开始之前，我们需要先搭建一个实例的模板...
复制链接

扫一扫