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

技术2025-01-09 18

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、会动的活人。总会有一点点进步的方法。ღ

Processed: 0.009, SQL: 9