Vue生命周期

最新推荐文章于 2024-09-24 08:43:56 发布

聪明的小呆呆

最新推荐文章于 2024-09-24 08:43:56 发布

阅读量94

点赞数

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

本文链接：https://blog.csdn.net/lzh623015455/article/details/105656153

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.首先来看看Vue生命周期的流程图

在这里插入图片描述

2. 代码演示

<!DOCTYPE html>
<html lang="en">

<!--
--- 时间：2020.4.21---
--- 作者：lzh      ---
--- 介绍：通过简单的案例了解Vue的生命周期----
---
-->
<head>
    <meta charset="UTF-8">
    <title>Vue生命周期</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
</head>
<body>
    <div id="test3_1">
        <button @click="destory">destory Vm</button>
        <p>{{message1}}</p>
        <p v-show="isShow">{{message2}}</p>
        <p>{{message3}}</p>
    </div>


    <script type="text/javascript" >
        new Vue({
            el:'#test3_1',
            data:{
                message1:'第一条数据',
                message2:'第二条数据',
                message3:'第三条数据',
                isShow: true,
            },

            //1、第一阶段：初始化  执行一次
            //初始化之前
            beforecreate(){
                console.log("初始化之前")
            },

            //初始化之后
            created(){
                console.log("初始化完成")
            },

            //挂载之前
            beforeMount(){
                console.log("挂载之前")
            },

            //挂载之后
            mounted(){//初始化显示后立即调用
                this.intervalId = setInterval(()=> {//设置定时器，其中()=>为回调函数，与function()一样
                    console.log("-------------------")//控制台输出
                    this.isShow = !this.isShow;
                },1000)//设置定时器时间为1000毫秒
            },

            //2、第二阶段：数据变更  执行多次
            //更新之前
            beforeUpdate(){
                console.log("更新之前")
            },

            //更新之后
            updated(){
                console.log("更新之后")
            },

            //3、第三阶段：销毁程序 执行一次
            //销毁之前
            beforeDestroy(){
                //清除定时器
                console.log("销毁之前")
                clearInterval(this.intervalId);
            },


            //销毁之后
            destroyed(){
                //清除定时器
                console.log("销毁之后")
            },




            //方法集合
            methods :{
                destory(){//销毁vm
                    this.$destroy();//注意这个方法只能停止程序，而不能清除定时器，即上面的控制台输出内容不会停止。
                                        //因此要用到一个函数——beforeDestroy()
                },
            }

        })
    </script>
</body>
</html>