Vue的生命周期

最新推荐文章于 2022-04-01 14:21:07 发布

HashFlag

最新推荐文章于 2022-04-01 14:21:07 发布

阅读量90

点赞数

分类专栏： python

本文链接：https://blog.csdn.net/sinat_41672927/article/details/105593846

版权

python 专栏收录该内容

89 篇文章 0 订阅

订阅专栏

Vue的生命周期

Vue生命周期的钩子函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
    {{name}}
</div>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            name:"eric"
        },
        methods:{
            init:function(){
                console.log(123)
            }
        },
        beforeCreate(){
            console.group("BeforeCreate");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        created(){
            console.group("Created");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        beforeMount(){
            console.group("BeforeMount");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        mounted(){
            console.group("Mounted");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        beforeUpdate(){
            console.group("BeforeUpdate");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        updated(){
            console.group("Updated");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        beforeDestroy(){
            console.group("BeforeDestroy");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        destroyed(){
            console.group("Destroyed");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        }
    })
</script>
</body>
</html>

Vue的生命周期的钩子 LifeCycle hooks

数据监听之前：beforeCreate()；

监听数据变化：created()；

虚拟dom加载完成前：beforeMount()；

页面真实加载完成后：mounted()；

数据改变前执行的函数：beforeUpdate()；

数据改变后执行的函数：updated()；

Vue实例销毁前：beforeDestroy()；

Vue实例销毁后：destroyed()s

HashFlag

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的生命周期

Vue的生命周期Vue生命周期的钩子函数：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></scrip...
复制链接

扫一扫