（三）Vue生命周期

最新推荐文章于 2025-09-13 09:06:35 发布

转载最新推荐文章于 2025-09-13 09:06:35 发布 · 57 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/love-life-insist/p/10077106.html

文章标签：

#javascript #ViewUI

本文详细解析了Vue.js中组件的生命周期，包括初始化显示、更新状态及销毁过程中的各个阶段方法。重点介绍了created()和mounted()方法适合进行异步操作，如发送AJAX请求和启动定时器；beforeDestroy()则用于清理资源，如清除定时器。

1. vue对象的生命周期

1). 初始化显示

* beforeCreate()

* created()

* beforeMount()

* mounted()

2). 更新状态

* beforeUpdate()

* updated()

3). 销毁vue实例: vm.$destory()

* beforeDestory()

* destoryed()

2. 常用的生命周期方法

created()/mounted(): 发送ajax请求, 启动定时器等异步任务

beforeDestory(): 做收尾工作, 如: 清除定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>
</head>
<body>
<!--
1. vue对象的生命周期
  1). 初始化显示
    * beforeCreate()
    * created()
    * beforeMount()
    * mounted()
  2). 更新状态
    * beforeUpdate()
    * updated()
  3). 销毁vue实例: vm.$destory()
    * beforeDestory()
    * destoryed()
2. 常用的生命周期方法
  created()/mounted(): 发送ajax请求, 启动定时器等异步任务
  beforeDestory(): 做收尾工作, 如: 清除定时器
-->

<div id="test">
    <button @click="destroyVue">destory vue</button>
    <p v-if="isShow">123456</p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#test',
        data: {
            isShow: true
        },
        mounted(){
            //页面渲染的时候，
            this.IntervalId = setInterval(()=>{
                console.log("-----");
                this.isShow = !this.isShow;
            },500)
        },
        beforeDestroy(){
                //销毁之前清除定时器
            clearInterval(this.IntervalId)
        },
        methods:{
            destroyVue(){
                this.$destroy();//销毁VM对象
            }
        }

    })


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

转载于:https://www.cnblogs.com/love-life-insist/p/10077106.html