vue源码nextTick使用及原理解析


Posted in Javascript onAugust 13, 2019

1 nextTick的使用

vue中dom的更像并不是实时的,当数据改变后,vue会把渲染watcher添加到异步队列,异步执行,同步代码执行完成后再统一修改dom,我们看下面的代码。

<template>
 <div class="box">{{msg}}</div>
</template>
export default {
 name: 'index',
 data () {
  return {
   msg: 'hello'
  }
 },
 mounted () {
  this.msg = 'world'
  let box = document.getElementsByClassName('box')[0]
  console.log(box.innerHTML) // hello
 }
}

可以看到,修改数据后并不会立即更新dom ,dom的更新是异步的,无法通过同步代码获取,需要使用nextTick,在下一次事件循环中获取。

this.msg = 'world'
let box = document.getElementsByClassName('box')[0]
this.$nextTick(() => {
 console.log(box.innerHTML) // world
})

如果我们需要获取数据更新后的dom信息,比如动态获取宽高、位置信息等,需要使用nextTick。

2 数据变化dom更新与nextTick的原理分析

2.1 数据变化

vue双向数据绑定依赖于ES5的Object.defineProperty,在数据初始化的时候,通过Object.defineProperty为每一个属性创建getter与setter,把数据变成响应式数据。对属性值进行修改操作时,如this.msg = world,实际上会触发setter。下面看源码,为方便越读,源码有删减。

双向数据绑定

vue源码nextTick使用及原理解析

数据改变触发set函数

Object.defineProperty(obj, key, {
 enumerable: true,
 configurable: true,
 // 数据修改后触发set函数 经过一系列操作 完成dom更新
 set: function reactiveSetter (newVal) {
  const value = getter ? getter.call(obj) : val
  if (getter && !setter) return
  if (setter) {
   setter.call(obj, newVal)
  } else {
   val = newVal
  }
  childOb = !shallow && observe(newVal)
  dep.notify() // 执行dep notify方法
 }
})

执行dep.notify方法

export default class Dep {
 constructor () {
  this.id = uid++
  this.subs = []
 }
 notify () {
  const subs = this.subs.slice()
  for (let i = 0, l = subs.length; i < l; i++) {
   // 实际上遍历执行了subs数组中元素的update方法
   subs[i].update()
  }
 }
}

当数据被引用时,如<div>{{msg}}</div> ,会执行get方法,并向subs数组中添加渲染Watcher,当数据被改变时执行Watcher的update方法执行数据更新。

update () {
 /* istanbul ignore else */
 if (this.lazy) {
  this.dirty = true
 } else if (this.sync) {
  this.run()
 } else {
  queueWatcher(this) //执行queueWatcher
 }
}

update 方法最终执行queueWatcher

function queueWatcher (watcher: Watcher) {
 const id = watcher.id
 if (has[id] == null) {
  has[id] = true
  if (!flushing) {
   queue.push(watcher)
  } else {
   // if already flushing, splice the watcher based on its id
   // if already past its id, it will be run next immediately.
   let i = queue.length - 1
   while (i > index && queue[i].id > watcher.id) {
    i--
   }
   queue.splice(i + 1, 0, watcher)
  }
  // queue the flush
  if (!waiting) {
   // 通过waiting 保证nextTick只执行一次
   waiting = true
   // 最终queueWatcher 方法会把flushSchedulerQueue 传入到nextTick中执行
   nextTick(flushSchedulerQueue)
  }
 }
}

执行flushSchedulerQueue方法

function flushSchedulerQueue () {
 currentFlushTimestamp = getNow()
 flushing = true
 let watcher, id
 ...
 for (index = 0; index < queue.length; index++) {
  watcher = queue[index]
  if (watcher.before) {
   watcher.before()
  }
  id = watcher.id
  has[id] = null
  // 遍历执行渲染watcher的run方法 完成视图更新
  watcher.run()
 }
 // 重置waiting变量 
 resetSchedulerState()
 ...
}

也就是说当数据变化最终会把flushSchedulerQueue传入到nextTick中执行flushSchedulerQueue函数会遍历执行watcher.run()方法,watcher.run()方法最终会完成视图更新,接下来我们看关键的nextTick方法到底是啥

2.2 nextTick

nextTick方法会被传进来的回调push进callbacks数组,然后执行timerFunc方法

export function nextTick (cb?: Function, ctx?: Object) {
 let _resolve
 // push进callbacks数组
 callbacks.push(() => {
   cb.call(ctx)
 })
 if (!pending) {
  pending = true
  // 执行timerFunc方法
  timerFunc()
 }
}

timerFunc

let timerFunc
// 判断是否原生支持Promise
if (typeof Promise !== 'undefined' && isNative(Promise)) {
 const p = Promise.resolve()
 timerFunc = () => {
  // 如果原生支持Promise 用Promise执行flushCallbacks
  p.then(flushCallbacks)
  if (isIOS) setTimeout(noop)
 }
 isUsingMicroTask = true
// 判断是否原生支持MutationObserver
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
 isNative(MutationObserver) ||
 // PhantomJS and iOS 7.x
 MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
 let counter = 1
 // 如果原生支持MutationObserver 用MutationObserver执行flushCallbacks
 const observer = new MutationObserver(flushCallbacks)
 const textNode = document.createTextNode(String(counter))
 observer.observe(textNode, {
  characterData: true
 })
 timerFunc = () => {
  counter = (counter + 1) % 2
  textNode.data = String(counter)
 }
 isUsingMicroTask = true
// 判断是否原生支持setImmediate 
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
 timerFunc = () => {
 // 如果原生支持setImmediate 用setImmediate执行flushCallbacks
  setImmediate(flushCallbacks)
 }
// 都不支持的情况下使用setTimeout 0
} else {
 timerFunc = () => {
  // 使用setTimeout执行flushCallbacks
  setTimeout(flushCallbacks, 0)
 }
}

// flushCallbacks 最终执行nextTick 方法传进来的回调函数
function flushCallbacks () {
 pending = false
 const copies = callbacks.slice(0)
 callbacks.length = 0
 for (let i = 0; i < copies.length; i++) {
  copies[i]()
 }
}

nextTick会优先使用microTask, 其次是macroTask 。

也就是说nextTick中的任务,实际上会异步执行,nextTick(callback)类似于
Promise.resolve().then(callback),或者setTimeout(callback, 0)。

也就是说vue的视图更新 nextTick(flushSchedulerQueue)等同于setTimeout(flushSchedulerQueue, 0),会异步执行flushSchedulerQueue函数,所以我们在this.msg = hello 并不会立即更新dom。

要想在dom更新后读取dom信息,我们需要在本次异步任务创建之后创建一个异步任务。

异步队列

vue源码nextTick使用及原理解析

为了验证这个想法我们不用nextTick,直接用setTimeout实验一下。如下面代码,验证了我们的想法。

<template>
 <div class="box">{{msg}}</div>
</template>

<script>
export default {
 name: 'index',
 data () {
  return {
   msg: 'hello'
  }
 },
 mounted () {
  this.msg = 'world'
  let box = document.getElementsByClassName('box')[0]
  setTimeout(() => {
   console.log(box.innerHTML) // world
  })
 }
}

如果我们在数据修改前nextTick ,那么我们添加的异步任务会在渲染的异步任务之前执行,拿不到更新后的dom。

<template>
 <div class="box">{{msg}}</div>
</template>

<script>
export default {
 name: 'index',
 data () {
  return {
   msg: 'hello'
  }
 },
 mounted () {
  this.$nextTick(() => {
   console.log(box.innerHTML) // hello
  })
  this.msg = 'world'
  let box = document.getElementsByClassName('box')[0]
 }
}

3 总结

vue为了保证性能,会把dom修改添加到异步任务,所有同步代码执行完成后再统一修改dom,一次事件循环中的多次数据修改只会触发一次watcher.run()。也就是通过nextTick,nextTick会优先使用microTask创建异步任务。

vue项目中如果需要获取修改后的dom信息,需要通过nextTick在dom更新任务之后创建一个异步任务。如官网所说,nextTick会在下次 DOM 更新循环结束之后执行延迟回调。

参考文章

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

Javascript 相关文章推荐
面向对象的Javascript之三(封装和信息隐藏)
Jan 27 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
Aug 16 Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 Javascript
Nginx上传文件全部缓存解决方案
Aug 17 Javascript
AngularJS轻松实现双击排序的功能
Aug 30 Javascript
简单学习vue指令directive
Nov 03 Javascript
ES6新特性三: Generator(生成器)函数详解
Apr 21 Javascript
详解Angular CLI + Electron 开发环境搭建
Jul 20 Javascript
vue跨域解决方法
Oct 15 Javascript
webpack 开发和生产并行设置的方法
Nov 08 Javascript
基于vue的验证码组件的示例代码
Jan 22 Javascript
原生js实现下拉选项卡
Nov 27 Javascript
封装微信小程序http拦截器过程解析
Aug 13 #Javascript
Vue中通过Vue.extend动态创建实例的方法
Aug 13 #Javascript
微信小程序封装分享与分销功能过程解析
Aug 13 #Javascript
node删除、复制文件或文件夹示例代码
Aug 13 #Javascript
vue实现下拉加载其实没那么复杂
Aug 13 #Javascript
vue中created和mounted的区别浅析
Aug 13 #Javascript
微信小程序实现点击空白隐藏的方法示例
Aug 13 #Javascript
You might like
删除数组元素实用的PHP数组函数
2008/08/18 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
Js 随机数产生6位数字
2010/05/13 Javascript
jquery默认校验规则整理
2014/03/24 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
AngularJS中$http服务常用的应用及参数
2016/08/22 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
Python压缩和解压缩zip文件
2015/02/14 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
django 发送手机验证码的示例代码
2018/04/25 Python
python flask中动态URL规则详解
2019/11/22 Python
tensorboard显示空白的解决
2020/02/15 Python
Django-migrate报错问题解决方案
2020/04/21 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
Python extract及contains方法代码实例
2020/09/11 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
python 写一个文件分发小程序
2020/12/05 Python
python实现简单的学生管理系统
2021/02/22 Python
公务员培训自我鉴定
2013/09/19 职场文书
客户服务经理岗位职责
2014/01/29 职场文书
生产文员岗位职责
2014/04/05 职场文书
金融事务专业求职信
2014/04/25 职场文书
教师四风问题整改措施
2014/09/25 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
申报材料格式
2014/12/30 职场文书
教师个人总结范文
2015/02/11 职场文书
仰望星空观后感
2015/06/10 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
生产实习心得体会范文
2016/01/22 职场文书
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python