因为不会手写nextTick又被面试官diss了

2024-08-06

1041 字约 4 分钟

...

最近在面试的时候被面试官问到,如何在vue中获取到最新的DOM元素，瞬间内心狂喜，自信地对面试官说不就是用nextTick嘛，当DOM元素更新时会执行传入nextTick的回调函数，我们在回调函数中就可以获取到最新的DOM了。

嗯，没错，那你手写一个nextTick吧。

痛苦面具，瞬间小脑萎缩了。

在 Vue 的生命周期中，有一段时间是异步的，有时候会遇到数据还未挂载到DOM节点上就试图获取该数据那么此时我们获取到的数据并不是最新的，而 nextTick 就是让我们在这段异步时间结束后执行自己的代码的工具。它确保在DOM更新后执行回调（起到了等待DOM渲染的作用）。

<template>
  <div>
    <button @click="add()">添加</button>
    <ul>
      <li v-for="(i, index) in list" ref="l" key="index">{{ i }}</li>
    </ul>
  </div>
</template>

<script setup>
import { nextTick, ref } from "vue";
const l = ref(null)
const list = ref([1, 2, 3])
console.log(l.value);
</script>

大家猜猜这段代码的运行结果是什么?

请看下图:

为什么最后会输出null呢?

这就是一个很经典的问题，在dom节点还未挂载时我们打印该元素，所以打印的结果为null。

我们可以看vue的官方文档给出的生命周期示意图，很好的解释了这一问题。

在这段代码中，生命周期setup是最先执行的，所以在dom节点还未挂载前就会执行console.log(l.value);打印出null。

那么我们怎么在dom节点挂载后再打印呢？接下来将要请出本文的主角nextTick了

运行下面这段代码

<template>
  <div>
    <button @click="add()">添加</button>
    <ul>
      <li v-for="(i, index) in list" ref="l" key="index">{{ i }}</li>
    </ul>
  </div>
</template>

<script setup>
import { nextTick, ref } from "vue";
const l = ref(null)
const list = ref([1, 2, 3])
nextTick(() => {
  console.log(l.value.length);
})
</script>

运行这段代码，我们可以看到，nextTick等待DOM渲染完毕之后再执行回调函数，这样就完美的解决了问题。

搞懂了上面的这些内容，手写一个nextTick对于大家来说应该可以秒了，接下来让我们一起来看看怎么手写nextTick吧。

根据上面的代码我们可以知道，nextTick函数在DOM节点发生变化时，会执行传入的回调函数。现在的问题就是我们怎么来监听DOM节点的变化呢?

我们都知道在vue中所有的组件最终都是经过编译然后挂载到index.html中的id为app的容器上，所以我们只需要监听该id为app的容器就能够实现对DOM节点更新的监视。

好了，有了以上知识的铺垫，直接开戳

<template>
  <div>
    <button @click="add()">添加</button>
    <ul>
      <li v-for="(i, index) in list" ref="l" key="index">{{ i }}</li>
    </ul>
  </div>
</template>

<script setup>
import { nextTick, ref } from "vue";
const l = ref(null)
const list = ref([1, 2, 3])


console.log(l.value);

const add = () => {
  list.value.push(list.value.length + 1);

  myNextTick(() => {
    console.log(l.value.length);
  });
};



const myNextTick = (fn) => {
  const app = document.getElementById('app')
  const config = {
    childList: true, 
    attributes: true, 
    subtree: true
  };

  const observer = new MutationObserver((mutations) => {
    
    fn();
  });

  observer.observe(app, config);
};

</script>


<style scoped></style>