对vue生命周期的深入理解


Posted in Vue.js onDecember 03, 2020

一.Vue生命周期简介

官网:https://cn.vuejs.org/v2/api/#beforeCreate

Vue实例从创建到销毁的过程,就是生命周期。详细来说也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。

首先我们来看一下官网的生命周期图(我自己做了一点点注释):

对vue生命周期的深入理解 

Vue提供给我们的钩子为上图的红色的文字

二.钩子详解

 1.beforeCreate

在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <!-- 引入vue.js -->
 <script type="text/javascript" src='./vue.js'></script>
</head>
<body>
 <div id="app">
 <input type="text" name="" v-model="message">
 {{message}} 
 </div>
 <script type="text/javascript">
 //实例化Vue
 var app = new Vue({
  el:'#app',
  data:{
  message:'this is mseeage'
  },
  //时刻监测数据message的变化,一但那变化就会吊该函数
  watch:{
  //message必须和监测的data名字一样
  message:function(){
   console.log('watch:','message 变了')
  }
  },
  methods:{
  init:function(){
   console.log('这是初始化方法')
  }
  },
  //我们在beforeCreate钩子中调用Vue的data和method
  beforeCreate:function(){
  console.log("beforeCreate",this.message);
  this.init();
  }
 })
 </script> 
</body>
</html>

我们在上面的例子中在的beforeCreate钩子中调用Vue的data和method,来看一下结果

对vue生命周期的深入理解 

可以看到Vue中的data和方法都是去不到的,并且是在wath之前执行

2.created

实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。

主要应用:调用数据,调用方法,调用异步函数

<div id="app">
 <ul>
  <li v-for="(item,index) of list" key="index">{{item}}--{{message}}</li>
 </ul>

 <p>p1</p>
 <p>p1</p>
 <p>p1</p>
</div>
<script type="text/javascript">
 //实例化Vue
 var app = new Vue({
  el:'#app',
  data:{
   message:'this is mseeage',
   list:['aaaaaaaa','bbbbbbb','ccccccc']
  },
  //时刻监测数据message的变化,一但那变化就会吊该函数
  watch:{
   //message必须和监测的data名字一样
   message:function(){
    console.log('watch:','message 变了')
   }
  },
  methods:{
   foo:function(){
    console.log('foo : ','这是初始化方法')
   }
  },
  //created钩子
  created:function(){
   //调用Vue的data
   console.log("created : ",this.message);
   //调用Vue方法
   this.foo();
   //因为我们是通过v-for循环遍历li,所以created之前挂载阶段还没开始.是无法获取li的个数的
   console.log('li数量:',document.getElementsByTagName('li').length);
   //直接加载出来的DOM是可以直接获取到的
   console.log('p个数:',document.getElementsByTagName('p').length);
  },
 })
</script>

结果

对vue生命周期的深入理解 

可以看到:created钩子可以获取Vue的data,调用Vue方法,获取原本HTML上的直接加载出来的DOM,但是无法获取到通过挂载模板生成的DOM(例如:v-for循环遍历Vue.list生成li)

3.beforeMount

在挂载开始之前被调用:相关的 render 函数(模板)首次被调用。

例如通过v-for生成的html还没有被挂载到页面上

(接 2created的代码)

beforeMount: function () {
  console.log('beforeMount:',document.getElementsByTagName('li').length);
 },

结果 beforeMount: 1

4.mounted

el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。

有初始值的DOM渲染,例如我们的初始数据list,渲染出来的li,只有这里才能获取

(接 2created的代码)

mounted: function () {
 console.log('mounted:',document.getElementsByTagName('li').length);
},

结果 mounted: 3

可以看到到这里为止,挂载到实例上了,我们可以获取到li的个数了

5.beforeUpdate

数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。

当我们更改Vue的任何数据,都会触发该函数

beforeUpdate: function () {
  console.log('beforeUpdate 钩子执行...');
  console.log('beforeUpdate:'+this.message)
 },

6.updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。

当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。

该钩子在服务器端渲染期间不被调用。

数据更新就会触发(vue所有的数据只有有更新就会触发),如果想数据一遍就做统一的处理,可以用这个,如果想对不同数据的更新做不同的处理可以用nextTick,或者是watch进行监听

updated: function () {
  console.log('updated 钩子执行...');
  console.log('updated:',this.message)
},

7.beforeDestroy

实例销毁之前调用。在这一步,实例仍然完全可用。

8.destroyed

Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

<div id="app">
</div>
<script type="text/javascript">
 //实例化Vue
 var app = new Vue({
  el:'#app',
  data:{
   message:'this is mseeage',
  },
  beforeDestroy: function () {
   console.log('beforeDestroy 钩子执行...',this.message)
  },
  destroyed: function () {
   console.log('destroyed 钩子执行...',this.message)
  }
 })
 //销毁Vue实例,触发beforeDestroy和destroyed函数
 app.$destroy()
</script>

结果:

对vue生命周期的深入理解 

可以看打到销毁Vue实例时会调用这两个函数

补充$mount

当你vue没有挂在el时,我们可以用$mount

var app = new Vue({
 data:{
   message:'this is mseeage',
  },
}).$mount('#app')

三.钩子的一些实战用法

1.异步函数

这里我们用定时器来做异步函数

<div id="app">
 <ul>
  <li v-for="(item,index) of list" key="index">{{item}}</li>
 </ul>
</div>

<script type="text/javascript">
 var app = new Vue({
  el:'#app',
  data:{
   list:['aaaaaaaa','bbbbbbb','ccccccc']
  },
  created:function(){
   consoloe.log('created异步:aaaaa');
   //异步获取数据
   // 因为是异步,就和我们ajax获取数据一样
   setTimeout(()=>{
    this.list=['111','222','333','444'],
    console.log('created异步:',document.getElementsByTagName('li').length);
   },0)
  },
  mounted: function () {
   console.log('mounted:',document.getElementsByTagName('li').length);
  },
  updated: function () {
   console.log('updated:',document.getElementsByTagName('li').length)
  },
 })
</script>

结果为:

create: aaaaaaaa
mounted: 3
created异步函数: 3
updated: 4

解释:

可以看到因为是在created的钩子中加入异步函数,所以函数的执行顺序为:

ceated钩子,mounted钩子,异步函数,updated钩子(根据事件队列原理,只有在updated后,li才是真的DOM渲染为4个,所以异步函数中获取的li的个数时是没有变化的li的个数)。

因为mounted获取到的是我们在Vue的data中设置初始值渲染的DOM,而我们是在异步函数中变化的list数据,所以mounted获取的li的个数为3。

update函数是只要数据vue绑定的数据变化就会触发,所以最后执行,为4

这是不是意味着可以直接在update函数中操作呢,其实不是,因为update函数是针对vue的所有数据的变化,而我们也有可能会有其他数据的变化。

例如下面的例子:

//我们利用异步函数改变了两次list,会发现update被触发了2次
created:function(){
  //异步获取数据
  // 因为是异步,就和我们ajax获取数据一样
  setTimeout(()=>{
    this.list=['111','222','333','444'],
    console.log('created异步:',document.getElementsByTagName('li').length);
  },0)
  setTimeout(()=>{
    this.list=['快乐大本营','脚踏实地','300033','天天向上','好好学习'],
    console.log('created异步:',document.getElementsByTagName('li').length);
  },1000)
},
mounted: function () {
  console.log('mounted:',document.getElementsByTagName('li').length);
},
updated: function () {
  console.log('updated:',document.getElementsByTagName('li').length)
},

结果为:

对vue生命周期的深入理解

2.Vue.nextTick对异步函数的结果进行操作

我们想要改变数据时,各自触发各自的方法

created:function(){
//异步获取数据
// 因为是异步,就和我们ajax获取数据一样

 //为了在数据变化之后等待 Vue 完成更新 DOM ,可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。
 setTimeout(()=>{
  this.list=['111','222','333','444'],
  console.log('created异步:',document.getElementsByTagName('li').length);
  this.$nextTick(function(){
   console.log("created$nextTick:",document.getElementsByTagName('li').length)
  });
 },0)
 setTimeout(()=>{
  this.list=['快乐大本营','脚踏实地','300033','天天向上','好好学习'],
  console.log('created异步:',document.getElementsByTagName('li').length);
  this.$nextTick(function(){
   console.log("created$nextTick:",document.getElementsByTagName('li').length)
  });
 },1000)
},
mounted: function () {
 console.log('mounted:',document.getElementsByTagName('li').length);
},
updated: function () {
 console.log('updated:',document.getElementsByTagName('li').length)
},

结果:

对vue生命周期的深入理解 

我们可以看到通过$nextTick我们可以对异步函数的结果进行各自的操作

到此这篇关于对vue生命周期深入理解的文章就介绍到这了,更多相关vue生命周期的理解内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
vue中如何自定义右键菜单详解
Dec 08 Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
vue前端工程的搭建
Mar 31 Vue.js
Vue实现动态查询规则生成组件
May 27 Vue.js
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
Vue全局事件总线你了解吗
Feb 24 Vue.js
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
用vue设计一个日历表
Dec 03 #Vue.js
实用的 vue tags 创建缓存导航的过程实现
Dec 03 #Vue.js
如何实现vue的tree组件
Dec 03 #Vue.js
Vue实现图书管理小案例
Dec 03 #Vue.js
Vue router安装及使用方法解析
Dec 02 #Vue.js
vue3.0中setup使用(两种用法)
Dec 02 #Vue.js
vue3.0+vue-router+element-plus初实践
Dec 02 #Vue.js
You might like
IE与FireFox中的childNodes区别
2011/10/20 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
一个判断抢购时间是否到达的简单的js函数
2014/06/23 Javascript
删除Javascript Object中间的key
2014/11/18 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
微信小程序加载更多 点击查看更多
2016/11/29 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
vue中使用protobuf的过程记录
2018/10/26 Javascript
解决layer图标icon不加载的问题
2019/09/04 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
[05:46]DOTA2英雄梦之声_第18期_陈
2014/06/20 DOTA
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
Python入门篇之编程习惯与特点
2014/10/17 Python
Python使用random和tertools模块解一些经典概率问题
2015/01/28 Python
python3音乐播放器简单实现代码
2020/04/20 Python
Python决策树和随机森林算法实例详解
2018/01/30 Python
pandas创建新Dataframe并添加多行的实例
2018/04/08 Python
python数字图像处理实现直方图与均衡化
2018/05/04 Python
Python实现修改IE注册表功能示例
2018/05/10 Python
Python开发虚拟环境使用virtualenvwrapper的搭建步骤教程图解
2018/09/19 Python
python 异或加密字符串的实例
2018/10/14 Python
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
2019/10/11 Python
Python 类,property属性(简化属性的操作),@property,property()用法示例
2019/10/12 Python
Django实现基于类的分页功能
2019/10/31 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
Python中无限循环需要什么条件
2020/05/27 Python
CSS3实现时间轴特效
2020/11/02 HTML / CSS
优秀学生事迹材料
2014/02/08 职场文书
Python如何配置环境变量详解
2021/05/18 Python
教你如何用Python实现人脸识别(含源代码)
2021/06/23 Python
如何利用Python实现一个论文降重工具
2021/07/09 Python
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL