码迷,mamicode.com
首页 > 其他好文 > 详细

VUE:生命周期

时间:2018-11-14 23:12:58      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:图片   png   doc   ...   meta   阶段   请求   charset   head   

VUE:生命周期

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            1.vue对象的生命周期
                1)初始化显示
                    * beforeCreate()
                    * created()
                    * beforeMount()
                    * mounted()
                2)更新状态:this.xxx=value
                    * beforeUpdate()
                    * updated()
                3)销毁Vue实例:vm.$destroy()
                    * beforeDestroy()
                    * destroyed()
            2.常用的生命周期方法
                mounted():发送ajax请求,启动定时器等异步任务
                beforeDestory():做收尾工作,如:清除定时器
        -->
        
        <div id="test">
            <button @click="destoryVM">destory vm</button>
            <p v-show="isShow">涛先森的VUE自学之路</p>
        </div>
        
        <script type="text/javascript" src="../js/vue.js" ></script>
        <script>
            new Vue({
                el:#test,
                data:{
                    isShow: true
                },
                
                //1.----------初始化阶段----------------
                beforeCreate(){
                    console.log(正在调用beforeCreate方法...);
                },
                
                created(){
                    console.log(正在调用created方法...);
                },
                
                beforeMount(){
                    console.log(正在调用beforeMount方法...);
                },
                
                //初始化显示之后立即调用(1次)
                mounted(){
                    console.log(正在调用mountd方法...);
                    this.intervalId=setInterval(()=>{
                        console.log(-------);
                        this.isShow =! this.isShow
                    },1000)
                },
                
                //2.--------------更新阶段-----------------
                beforeUpadte(){
                    console.log(正在调用beforeUpate方法...);
                },
                
                updated(){
                    console.log(正在调用updated方法...);
                },
                
                //生命周期回调函数(1次),死亡之后的为destoryed
                beforeDestroy(){
                    console.log(正在调用beforeDestroy方法...);
                    //清楚定时器,避免内存泄漏
                    clearInterval(this.intervalId)
                },
                
                //3.------------------死亡阶段----------------
                destroyed(){
                    console.log(正在调用destroyed方法...);
                },
                
                methods:{
                    destoryVM(){
                        //干掉
                        this.$destroy()
                    }
                }
            })
        </script>
    </body>
</html>

 

生命周期图

技术分享图片

 

VUE:生命周期

标签:图片   png   doc   ...   meta   阶段   请求   charset   head   

原文地址:https://www.cnblogs.com/it-taosir/p/9960835.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!