有需要可以了解----Vue生命周期

最新推荐文章于 2022-11-01 23:42:42 发布

小Monv~

最新推荐文章于 2022-11-01 23:42:42 发布

阅读量115

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/smonv/article/details/107119701

版权

Vue生命周期理解

什么是生命周期？？？

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。简单来说就是Vue实例从创建到销毁的过程，就是生命周期。

Vue生命周期图

在这里插入图片描述

生命周期的三个阶段

每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化阶段、运行中阶段、销毁阶段。

初始化阶段钩子函数（beforeCreate,created,beforeMount,mounted）
运行中阶段钩子函数（beforeUpdate,updated）
销毁阶段钩子函数（beforeDestroy,destroyed）
一个组件或者实例的生命周期都是通过new开始的
整体布局

<div id="app"> 
    <my-component></my-component>
</div>
<template id="my-component">
    <div>
        <h1 id="title">hello world---------{{msg}}</h1>
        <p><input type="text" v-model="msg"></p>
        <button @click="destroy">销毁组件</button>
    </div>
</template>

初始化阶段钩子函数之beforeCreate

代码部分

 Vue.component("my-component",{
            template:"#my-component",
            data(){
                return {
                    msg:1
                }
            },
            beforeCreate(){
                console.log("beforeCreate....")
                console.log(this.msg,document.getElementById("title"))
            },
   }

运行结果
在这里插入图片描述
总结：beforeCreate钩子函数初始化的时候立马执行,此钩子函数里面是获取不到数据的，同时页面中的真实dom节点也没有挂载出来，为null

初始化阶段钩子函数之created

代码部分

 created(){
            console.log("created...")
            console.log(this.msg,document.getElementById("title"))
        },

运行结果
在这里插入图片描述
总结：created钩子函数内部的数据已经被挂载了，但是真实dom节点还是没有渲染出来。在这个钩子函数里面，如果同步的去更改数据的话，运行中钩子函数是不会执行的。通常会在此钩子函数里面进入ajax的异步操作，另外还可以做一些初始化事件的绑定

初始化阶段钩子函数之beforeMount

代码部分

beforeMount() {
          console.log("beforeMount....");
          console.log(this.msg, document.getElementById("title"));
        }

运行结果
在这里插入图片描述
总结：beforeMount代表dom马上就要被渲染出来了，但是还没有真正的在页面中渲染出来。此钩子函数与created钩子函数基本一致，可以做ajax与初始化事件的绑定操作

初始化阶段钩子函数之mounted

代码部分

mounted() {
          console.log("mounted.....");
          console.log(this.msg, document.getElementById("title"));
        }

运行结果
在这里插入图片描述
总结：mounted钩子函数是初始化阶段的最后一个钩子函数，数据已经挂载完毕了，真实的dom也已经渲染出来了。这个钩子函数可以用来做一些实例化的相关操作，例如：拖拽效果

运行中阶段钩子函数之beforeUpdate

代码部分

beforeUpdate(){
            console.log("beforeUpdate....")
        }

运行结果（和input标签结合得到结果）
在这里插入图片描述
总结：运行时钩子函数初始化阶段是不会主动执行的。只有dom挂载完毕了，然后再去当数据发生变化的时候，beforeUpdate这个钩子函数才会执行。beforeUpdate钩子函数里面，在这里获取dom里面的数据内容是更新之前的内容

运行中阶段钩子函数之updated

代码部分

beforeUpdate() {
          console.log(
            "beforeUpdate....",
            document.getElementById("title").innerHTML
          );
        },
updated() {
          console.log(
            "updated....",
            document.getElementById("title").innerHTML
          );
        },

运行结果
在这里插入图片描述
总结：updated钩子函数里面dom获取的数据内容是更新后的内容，生成新的虚拟dom，与上一次的虚拟dom结构进行对比，比较出来差异（diff算法），再去进行真实dom的重新渲染操作。updated中真实dom里面显示的数据跟内存中data里面的数据趋于一致

运行中阶段钩子函数beforeDestroy和destroyed

代码部分

//销毁组件方法
 methods: {
          destroy() {
            this.$destroy();
          },
        },
beforeDestroy() {
          console.log("beforeDestroy....");
        },
destroyed() {
          console.log("destroyed....");
        },

运行结果（点击按钮）
在这里插入图片描述
总结：当组件销毁的时候，就会触发执行vm.$destroy()，组件就会被销毁。beforeDestroy代表销毁之前，可以做一些善后操作，例如：清除事件绑定，清除定时器

swiper案例分析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./base/swiper.min.css">
</head>
<body>
    <div id="app">
        <my-banner></my-banner>
    </div>
    <!--创建模板-->
    <template id="my-banner">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div 
                    class="swiper-slide"
                    v-for="banner in banners"
                >
                    <img width="100%" :src="banner.image" alt="">
                </div>
            </div>
        </div>
    </template>
    <script src="./base/swiper.min.js"></script>
    <script src="./base/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.5.0/vue-resource.min.js"></script>
    <script>
        //创建组件
        Vue.component("my-banner",{
            template:"#my-banner",
            data(){
                return {
                    banners:[]
                }
            },
            created(){
                this.$http.get("./banners.json").then(res=>{
                    console.log(res.data.bannerList)
                    this.banners = res.data.bannerList
                    //实例化Swiper
                    /*
                        此时轮播图有问题，轮播图是可以滚动的，但划不过去？原因是实例化时最外层的swiper-container容器是存在的，也就是页面当中这个真实dom是存在的。而我们进行异步请求的swiper-slide这四个真实dom是不存在的，当数据刚刚更改完，内部会生成新的虚拟dom，然后新的虚拟dom与旧的虚拟dom结构会进行对比，比较出来差异后才会更新真实dom的swiper-slide的dom结构。虚拟dom之间的对比是有时间的，而更改完数据后立马进行实例化操作，等虚拟dom更新完毕后生成真实的dom结构
                    */
                })
            },
            //beforeMount钩子函数不行！因为这个钩子函数获取不到真实dom的结构。
            // beforeMount(){
            //     new Swiper(".swiper-container",{
            //         loop:true 
            //     })
            // }
            //mounted钩子函数也不行！因为上面是异步的过程，他不会阻止后续mounted的相关操作。
            //内部的异步请求边去进行请求数据的同时，下面的mounted钩子函数也正在执行，当数据回来进行进行更改操作，其实这个实例化操作早就结束了。
            // mounted(){
            //     new Swiper(".swiper-container",{
            //         loop:true 
            //     })
            // }    
            //beforeUpdate钩子函数里面还是不行！当dom挂载完毕的时候，当数据发生改变的时候，他会立马执行！
            // beforeUpdate(){
            //     new Swiper(".swiper-container",{
            //         loop:true 
            //     })
            // }
                //updated钩子函数是可行的
                //当数据发生改变的时候，引发虚拟dom的对比，虚拟dom对比完成后，再去渲染真实的dom结构
                //当真实的dom结构渲染完成后，内部才会执行updated钩子函数
                //说白了，数据改变了，然后swiper-slide这几个真实dom生成好了之后，才会进入到updated这个钩子函数里面去。
                updated(){
                    new Swiper(".swiper-container",{
                        loop:true 
                    })
                }
        })

        new Vue({
            el:"#app"
        })
    </script>
</body>
</html>

文中如有不妥之处，欢迎大家留言指正，非常感谢！！！
ღ世界上只有两种人：1、不会动的死人。2、会动的活人。
总会有一点点进步的方法。ღ