【面试题】Vue2的$nextTick原理解析

简介: 【面试题】Vue2的$nextTick原理解析

大厂面试题分享 面试题库

前后端面试题库 (面试必备) 推荐:★★★★★

地址:前端面试题库  web前端面试题库 VS java后端面试题库大全

nextTick原理

  1. 平时在获取真实DOM的时候获取不到最新的DOM元素,使用$nextTick就可以
  2. 为什么$nextTick就可以获取到最新的DOM元素?

带着以上问题,来解析nextTick的原理

为什么获取不到最新的DOM元素?

因为Vue修改视图是异步执行的,这也是为了优化性能,在我们修改data中的数据时,Vue内部监听到依赖数据发生了改变,通过dep通知组件的watcher执行视图更新,每一次视图更新都需要重新生成vnode再进行新旧vnode比对,生成DOM元素挂载到页面上,这一轮操作是非常消耗性能的,所以Vue内部会把页面更新watcher推入到一个队列中,并加入了节流方法,当同步代码执行完了之后才会把队列中的watcher拿出来遍历更新视图,我们在使用this.$refs获取DOM的时候是同步代码,其实DOM还没有更新,所以是获取不到的

为什么使用$nextTick就可以获取到最新DOM?

Vue的视图更新是异步执行的,使用的就是nextTick,这也是能获取到最新DOM的原因,在Vue内部有一个nextTick函数,他也是使用队列去处理回调函数,并不是调用后就马上执行,首先是推入到一个队列中,当所有的同步代码执行完的时候再通过循环取出调用,接下来可以通过代码了解

let callback = []
let pending = false
let timerFunc
function flush() {
  callback.forEach((cb) => cb())
  pending = false
  callback = []
}
// 处理兼容问题
if (Promise) {
  timerFunc = () => {
    Promise.resolve().then(flush)
  }
} else if (MutationObserver) {
  let observe = new MutationObserver(flush)
  let textNode = document.createTextNode(1)
  observe.observe(textNode, {
    characterData: true,
  })
  timerFunc = () => {
    textNode.textContent = 2
  }
} else if (setImmediate) {
  // ie浏览器支持得定时器
  timerFunc = () => {
    setImmediate(flush)
  }
}
export function nextTick(cb) {
  callback.push(cb)
  // Promise.then
  if (!pending) {
    console.log('执行了')
    timerFunc() // 这个方法就是异步方法
    pending = true
  }
}
  1. 定义一个callback数组,每次调用nextTick就会把回调函数push到callback数组中,因为callback.push是同步代码,timerFunc是异步代码,所以执行完所有push后才会调用timerFunc
  2. 那么视图更新和获取DOM的流程是怎么样的呢

通过伪代码来解释

data(){
    return {
        name: 'zs',
        list: [1,2,3]
    }
}
this.name = 'ls'
this.list.push(4)
const fn = () => {
  this.$el.innerHTML // 获取最新DOM
}
this.$nextTick(fn)

this.namethis.list修改了2个数据,会触发两次视图更新,这个时候就会把watcher推入到队列中,下面调用了$nextTick获取DOM,nextTick中的fn函数也会推入到队列中,这个时候的数组是这样的[watcher,fn]通过循环调用,先执行视图更新,后获取DOM就可以获取到最新DOM了

大厂面试题分享 面试题库

前后端面试题库 (面试必备) 推荐:★★★★★

地址:前端面试题库  web前端面试题库 VS java后端面试题库大全

 

相关文章
|
3天前
|
Python
2024年最全用Python写了一个电子考勤系统_用python写一个宿舍考勤系统,2024年最新1307页阿里Python面试全套真题解析在互联网火了
2024年最全用Python写了一个电子考勤系统_用python写一个宿舍考勤系统,2024年最新1307页阿里Python面试全套真题解析在互联网火了
|
3天前
|
机器学习/深度学习 编解码 算法
算法工程师面试问题总结 | YOLOv5面试考点原理全解析
本文给大家带来的百面算法工程师是深度学习目标检测YOLOv5面试总结,文章内总结了常见的提问问题,旨在为广大学子模拟出更贴合实际的面试问答场景。在这篇文章中,我们还将介绍一些常见的深度学习目标检测面试问题,并提供参考的回答及其理论基础,以帮助求职者更好地准备面试。通过对这些问题的理解和回答,求职者可以展现出自己的深度学习目标检测领域的专业知识、解决问题的能力以及对实际应用场景的理解。同时,这也是为了帮助求职者更好地应对深度学习目标检测岗位的面试挑战,提升面试的成功率和竞争力。
|
6天前
|
前端开发 JavaScript
Web前端开发之面试题全解析 一,2024年最新面经牛客
Web前端开发之面试题全解析 一,2024年最新面经牛客
|
6天前
|
移动开发 前端开发 JavaScript
Web前端开发之面试题全解析 一(3),前端面试题背不下来怎么办
Web前端开发之面试题全解析 一(3),前端面试题背不下来怎么办
|
6天前
|
前端开发 算法 搜索推荐
Web前端开发之面试题全解析 一(1),2024年最新前端组件化面试
Web前端开发之面试题全解析 一(1),2024年最新前端组件化面试
|
6天前
|
Linux 网络安全
CentOS系统openssh-9,网络安全大厂面试真题解析大全
CentOS系统openssh-9,网络安全大厂面试真题解析大全
|
6天前
|
运维 网络协议 Linux
Docker网络_docker 网络,来看看这份超全面的《Linux运维面试题及解析》
Docker网络_docker 网络,来看看这份超全面的《Linux运维面试题及解析》
|
6天前
|
Android开发
Android高级开发面试题以及笞案整理,实战解析
Android高级开发面试题以及笞案整理,实战解析
|
6天前
|
Android开发
71,字节跳动历年校招Android面试真题解析
71,字节跳动历年校招Android面试真题解析
|
7天前
|
负载均衡 算法
Dubbo-负载均衡原理解析(1),一个本科渣渣是怎么逆袭从咸鱼到Offer收割机的
Dubbo-负载均衡原理解析(1),一个本科渣渣是怎么逆袭从咸鱼到Offer收割机的

推荐镜像

更多