vue之nextTick全面解析


Posted in Javascript onMay 17, 2017

简介

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的写法,虽然我们不经常用,但是有总比没有好。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 自定义函数缺省值的设置方法
May 05 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
Apr 26 Javascript
js语法学习之判断一个对象是否为数组
May 13 Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 Javascript
js计算系统当前日期是星期几的方法
Jul 14 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
vue小白入门教程
Apr 02 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
May 17 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
Jan 23 Javascript
JS判断数组四种实现方法详解
Jun 29 Javascript
小程序实现可拖动的悬浮按钮
Sep 07 Javascript
手写实现JS中的new
Nov 07 Javascript
Vue.js学习教程之列表渲染详解
May 17 #Javascript
JavaScript运动框架 解决速度正负取整问题(一)
May 17 #Javascript
深入理解Commonjs规范及Node模块实现
May 17 #Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
May 17 #Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
May 17 #Javascript
Angular.JS中的this指向详解
May 17 #Javascript
websocket+node.js实现实时聊天系统问题咨询
May 17 #Javascript
You might like
坏狼php学习 计数器实例代码
2008/06/15 PHP
ecshop 批量上传(加入自定义属性)
2012/03/20 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
2013/01/20 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
2015/04/02 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
浅析javaScript中的浅拷贝和深拷贝
2017/02/15 Javascript
BootStrap实现鼠标悬停下拉列表功能
2017/02/17 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
NodeJS父进程与子进程资源共享原理与实现方法
2018/03/16 NodeJs
Vue.js 表单控件操作小结
2018/03/29 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
Vue Router的手写实现方法实现
2020/03/02 Javascript
[02:49]DAC2018决赛日TOP5 LGD开启黑暗之门绝杀VP
2018/04/08 DOTA
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
对Django url的几种使用方式详解
2019/08/06 Python
Python 找出出现次数超过数组长度一半的元素实例
2020/05/11 Python
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
苹果Mac升级:MacSales.com
2017/11/20 全球购物
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
2014年五四青年节活动策划书
2014/04/22 职场文书
和谐家庭演讲稿
2014/05/24 职场文书
计算机系本科生求职信
2014/05/31 职场文书
普通党员整改措施
2014/10/24 职场文书
2015新员工试用期工作总结
2014/12/12 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
Java数组与堆栈相关知识总结
2021/06/29 Java/Android