vue 实例的生命周期实现过程

最新推荐文章于 2023-09-14 14:35:14 发布

筱语悠里

最新推荐文章于 2023-09-14 14:35:14 发布

阅读量465

点赞数

分类专栏：前端文章标签： vue javascript

本文链接：https://blog.csdn.net/sinat_37168842/article/details/105709238

版权

前端专栏收录该内容

31 篇文章 0 订阅

订阅专栏

一什么是生命周期

 从vue实例的创建、运行、到销毁的时间，总是伴随着各种各样的的事件，这些事件，统称为生命周期

生命周期钩子：就是生命周期事件的别名而已
生命周期钩子=生命周期函数=生命周期事件

二生命周期的分类

创建期间的生命周期函数：
- beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
- created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始编译模板
- beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
- mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
运行期间的生命周期函数：
- beforeUpdate：状态更新之前执行此函数，此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点
- updated：实例更新完毕之后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！
销毁期间的生命周期函数：
- beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
- destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。.

代码演示生命周期函数

<body>
    <div id="app">
        <input type="button" value="修改msg" @click="msg='No'">
        <h3 id="h3">{{ msg }}</h3>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'ok'
            },
            methods: {
                show() {
                    console.log("执行了show（）")
                }
            },
            beforecreate() {//第一个生命周期函数
                console.log(this.msg);
                this.show();
                //注意：在beforcrate生命周期函数执行时，data 和methods都未初始化。
            },
            created() {第二个生命周期函数
                console.log(this.msg);
                this.show();
                //data he methods都已经被初始化，如果要调用methods中的方法或者操作data中的数据
                //最早在created中操作
            },
            beforeMount() {//第三个生命周期函数，表示模板已经编译完成，但是尚未把模板渲染到页面中去
                console.log(document.getElementById("h3").innerText);//{{msg}}
                //页面中的元素还没有被真正替换过来，只是模板字符串。
            },
            mounted() {
                console.log(document.getElementById("h3").innerText);
                //mounted是实例创建的最后一个生命周期函数，
                //当执行完mounted就表示实例已创建完毕
                //实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动
            },

            //组件运行阶段的生命周期函数
            //只有数据发生改变才会执行，这两事件会根据data数据的改变有选择性的触发0次到许多次
            beforeUpdate() {//表示我们的界面还没被更新，数据肯定被更新
                console.log(document.getElementById("h3").innerText); //ok
                console.log(this.msg); //no
                //数据已被更新，页面上的数据还是旧的为ok
            },
            updated() {
                console.log(document.getElementById("h3").innerText); //no
                console.log(this.msg); //no
                //updata执行时页面和data中的数据以保持同步。
            }
        });
    </script>
</body>

运行结果展示

keep-alive的生命周期

activated和deactivated两个生命周期函数

activated：当组件激活时，钩子触发的顺序是created->mounted->activated
deactivated: 组件停用时会触发deactivated，当再次前进或者后退的时候只触发activated
参考博文https://www.jianshu.com/p/0272c0fe9392

筱语悠里

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 实例的生命周期实现过程

一什么是生命周期从vue实例的创建、运行、到销毁的时间，总是伴随着各种各样的的事件，这些事件，统称为生命周期生命周期钩子：就是生命周期事件的别名而已生命周期钩子=生命周期函数=生命周期事件二生命周期的分类创建期间的生命周期函数：beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性created：实例已经在内存中创...
复制链接

扫一扫