Vue生命周期详解——图示&代码

最新推荐文章于 2022-11-26 14:54:23 发布

cellinlab

最新推荐文章于 2022-11-26 14:54:23 发布

阅读量187

点赞数

分类专栏：前端基础 Vue 文章标签： Vue生命周期 Vue Vue入门 Vue2.0 Vue基础

本文链接：https://blog.csdn.net/funkstill/article/details/88951277

版权

前端基础同时被 2 个专栏收录

167 篇文章 0 订阅

订阅专栏

Vue

13 篇文章 0 订阅

订阅专栏

生命周期图示

生命周期实例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>生命周期</title>
    </head>
    <body>
        <div id="app">{{a}}</div>
        <script src="../Vue.js"></script>
        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    a:1
                },
                beforeCreate:function(){
                    console.log("beforeCreated "+"el:"+this.$el+" data:"+this.$data+" a:"+this.a);
                },
                created:function(){
                    console.log("created "+"el:"+this.$el+" data:"+this.$data+" a:"+this.a);
                },
                beforeMount:function(){
                    console.log("beforeMount "+"el:"+this.$el+" data:"+this.$data+" a:"+this.a);
                },
                mounted:function(){
                    console.log("mounted "+"el:"+this.$el+" data:"+this.$data+" a:"+this.a);
                },
                beforeUpdate:function(){
                    console.log("beforeUpdate "+"el:"+this.$el+" data:"+this.$data+" a:"+this.a);
                },
                updated:function(){
                    console.log("updated "+"el:"+this.$el+" data:"+this.$data+" a:"+this.a);
                },
                beforeDestroy:function(){
                    console.log("beforeDestroy "+"el:"+this.$el+" data:"+this.$data+" a:"+this.a);
                },
                destroyed:function(){
                    console.log("destroyed "+"el:"+this.$el+" data:"+this.$data+" a:"+this.a);
                }
            })
            vm.$data.a = 2018;
            setTimeout(function(){
                vm.$data.a = 2019;
            },3000)
            //vm.$destroy();
            setTimeout(function(){
                vm.$destroy()
            },3000);
        </script>
    </body>
</html>