this.$nextTick()函数的作用

最新推荐文章于 2024-04-11 08:58:01 发布

zero to 0

最新推荐文章于 2024-04-11 08:58:01 发布

阅读量970

点赞数 1

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/navylhjjlh/article/details/125977821

版权

Vue $nextTick DOM更新焦点获取生命周期钩子

关键词由CSDN通过智能技术生成

this.$nextTick(cd)函数的作用就是cd回调函数不立刻执行，而是将其推迟到下一个DOM更新周期之后执行。简单来说就是，DOM中的数据于发生变化的时候，得到变化的数据再页面中更新完毕之后再去执行。

上面就是简单的文字描述一下。我还是喜欢借助栗子说明。

栗子的要求：一开始就只显示按钮，而文本框是隐藏起来的，点击按钮之后，文本框被显示同时按钮被隐藏，然后文本框焦点失去之后显示按钮隐藏文本框。也就是两者只有一个显示。

一开始的状态：

点击按钮之后的状态：

当其失去焦点之后又开始显示按钮，隐藏文本框，又回到初始状态

给源代码大家看一下：

还是挺简单的，但这不是我们的今天所要讲的。这只是前奏

我们主要的目的就是，点击按钮之后，不仅仅显示文本框，还要使其自动获取到焦点。

其实也挺简单的。

只需要将其执行文本框的focus获取焦点就好

源代码就在上面代码中添加了两个红色方框的代码而已。

使用ref是为了可以操作到DOM元素。具体就不多说这个作用，不是我们的重点。

当你运行此代码的时候，得到的结果是出乎意料的。直接报错：

大家看一下报错的原因，主要看方框内的就好。原因显示的是：属性是undefined，括号内的内容显示的是，该属性就是focus，也就是调用focus这个属性的元素是undefined的，即iptRef是undefined的

我来打印一下iptRef给大家看看：

为什么会这样呢，其实按照上面的逻辑来说是完全没有问题的。

其实主要的问题就是在于生命周期中，在生命周期中的运行阶段，数据被修改的时候，会经过beforeUpdate和updated。只有在updated中才会将修改之后的数据渲染到页面中，这一过程是需要一些些时间的。而我们代码中点击按钮之后修改了flag的值之后就立即调用文本框的focus，会瞬间完成，也就是说在修改flag的值之后，还没来得及在页面中更新，就直接调用focus了，此时的页面依然是显示的是按钮，而不是文本框。既然文本框都没有显示，那么this.$refs.iptRef就是undefined.这样大家应该可以理解吧。简单来说就是页面还没来得及更新就去操作最新的页面数据肯定是操作不了的

我一开始的想法就是，将操作文本框的焦点代码直接丢进定时器中：