【Vue】Vue2生命周期详解

前端小媛

已于 2022-10-15 23:21:04 修改

阅读量646

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 前端前端框架生命周期

于 2022-10-15 23:18:43 首次发布

本文链接：https://blog.csdn.net/qq_59012240/article/details/127249916

版权

Vue 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

生命周期

1- 概念

组件/Vue在创建到销毁会经历一系列特殊的过程，称为生命周期。

在过程中执行的回调函数称为生命周期钩子函数。

2- 作用

可以让我们在恰当时期，做一些自动操作

网络请求数据
监听dom事件
执行定时器
清除定时器
解除监听

3- 生命周期钩子函数

在这里插入图片描述

创建前后

beforeCreate

特点：有this，没有data，没有$el

created

特点：有data ，没有 $el
作用：axios 请求、本地数据读取、window事件监听、定时器开启

挂载前后

beforeMount

特点：有$el，没有渲染

mounted

特点：页面有渲染
作用：可以和created重复，可以操作DOM

更新前后

beforeUpdate

特点：数据已经更新，没有渲染

updated

特点：数据更新，dom已经更新渲染

销毁前后

beforeDestroy

特点：有this，能方法实例的data等
作用：移除事件监听，清除定时器

destroyed

特点：切断组件与dom的联系

4- 生命周期图

在这里插入图片描述

5- 案例

生命周期

<!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 src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h1>生命周期</h1>
            <p>8个：创建前后，挂载前后，更新前后，销毁前后</p>
            <p>常用3个 创建完毕，挂载完毕，销毁前</p>
            <p>create创建 mount挂载 update更新 destroy销毁</p>
            <p>{{msg}}</p>
            <button @click="num ++" id="num">{{num}}</button>
            <button @click="$destroy()">销毁</button>
        </div>
        <script>
            new Vue({
                el: "#app",
                data() {
                    return {
                        msg: "你好生命周期",
                        num: 5,
                    };
                },

                //创建前 有this  没有把data 数据 挂载到实例this上
                beforeCreate() {
                    // console.log("before 创建前", this, this.msg);
                },

                //创建完毕  已经有this ,有数据
                //这个阶段，可以：执行ajax,读取本地数据，开启定时器，注册事件window相关事件
                created() {
                    // console.log("*创建完毕", this, this.msg);
                    // console.log("created 创建完毕", this.$el);
                },

                //挂载前：生成了dom没有编译（挂载）
                beforeMount() {
                    // console.log("beforeMount 挂载前", this.$el);
                    // console.log(
                    //     "beforeMount 挂在前",
                    //     document.querySelector("#app".innerHTML)
                    // );
                },

                //挂载完毕，dom已经被挂载到真实的节点，已经完成编译工作
                // 作用：执行ajax,读取本地数据，开启定时器，注册事件，操作dom节点
                mounted() {
                    // console.log(
                    //     "*mounted 挂载完毕",
                    //     document.querySelector("#app").innerHTML
                    // );
                },

                //beforeUpdate 更新前 ，数据更新了，dom没有更新
                beforeUpdate() {
                    //只要数据发生变化都会执行更新（多次执行）
                    // console.log(
                    //     "beforeUpdate 更新前",
                    //     this.num,
                    //     document.getElementById("num").innerHTML
                    // );
                },

                // updated 更新完毕，数据更新dom 也更新完毕
                updated() {
                    // console.log(
                    //     "Updated 更新完毕",
                    //     this.num,
                    //     document.getElementById("num").innerHTML
                    // );
                },

                //销毁前 能 访问到this,也能操作到data 的数据
                //移除定时器，移除事件监听
                beforeDestroy() {
                    this.num++;
                    console.log("*beforeDestoy 销毁前", this.num);
                },

                //销毁完毕，切断实例与dom 的联系，无法再使用子组件的实例，methods.watch
                destroyed(){
                    console.log("destroyed销毁完毕",this.num);
                }
            });
        </script>
    </body>
</html>

created 应用

<!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 src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h1>生命周期--created</h1>
            <!-- 渲染list 数据 -->
            <div class="list">
                <div class="item" v-for="(item,index) in list" :key="index">
                    {{item.summary}}
                    <hr />
                </div>
            </div>
        </div>
        <script>
            new Vue({
                el: "#app",
                data() {
                    return {
                        //笑话列表
                        list: [],
                        page: 1, //当前请求的页数
                        flag: true, //是否允许请求，请求中 ，不允许下一个请求
                    };
                },
                beforeDestroy() {
                    //页面销毁前，移除事件监听
                    window.removeEventListener("scroll", this.check);
                },
                created() {
                    this.getJok();
                    window.addEventListener("scroll", this.check);
                },
                methods: {
                    check() {
                        var elem = document.querySelector(
                            ".list .item:last-of-type"
                        );
                        var top = elem.getBoundingClientRect().top;
                        var winH = window.innerHeight;

                        if (top <= winH && this.flag) {
                            this.getJok();
                        }
                    },
                    //fetch 和axios,都是用来ajax请求的工具
                    /*
                    fetch 是js 原生 请求工具，需要 .then两次才能拿到数据
                    第一次 .then 是把流数据转换为json或者字符串
                    第二次 .then 才是真正的获取数据
                    .catch 请求失败执行的回调函数
                    */
                    getJok() {
                        this.flag = false;
                        fetch(
                            "http://dida100.com/mi/list.php?page=" + this.page
                        )
                            .then((res) => res.json())
                            .then((res) => {
                                console.log(res);
                                //concat连接合并两个数组
                                // 把原来的list 与新请求数据的result 合并，再次赋值给this
                                this.flag = true;
                                this.list = this.list.concat(res.result);
                                // 让请求的页数自动加1
                                this.page++;
                                /* 数据更新，等待dom更新再执行check
                                this.$nextTick数据更新，等待dom 更新执行回到函数，实现执行this.check
                                */
                                this.$nextTick(() => {
                                    this.check();
                                });
                            })
                            .catch((err) => {
                                this.flag = true;
                                console.log(err);
                            });
                    },
                },

                beforeDestroy() {},
            });
        </script>
    </body>
</html>

在这里插入图片描述

mounted 应用

<!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 src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h1>生命周期--mounted</h1>
            <p>ref引用,在vue实例中key通过$refs 获取dom 的 像html 的id</p>
            <p>
                子组件也可以通过ref 来引用
            </p>
            <!-- 渲染list 数据 -->
            <div class="list">
                <div class="item" v-for="item in len" :key="item">
                    {{item}}
                    <hr />
                </div>

                <input type="text" ref="inp" />
                <button @click="getIt()">获取</button>
            </div>
        </div>
        <script>
            new Vue({
                el: "#app",
                data() {
                    return {
                        len: 20,
                    };
                },

                methods: {
                    getIt() {
                        //获取所有dom引用的集合
                        alert(this.$refs.inp.value);
                        console.log(this.$refs.myp);
                    },
                },
                //在mounte 生命周期钩子函数中能够获取到渲染后的节点
                mounted() {
                    console.log(document.querySelectorAll(".item"));
                },
            });
        </script>
    </body>
</html>