Vue_生命周期

最新推荐文章于 2024-09-10 20:30:17 发布

Cecilia58

最新推荐文章于 2024-09-10 20:30:17 发布

阅读量80

点赞数

分类专栏： vue 文章标签：前端

本文链接：https://blog.csdn.net/Cecilia58/article/details/115408316

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

三阶段

1，初始化显示

2，更新

3，死亡

vue对象的生命周期1)．初始化显示
beforecreate()

created()

beforeMount( )

mounted( )

2)．更新显示: this.xxx = value

beforeUpdate()

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

beforeDestory()

destoryed()

2．常用的生命周期方法

mounted():发送ajax请求，启动定时器等异步任务
beforeDestory ():做收尾工作，如:清除定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test">
        <button @click="destoryVM">destory vm </button>
        <p v-show="isShow">教育</p>
    </div>
</body>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">
new Vue({
    el:"#test",
    data:{
        isShow :true
    },
    mounted(){// 初始化显示后立即调用 
        this.interzz=setInterval(() => {   // 箭头函数中的this指向是固定不变的，一直指向的是定义函数的环境
        this.isShow = !this.isShow
        }, 1000);
    },
    beforeDestroy(){  // 死亡之前  调用一次
        clearInterval(this.interzz) //清除定时器
    },
    methods:{
        destoryVM(){
            this.$destroy()
        }
    }
})
</script>
</html>