vue的声明周期 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="test">
    <button @click="destoryVm">destory vue</button>

    <p v-show="isShow">青木传奇</p>
</div>

<script src="../js/vue.js"></script>
<script>

    new Vue({
        el:'#test',
        data:{
            isShow:true
        },
        //1.初始化阶段
        beforeCreate(){
          console.log('beforeCreate')
        },
        created(){
            console.log('Create')
        },
        mounted(){ //初始化显示之后立即调用
            console.log('mounted')
            this.intervalId = setInterval(()=>{
                this.isShow=!this.isShow
            },1000)
        },
        //2.更新阶段
        beforeUpdate(){
            console.log('beforeUpdate')
        },
        updated(){
            console.log('updated')
        },
        beforeDestory(){//死亡之前调用（1次）
            //清楚定时器
            clearInterval(this.intervalId)
        },
        destory(){
        },
        methods:{
            destoryVm(){
                //干掉vm
                this.$destroy()
            }
        }
    })

</script>
</body>
</html>

posted @ 2021-07-12 23:46  King-DA  阅读(33)  评论(0)    收藏  举报