VUE生命周期

生命周期三个阶段:初始化阶段,更新阶段,死亡阶段
生命周期回调函数:mounted 做异步任务,发送ajax请求, beforeDestory 做收尾工作清除定时器等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="demo">
        <button @click="destoryVM">destory vm</button>
        <p v-show="isShow">沈聪小仙女</p>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    new Vue({
        el:'#demo',
        data:{
            isShow:true
        },
        // 1.初始化阶段
        beforeCreate(){
          console.log('beforeCreate()');
        },
        created(){
            console.log('created()');
        },
        beforeMount(){
            console.log('beforeMounted()');
        },
        mounted(){ //初始化显示之后立即调用1次
            this.intervalId = setInterval(() => {
                console.log('1');
                this.isShow = !this.isShow; //更新数据
            },1000)
        },
        // 2.更新阶段
        beforeUpdate(){
            console.log('beforeUpdate()');
        },
        updated(){
            console.log('update()');
        },
        //3.死亡阶段
        beforeDestroy(){ //死亡之前调用1次
          //清除定时器
          clearInterval(this.intervalId);
        },
        methods:{
            destoryVM(){
                //干掉VM
                this.$destroy();
            }
        }
    })
</script>
</html>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • beforeCreate 1 .实例初始化之后2 .this指向创建的实例3 .数据观测,event/watche...
    skoll阅读 5,071评论 1 1
  • 实例生命周期: beforeCreate:在实例初始化之后,数据观测data observer(props、dat...
    隔壁老王z阅读 37,146评论 0 29
  • 生命周期函数 生命周期函数就是 Vue 实例在某一个时间点会自动执行的函数 简单来说就是,钩子(生命周期函数)就好...
    astak3阅读 1,634评论 0 0
  • Vue实例有一个完整的生命周期,也就是说从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系...
    Sanyekui阅读 6,365评论 1 2
  • 生命周期的阶段: beforeCreate: 在实例初始化之后,数据观测(data observer) 和 eve...
    枸杞辣条阅读 9,977评论 0 4

友情链接更多精彩内容