## 解决Vue异步更新Dom的“问题”：$nextTick方法的理解​

解决Vue异步更新Dom的“问题”：$nextTick方法的理解

        相信大家对promise应该一点不陌生吧，当初为了解决回调函数地狱的时候，链式调用promise对我们这样的小白可谓一点不友好，于是就出现了async、await这样的好东西。

        相当于我们可以原地等待异步函数处理完结果，再往下执行语句，暴力又直接，类似于把原本异步的js进程可视化的变成同步往下开展了，这样就省去了开发时遇到的很多逻辑上的麻烦。

        而今天要讲讲的这个$nextTick呢，是在vue开发时常用的一种手段，解决vue代码异步执行的一种手段。

        众所周知，vue在更新dom时是异步执行的。当数据发生变化时，vue将开启一个异步更新队列，视图需要在等待队列中所有数据变化完成后，再进行统一更新。

        这当然本质上是一个可以优化性能的策略，因为可以避免对同一数据多次改变，用来避免不必要的计算和Dom操作，就像如果没有这个机制的话，你for循环执行100次同一个数据改变，就会操作Dom100次，而有了这种机制，便只用更新一次Dom。

        理论上，我们不会主动去操作Dom，因为vue的核心思想就是数据驱动Dom，但在很多特定情景下，就会出现一些小问题，比如我们操作Dom1的数据时，如果Dom2有需要时时从Dom1中获取数据，伴随Dom1更新而更新的业务，那这时就会发现Dom2的视图并没有更新，原因就是上面所说的，再一个常见的情况就是在生命周期created（）钩子函数里，对Dom的操作。

        第一种情况就是，事件执行了对Dom1的动态操作，而新的Dom1还没创建出来，就开始执行对Dom2的渲染，毫无疑问Dom2的视图不会改变。

        第二种情况就是老生常谈，created（）时Dom还没渲染完，对Dom操作肯定不行。

        而这个$nextTick就是用来原地等待Dom更新的，可以把想要操作Dom的函数包到$nextTick里，原地等待，再进行后续的Dom操作。尤其是在created（）里，想对Dom操作一定要包在$nextTick()里。

        怎么样，是不是有点async、await的味道了