生命周期

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.watchdestroyed(){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 合并，再次赋值给thisthis.flag = true;this.list = this.list.concat(res.result);// 让请求的页数自动加1this.page++;/* 数据更新，等待dom更新再执行checkthis.$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>

这篇分享就到这里了

【Vue】Vue2生命周期详解相关推荐

【vue系列-05】vue的生命周期(详解)
深入理解vue的生命周期一,vue的生命周期 1,创建流程 1.1,beforeCreate 1.2,created 2,挂载流程 2.1,beforeMount 2.2,mounted 3,更新流 ...
Vue的生命周期详解
Vue的生命周期 Vue的生命周期就是vue实例从创建到销毁的全过程,也就是 new Vue() 开始就是vue生命周期的开始.Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板. ...
Vue的生命周期详解，一文带你弄懂Vue的生命周期
大家好,我是Ned
vue 声明周期函数_Vue 生命周期详解
Vue 生命周期详解 Vue 生命周期流程最开始,用户使用 new Vue() 创建根 Vue 实例,或者 Vue 实例化子组件都会调用_init方法(我们将这两种实例都称为vm): functio ...
Fragment生命周期详解
关于Fragment的生命周期,博主写过Activity与Fragment生命周期详解,基本上把Fragment的生命周期详细介绍过,但是那仅仅是创建一个Fragmnet时的生命周期,而事实上Frag ...
Android面试之Activity生命周期详解
Activity生命周期详解一 Activity的四种状态: Activity的生命周期中存在四种基本的状态:活动状态(Active/Runing),暂停状态(Paused),停止状态(Stoppe ...
Fragment的懒加载与生命周期详解
提示:本文仅为笔者学习记录 Fragment的懒加载与生命周期详解什么是懒加载了解Fragment的生命周期 onAttach onCreate onCreateView onActivityCr ...
01.软件项目管理与敏捷方法——敏捷项目生命周期详解笔记
01.软件项目管理与敏捷方法--敏捷项目生命周期详解笔记 00.与其说是船还不如说是熟练的航行技术保证了成功的航行.--George William Curtis 01.敏捷项目是一个按照敏捷宣言宗旨 ...
taro生命周期详解
taro生命周期详解 taro介绍生命周期 react的钩子函数为兼容小程序的钩子函数个别生命周期详解以及注意 1.render()函数 2.constructor()构造函数 3.在各个生命周 ...

【Vue】Vue2生命周期详解

生命周期

1- 概念

2- 作用

3- 生命周期钩子函数

4- 生命周期图

5- 案例

【Vue】Vue2生命周期详解相关推荐

最新文章

热门文章