复习笔记（七）Vue生命周期

最新推荐文章于 2024-06-15 14:41:39 发布

9 216

最新推荐文章于 2024-06-15 14:41:39 发布

阅读量352

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/YJYH_/article/details/122612348

版权

文章目录

一、引出生命周期
二、生命周期
2.1挂载流程
2.2更新流程
- 2.2.1 beforeUpdate
- 2.2.2 updated
2.3销毁流程
- 2.3.1 beforeDestroy和destroyed
- 2.3.2 渐变案例
总结

一、引出生命周期

生命周期：

又名：生命周期回调函数、生命周期函数、生命周期钩子。
是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
生命周期函数中的this指向是vm或组件实例对象。

二、生命周期

案例：
在这里插入图片描述

2.1挂载流程

2.1.1 beforeCreate

在这里插入图片描述

2.1.2 created

在这里插入图片描述

2.1.3 beforeMount

第一条路线：
在这里插入图片描述

在这里插入图片描述
第二条路线：

2.1.4 mounted

在这里插入图片描述

2.2更新流程

2.2.1 beforeUpdate

在这里插入图片描述

2.2.2 updated

在这里插入图片描述

2.3销毁流程

在这里插入图片描述

2.3.1 beforeDestroy和destroyed

在这里插入图片描述

在这里插入图片描述
以上代码如下：

<!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>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h1>现在n的值为：{{n}}</h1>
        <button @click="add">点一下n+1</button>
        <button @click="bye">点我销毁vm</button>
    </div>
</body>
<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        // template:`<div>
        //                 <h1>现在n的值为：{{n}}</h1>
        //                 <button @click="add">点一下n+1</button>
        //         </div>`,
        data: {
            n: 1
        },
        methods: {
            add() {
                console.log('add');
                this.n++;
            },
            bye() {
                console.log('bye');
                this.$destroy();
            }
        },
        watch: {
            n() {
                console.log('n改变了');
            }
        },
        beforeCreate() {
            console.log('beforeCreate');
        },
        created() {
            console.log('created');
        },
        beforeMount() {
            console.log('beforeMount');
        },
        mounted() {
            console.log('mounted');
        },
        beforeUpdate() {
            console.log('beforeUpdate');
        },
        updated() {
            console.log('updated');
            //console.log("此时n的值为："+this.n);
            //debugger;
        },
        beforeDestroy() {
            console.log('beforeDestroy,获取n值'+this.n);
            this.add();
        },
        destroyed() {
            console.log('destroyed');
        },
    })

</script>

</html>

2.3.2 渐变案例

<!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>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
       <h1 :style="{opacity}">渐变效果</h1>
       <button @click="stop">点我停止变换</button>
    </div>
</body>
<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            opacity: 1
        },
        methods: {
            stop(){
                this.$destroy();
            }
        },
        mounted() {
            console.log('mounted');
            this.timer = setInterval(()=>{
                this.opacity -=0.01;
                if(this.opacity <= 0) this.opacity = 1;
            },16)
        },
        beforeDestroy() {
            console.log('beforeDestroy');
            clearInterval(this.timer);
        }
    })

</script>

</html>