面试官:聊聊vue的nextTick方法

前言

nextTick是面试常考的vue中的一个重要知识点,但是很多小伙伴常常无法真正的理解nextTick的执行机制,并且背后包含的许多vue的重要知识。本文会把nextTick聊的非常细,让大家彻底搞懂它。

正文

那么在nextTick正式登场之前呢,我们先看一个例子:

页面上有20个li元素,当点击更新列表按钮时,页面会增加10个里li元素。假如现在为了提供用户更好的体验,将页面滚动到新添加元素中最后一个元素的位置,scrollIntoView 原生JS自带的方法,滚动到指定的dom结构上去,behavior: 'smooth' 指定什么类型的滚动行为。 那么该如何去书写?下面的写法可以吗?

xml 复制代码
<template>
    <div>
        <button @click="updateList">更新列表</button>
        <ul>
            <li v-for="n in list">{{ n }}</li>
        </ul>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const list = ref(new Array(20).fill(0))

const updateList = () => {
    //解构是因为我们要一个一个元素push进去,而不是整个数组
    list.value.push(...(new Array(10).fill(1)))
    const liItem = document.querySelector('li:last-child')
    liItem.scrollIntoView({ behavior: 'smooth' })
}
</script>

<style lang="css" scoped>
li{
    height: 100px;
    background-color: #21e07a;
    margin: 10px;
}
</style>

很明显,页面滚动到一半就停止了 ,并没有滚到最后一个元素处,这是为什么呢? 这里我们可以复习一下vue中的生命周期的相关知识。

在vue组件渲染的整个过程过程中,setup语法糖也就是组合式api中的逻辑最先执行,其次才是编译模板、挂载组件、渲染DOM节点。那么在这个例子中,当点击按钮后,执行点击事件的回调函数中逻辑是最先执行的,然后添加li元素,再去获取页面更新后的最后一个DOM节点。但是页面更新DOM节点是需要时间的,执行document.querySelector('li:last-child')时能获取到哪取决于电脑的性能,所以在添加多个DOM节点后很可能无法滚动到最后一个节点就会停止。

那么怎么解决呢?

没错,用nextTick来解决。

nextTick是什么

是vue内置的一个api,在页面渲染完成后执行回调函数中的逻辑。接受一个回调函数作为参数。nextTick 是异步操作,且属于微任务。 所以会比 类似于setTimeout这样的延迟函数 更快执行。

那么很显然,这个场景非常适合用nextTick(仅展示JS部分):

xml 复制代码
<script setup>
import { nextTick, ref } from 'vue';
import { myNextTick } from './next-tick';

const list = ref(new Array(20).fill(0))

const updateList = () => {
    //解构是因为我们要一个一个元素push进去,而不是整个数组
    list.value.push(...(new Array(10).fill(1)))

    nextTick(() => { //保证浏览器更新dom完毕后
        const liItem = document.querySelector('li:last-child')
        // scrollIntoView 原生JS自带的方法,滚动到指定的dom结构上去
        // behavior: 'smooth' 指定什么类型的滚动行为
        liItem.scrollIntoView({ behavior: 'smooth' })
    })
}
</script>

怎么样,是不是顺畅多了!

手写nextTick

nextTick的手写也相对比较简单,那么下面是实现代码:

javascript 复制代码
function myNextTick(fn) {
    let app = document.getElementById('app')

    // 使用MutationObserver方法监听dom
    var observerOptions = {
        childList: true, // 观察目标子节点的变化,是否有添加或者删除
        attributes: true, // 观察属性变动
        subtree: true, // 观察后代节点,默认为 false
      };
    // 要保证fn在dom更新完成后再调用
    // 创建一个DOM监听器    
    let observer = new MutationObserver((el,obs) => {
        //当被监听的DOM节点更新完成时,该回调会触发
        fn()
    })
    //将目标节点和callback绑定,并定义observerOptions来配置需要监听dom的哪些变化
    observer.observe(app,observerOptions)
}

传入的fn是需要执行的回调函数。那么如何保证fn在页面渲染完成后才调用呢?

这里使用了JS原生的MutationObserver方法监视DOM 树。MutationObserver方法接受回调函数(callback)作为参数。

这里关键使用了MutationObserver构造函数身上的observe方法,去配置 MutationObserver 在 DOM 更改匹配给定选项时,通过其回调函数开始接收通知,这里的给定选项就是observerOptions对象中的属性 。当 observer 发现匹配观察请求中指定的配置项的更改时,callback() 方法便会被调用。所以只要将fn放入callback中调用即可。

最后

那么本期面试题就结束了,后期我会持续更新更多的面试题,有兴趣的小伙伴记得点赞和关注我哦!

欢迎在评论区留言!

假如您也和我一样,在准备春招。欢迎加我微信lyhGetup,这里有几十位一心去大厂的友友可以相互鼓励,分享信息,模拟面试,共读源码,齐刷算法,手撕面经。来吧,友友们!

相关推荐
待磨的钝刨1 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
逐·風4 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫4 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦5 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山6 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享6 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄7 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
鱼跃鹰飞8 小时前
大厂面试真题-简单说说线程池接到新任务之后的操作流程
java·jvm·面试
清灵xmf8 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询