什么！！！$nextTick失效了？

前言：刚才有人突然问“给routerview外层加了<transition>标签后，为什么刚开始进入$nextTick失效了”.之前从来没有注意过这个问题，然后去试了一下确实会这样。为什么呢？怎么解决呢？接下来将从两方面分析这个问题：1.$nextTick的概念2.<transition>的相关用法

1. $nextTick

在Vue.js中，当我们对数据进行修改后，DOM 并不会立即更新。而是在 Vue.js内部的nextTick队列中，异步执行更新操作。所以，如果我们想要在 DOM 更新后执行一些操作，需要使用 Vue.js 提供的$nextTick方法。

$nextTick方法是一个实例方法,可以在 Vue.js实例上直接调用。它接收一个回调函数作为参数，在DOM 更新之后执行该回调函数。$nextTick 方法的主要作用是确保在DOM更新后执行回调函数。这对于需要操作更新后的 DOM 元素的场景非常有用，例如获取元素的尺寸、位置等信息，或者操作元素的样式、类名等。

2. transition的相关用法

<transition>标签是Vue.js提供的用于实现过渡效果的组件。它可以让我们在DOM元素插入、更新或删除时，根据指定的类名进行过渡动画。
<transition>标签可以有以下属性：

• name：指定过渡类名的前缀，默认值为"v"
• mode：指定过渡模式，可以是"in-out"（先进入，后离开）、"out-in"（先离开，后进入）或"default"（同时进行），默认值为"default"
• appear：指定是否在初始渲染时立即应用过渡效果，默认值为false

另外，<transition>标签还可以发出以下事件：

• before-enter：在进入过渡开始前触发
• enter：在进入过渡中触发
• after-enter：在进入过渡结束后触发
• enter-cancelled：在进入过渡被取消时触发
• before-leave：在离开过渡开始前触发
• leave：在离开过渡中触发
• after-leave：在离开过渡结束后触发
• leave-cancelled：在离开过渡被取消时触发

关于这个问题

根据以上相关知识，我们可以得出，$nextTick方法的回调函数生效的必要条件是DOM更新完成。由于使用了<transition>标签，在页面刚开始进入时，<transition>标签正在进行过渡动画，DOM还未更新完成，此时调用$nextTick方法是无法立即执行回调函数的。问题找到了，那我们如何解决呢？此时我们会发现<transition>标签有一个钩子——after-enter,没错！！！，我们只需要把$nextTick方法放到这个钩子中去，问题就迎刃而解了。

示例代码如下：

<transition @after-enter="onEnter"> 
    <router-view></router-view> 
</transition> 
...
methods: {
  onEnter() { 
     this.$nextTick(() => { 
// 在DOM更新完成后执行的方法 
     }) 
   } 
}

结束语： 总结不易，点个赞吧👍，如有问题，评论区留言欧