二、Vue实例生命周期

最新推荐文章于 2024-04-18 21:51:51 发布

啤酒黑咖啡

最新推荐文章于 2024-04-18 21:51:51 发布

阅读量99

点赞数

分类专栏： Vue2.*学习笔记文章标签： vue 生命周期

本文链接：https://blog.csdn.net/qq_28238383/article/details/81154588

版权

Vue2.*学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、生命周期图示

　　以下是官方给出的Vue实例的生命周期图示，图中展示了11个生命周期钩子(函数)中的8个
这里写图片描述

二、生命周期函数

　　生命周期函数是指vue实例在某一个时间点会自动执行的函数

1.beforeCreate&created

　　在实例初始化时间以及生命周期后，依赖注入初始化之前会先调用beforeCreate函数，在依赖注入初始化之后，即实例基本创建之后会调用created函数

2.beforeMount&mounted

　　在实例与挂载点结合之前会调用beforeMount函数，在结合之后会调用mounted函数

3.beforeUpdate&updated

　　在实例数据发生变化进行渲染之前，会调用beforeUpdate函数，渲染之后会调用updated函数

4.beforeDestroy&destroyed

　　在实例摧毁之前会调用beforeDestroy函数，摧毁之后会调用destroyed函数

<!DOCTYPE html>
<html>
<head>
    <title>vue</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">{{content}}</div>
    <script>
        var app = new Vue({
            el: '#root',
            data: {
                content: 'hello world'
            },
            beforeCreate: function () {
                console.log("beforeCreate");
            },
            created: function () {
                console.log("created");
            },
            beforeMount: function () {
                console.log(this.$el);
            },
            mounted: function () {
                console.log(this.$el);
            },
            beforeUpdate: function () {
                console.log("beforeUpdate");
            },
            updated: function () {
                console.log("updated");
            },
            beforeDestroy: function () {
                console.log("beforeDestroy");
            },
            destroyed: function () {
                console.log("destroyed");
            }
        });
    </script>
</body>
</html>

　　通过在控制台中输入app.$data.content = "..."或者app.content = "…"来改变数据可以调用beforeUpdate和update函数，输入app.$destroy()摧毁实例可以调用beforeDestroy和destroyed函数
　　除了上述8个vue实例生命周期钩子外，还有activated、deactivated、errorCaptured三个生命周期钩子，有兴趣的可以自行查看官方文档

啤酒黑咖啡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
二、Vue实例生命周期

一、生命周期图示　　以下是官方给出的Vue实例的生命周期图示，图中展示了11个生命周期钩子(函数)中的8个二、生命周期函数　　生命周期函数是指vue实例在某一个时间点会自动执行的函数1.beforeCreate&amp;amp;created　　在实例初始化时间以及生命周期后，依赖注入初始化之前会先调用beforeCreate 函数，在依赖注入初始化之后，即实例基本创建之...
复制链接

扫一扫

专栏目录