vue之nextTick全面解析

简介

vue是非常流行的框架，他结合了angular和react的优点，从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框架。本人比较喜欢用之。在我们用vue时，我们经常用到一个方法是this.$nextTick，相信你也用过。我常用的场景是在进行获取数据后，需要对新视图进行下一步操作或者其他操作时，发现获取不到dom。因为赋值操作只完成了数据模型的改变并没有完成视图更新。在这个时候我们需要用到本章介绍的函数。

为什么要用nextTick

请看如下一段代码

new Vue({
 el: '#app',
 data: {
  list: []
 },
 mounted: function () {
  this.get()
 },
 methods: {
  get: function () {
   this.$http.get('/api/article').then(function (res) {
    this.list = res.data.data.list
    // ref list 引用了ul元素，我想把第一个li颜色变为红色
    this.$refs.list.getElementsByTagName('li')[0].style.color = 'red'
   })
  },
 }
})

我在获取到数据后赋值给数据模型中list属性，然后我想引用ul元素找到第一个li把它的颜色变为红色，但是事实上，这个要报错了，我们知道，在执行这句话时，ul下面并没有li，也就是说刚刚进行的赋值操作，当前并没有引起视图层的更新。因此，在这样的情况下，vue给我们提供了$nextTick方法，如果我们想对未来更新后的视图进行操作，我们只需要把要执行的函数传递给this.$nextTick方法，vue就会给我们做这个工作。

源码解读

这个函数很简单，vue2.2.6版本 450行开始。

首先，这个函数是采用了一个单利模式还是什么创建的一个闭包函数

var callbacks = [];  // 缓存函数的数组
var pending = false; // 是否正在执行
var timerFunc; // 保存着要执行的函数

首先定义了一些变量供之后使用，下面是一个函数

function nextTickHandler () {
 pending = false;
 // 拷贝出函数数组副本
 var copies = callbacks.slice(0);
 // 把函数数组清空
 callbacks.length = 0;
 // 依次执行函数
 for (var i = 0; i < copies.length; i++) {
  copies[i]();
 }
}

这个函数就是$nextTick内实际调用的函数。

接下来，是vue分了三种情况来延迟调用以上这个函数，因为$nextTick目的就是把传进来的函数延迟到dom更新后再使用，所以这里依次优雅降序的使用js的方法来做到这一点。

1. promise.then延迟调用

if (typeof Promise !== 'undefined' && isNative(Promise)) {
 var p = Promise.resolve();
 var logError = function (err) { console.error(err); };
 timerFunc = function () {
  p.then(nextTickHandler).catch(logError);
  if (isIOS) { setTimeout(noop); }
 };
}

如果浏览器支持Promise，那么就用Promise.then的方式来延迟函数调用，Promise.then方法可以将函数延迟到当前函数调用栈最末端，也就是函数调用栈最后调用该函数。从而做到延迟。

2. MutationObserver 监听变化

else if (typeof MutationObserver !== 'undefined' && (
 isNative(MutationObserver) ||
 MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {

 var counter = 1;
 var observer = new MutationObserver(nextTickHandler);
 var textNode = document.createTextNode(String(counter));
 observer.observe(textNode, {
  characterData: true
 });
 timerFunc = function () {
  counter = (counter + 1) % 2;
  textNode.data = String(counter);
 };
}

MutationObserver是h5新加的一个功能，其功能是监听dom节点的变动，在所有dom变动完成后，执行回调函数。

具体有一下几点变动的监听

1. childList：子元素的变动
2. attributes：属性的变动
3. characterData：节点内容或节点文本的变动
4. subtree：所有下属节点（包括子节点和子节点的子节点）的变动

可以看出，以上代码是创建了一个文本节点，来改变文本节点的内容来触发的变动，因为我们在数据模型更新后，将会引起dom节点重新渲染，所以，我们加了这样一个变动监听，用一个文本节点的变动触发监听，等所有dom渲染完后，执行函数，达到我们延迟的效果。

3.setTimeout延迟器

else {
  timerFunc = function () {
   setTimeout(nextTickHandler, 0);
  };
 }

利用setTimeout的延迟原理，setTimeout(func, 0)会将func函数延迟到下一次函数调用栈的开始，也就是当前函数执行完毕后再执行该函数，因此完成了延迟功能。

闭包函数

 return function queueNextTick (cb, ctx) {
  var _resolve;
  callbacks.push(function () {
   if (cb) { cb.call(ctx); }
   if (_resolve) { _resolve(ctx); }
  });
  // 如果没有函数队列在执行才执行
  if (!pending) {
   pending = true;
   timerFunc();
  }
  // promise化
  if (!cb && typeof Promise !== 'undefined') {
   console.log('进来了')
   return new Promise(function (resolve) {
    _resolve = resolve;
   })
  }
 }

这个return的函数就是我们实际使用的闭包函数，每一次添加函数，都会想callbacks这个函数数组入栈。然后监听当前是否正在执行，如果没有，执行函数。这个很好理解。下面一个if是promise化。

this.$nextTick(function () {

})
// promise化
this.$nextTick().then(function () {

}.bind(this))

以上代码中第二种写法我们不常见把，直接调用$nextTick函数然后用promise格式去书写代码，不过这个then里面需要手动绑定this，vue内部没有给做处理。

结尾

这就是一个this.$nextTick的实现，其中利用了优雅降序的巧妙手法，使代码尽可能优化。而且还提供了promise的写法，虽然我们不经常用，但是有总比没有好。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# vue  # nexttick  # vue2.0  # vue.js  # vue中$nextTick的用法讲解  # 简单理解Vue中的nextTick方法  # 深入理解Vue nextTick 机制  # 详解Vue + Vuex 如何使用 vm.$nextTick  # vue2.0$nextTick监听数据渲染完成之后的回调函数方法  # 关于Vue.nextTick()的正确使用方法浅析  # 浅谈Vue.nextTick 的实现方法  # Vue.js原理分析之nextTick实现详解  # 是一个  # 第一个  # 给我们  # 如果没有  # 绑定  # 完成了  # 我想  # 就会  # 是在  # 很好  # 我在  # 降序  # 在这个  # 将会  # 你也  # 只需  # 这句话  # 要把  # 形成了  # 这就 

相关文章： *服务器网站为何频现安全漏洞？  定制建站价位费用解析与套餐推荐全攻略  青浦网站制作公司有哪些,苹果官网发货地是哪里？  如何选择高效可靠的多用户建站源码资源？  手机钓鱼网站怎么制作视频,怎样拦截钓鱼网站。怎么办？  Python lxml的etree和ElementTree有什么区别  电影网站制作价格表,那些提供免费电影的网站，他们是怎么盈利的？  制作表格网站有哪些,线上表格怎么弄？  模具网站制作流程,如何找模具客户？  建站之星×万网：智能建站系统+自助建站平台一键生成  百度网页制作网站有哪些,谁能告诉我百度网站是怎么联系？  C++如何编写函数模板？（泛型编程入门）    如何通过IIS搭建网站并配置访问权限？  制作网站的软件免费下载,免费制作app哪个平台好？  建站之星安装后界面空白如何解决？  c++怎么用jemalloc c++替换默认内存分配器【性能】  如何在IIS服务器上快速部署高效网站？  建站之星后台搭建步骤解析：模板选择与产品管理实操指南  如何在阿里云香港服务器快速搭建网站？  制作网站公司那家好,网络公司是做什么的？  ,交易猫的商品怎么发布到网站上去？  宝塔面板创建网站无法访问？如何快速排查修复？  Python路径拼接规范_跨平台处理说明【指导】  广州顶尖建站服务：企业官网建设与SEO优化一体化方案  如何通过cPanel快速搭建网站？  建站之星2.7模板快速切换与批量管理功能操作指南  如何自定义建站之星模板颜色并下载新样式？  c++怎么使用类型萃取type_traits_c++ 模板元编程类型判断【方法】  建站之家VIP精选网站模板与SEO优化教程整合指南  胶州企业网站制作公司,青岛石头网络科技有限公司怎么样？  如何在腾讯云服务器上快速搭建个人网站？  在线制作视频网站免费,都有哪些好的动漫网站？  建站主机是什么？如何选择适合的建站主机？  非常酷的网站设计制作软件,酷培ai教育官方网站？  网站制作服务平台,有什么网站可以发布本地服务信息？  如何在建站宝盒中设置产品搜索功能？  新网站制作渠道有哪些,跪求一个无线渠道比较强的小说网站，我要发表小说？  如何快速搭建个人网站并优化SEO？  如何在阿里云部署织梦网站？  如何在宝塔面板创建新站点？  如何实现建站之星域名转发设置？  如何在IIS7中新建站点？详细步骤解析  建站之星图片链接生成指南：自助建站与智能设计教程  如何在Tomcat中配置并部署网站项目？  小程序网站制作需要准备什么资料,如何制作小程序？  邀请函制作网站有哪些,有没有做年会邀请函的网站啊？在线制作，模板很多的那种？  建站之星展会模版如何一键下载生成？  详解jQuery停止动画——stop()方法的使用  网站制作专业公司有哪些,如何制作一个企业网站，建设网站的基本步骤有哪些？