萌新VueDay4——生命周期的初步了解

生命周期图示

入门简单了解生命周期
可分为三大阶段：初始化显示、更新显示、死亡
简单根据例子了解：

<div id="test">
    <button @click="destoryVM">销毁</button>
    <p v-show="isshow">王大毛</p>
</div>

<script src="../js/vue.js"></script>
<script>
    const vm = new Vue({
        el:'#test',
        data:{
            isshow:true
        },
        //初始化
        mounted(){
            //定时器,1000毫毛更改一次
            //timer去接受定时器的返回值
            this.timer=setInterval(()=>{

                this.isshow=!this.isshow
            },1000)
        },
        //死亡之前
        beforeDestroy(){
            //清除定时器
            clearInterval(this.timer)
        },
        methods:{
       		// 死亡
            destoryVM(){
                //销毁vm（对象）
                this.$destroy()
            }


        }
    })

</script>