携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第13天，点击查看活动详情
今天还是在测试自己的模块时，发现了一个小缺陷：页面上方的搜索框，搜索条件是下方表中的主键。由于提供的用于测试的例子，主键比较少，所以一开始没在意，但今天突然想到，如果主键个数很多，搜索框能不能够自适应收缩呢？结果，果然不行......
发现问题
想要达到的效果是：如果搜索框中的条件过多，能够自己进行折叠。在搜索框最右方会有“折叠”、“展开”按钮，如果搜索框自己折叠起来了，只会显示“展开”按钮，点击可以看到被折叠起来的条件；如果搜索条件没有很多，则“展开”、“折叠”按钮都不会显示。这个效果是其他组的项目中已经实现了的，我这个模块的搜索框就是用的他们的组件，当时把“代码”复制过来之后，有很多报错，其中有一段代码是一个方法，页面中总是报类似“Can not find Undefinited XXX”的错误，直指这个方法，当时感觉这个方法也没什么用，就先注释掉了。然后也确实没什么影响。今天去看了一下，这个方法貌似就是用来让搜索框自适应的，不过它是通过宽度来判断的。
nextTick() 方法
方法的具体逻辑还没看懂，而且好像还涉及到其他的地方，所以我一时间也不会改，不过我注意到这个方法里面用到了 this.$nextTick()，methods 中也没有对它的定义，特地去了解了一下。
该方法的含义就是：在下次 DOM 更新循环结束之后执行延迟回调。例如修改数据之后立即使用该方法来获取更新后的 DOM。也就是说，nextTick() 是将回调函数延迟在下一次 DOM 更新数据后调用，数据更新了，DOM 渲染后，自动执行该方法。
使用场景
场景一
Vue 的钩子函数 created()，它里面的 DOM 操作，一定要放在 Vue.nextTick() 回调函数中。原因：钩子函数 created() 执行时，DOM 还没进行渲染，所以其中的 DOM 操作没什么实际用处，所以要讲 DOM 操作的 JS 代码放在 Vue.nextTick() 回调函数中。
场景二
项目中，想要在改变 DOM 元素后基于新的 DOM 做点什么，这些对新的 DOM 做的一系列 JS 操作都要放进 Vue.nextTick() 回调函数中。即，更新数据后，想要立即使用 JS 操作新的视图时，就要使用该回调函数。
回调函数原理
Vue 是异步执行 DOM 更新的，只要发现数据变化，Vue 就开启一个队列，把同一个事件循环(event loop)中发现的数据变化的 watcher 推送到该队列中。若该 watcher 被触发多次，只会被推送到队列一次。这样的缓存行为可以有效的去掉重复数据造成的不必要的计算和 DOM 操作。在下一次循环时，Vue 会清空队列，并进行必要的 DOM 更新。
如果你在某个地方进行了数据更新的操作，类似 this.nowData = 'newData'，DOM 并不会马上更新加载新数据，而是会在异步队列中被清除，下一个事件循环时需要更新时才会进行必要的 DOM 更新。但此时如果你想根据新的 DOM 去完成某些操作时，就办不到，会出问题。为了在数据变化之后等待 Vue 完成 DOM 的更新，可以在数据变化之后，使用 Vue.nextTick() 回调函数，在 DOM 更新完成后进行回调。
问题还是没解决，暂时算是了解一个知识点，明天再看看吧，感觉改起来有些麻烦.....
希望本文章能够帮到你，有错误，望指正！
我向你敬礼啊，Salue！
