（九）vue生命周期（重点）

最新推荐文章于 2024-03-08 13:19:26 发布

吱吱不倦小子

最新推荐文章于 2024-03-08 13:19:26 发布

阅读量431

点赞数 2

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

本文链接：https://blog.csdn.net/u013109501/article/details/114296308

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一，vue生命周期图

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>09_Vue实例_生命周期</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="destoryVM">destroy vm</button>
    <p v-show="isShow">尚硅谷it教育</p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:'#test',
        data:{
            isShow:true
        },
        //1). 初始化显示
        beforeCreate() {
            console.log('beforeCreate()')
        },

        created() {
            console.log('created()')
        },

        beforeMount() {
            console.log('beforeMount()')
        },
        mounted(){
            //初始化显示后，立即调用（1次）
            this.interval=setInterval(()=> {
                //内存泄露，需要清除定时器
                console.log('--------')
                this.isShow=!this.isShow//更新数据
            },1000)
        },
        //2). 更新状态
        beforeUpdate() {
            console.log('beforeUpdate()')
        },
        updated () {
            console.log('updated()')
        },
        //销毁vue实例
        beforeDestroy(){//死亡之前调用（1次）
            //清除定时器
            clearInterval(this.interval)
        },
        methods:{
            destoryVM(){
                //干掉VM
                this.$destroy()
            }
        }
    });
</script>
</body>
</html>

吱吱不倦小子

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
（九）vue生命周期（重点）

一，vue生命周期图vue对象的生命周期 1). 初始化显示 * beforeCreate() * created() * beforeMount() * mounted() 2). 更新状态 * beforeUpdate() * updated() 3). 销毁vue实例: vm.$destory() * beforeDestory() * destoryed()2. 常用的生命周期方法 created()/mount
复制链接

扫一扫