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 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
JQuery自定义事件的应用 JQuery最佳实践
Aug 01 Javascript
javascript 全选与全取消功能的实现代码
Dec 23 Javascript
JS数组合并push与concat区别分析
Dec 17 Javascript
angularjs表格ng-table使用备忘录
Mar 09 Javascript
angularjs实现首页轮播图效果
Apr 14 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
Feb 08 Javascript
详解Javascript中new()到底做了些什么?
Mar 29 Javascript
微信小程序canvas实现刮刮乐效果
Jul 09 Javascript
vue的keep-alive用法技巧
Aug 15 Javascript
js实现滚动条自动滚动
Dec 13 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
E路文章系统PHP
2006/12/11 PHP
剖析 PHP 中的输出缓冲
2006/12/21 PHP
PHP编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
谷歌音乐搜索栏的提示功能php修正代码
2011/05/09 PHP
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
PHP把小数转成整数3种方法
2014/06/30 PHP
PHP中使用匿名函数操作数据库的例子
2014/11/17 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
javascript 异常处理使用总结
2009/06/21 Javascript
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
jQuery如何解决IE输入框不能输入的问题
2016/10/08 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
2016/10/29 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
2017/02/10 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
2017/07/03 Javascript
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
[01:04:39]OG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
在tensorflow中实现屏蔽输出的log信息
2020/02/04 Python
Python 去除字符串中指定字符串
2020/03/05 Python
潘多拉珠宝英国官方网上商店:PANDORA英国
2018/06/12 全球购物
波兰汽车配件网上商店:iParts.pl
2020/09/08 全球购物
医学类导师推荐信范文
2013/11/19 职场文书
小车司机岗位职责
2013/11/25 职场文书
测试工程师程序员求职信范文
2014/02/20 职场文书
法律进学校实施方案
2014/03/15 职场文书
典型事迹材料范文
2014/12/29 职场文书
spring cloud gateway中如何读取请求参数
2021/07/15 Java/Android