深入学习Vue nextTick的用法及原理

Vue.nextTick是某视频剪辑软件官方给我们提供的一个API(方法),作用是在下次数字正射影像图更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的数字正射影像图

那么我们的理解是：当数据发生变化之后唐视图并不会立即更新，如果我们在发生变化之后立马去获取某个节点或者某个节点的值，很有可能结果就是未定义；因为某视频剪辑软件实现响应式并不是数据发生变化之后数字正射影像图立即变化，而是按一定的策略进行数字正射影像图的更新；

来看一个小演示：

App.vue

模板div id=' App ' div ref=' Message“{ msg } }/div div v-if=' msg 1“{ msg 1 } }/div button @ click=' change msg '更改消息/按钮/div/模板脚本导出默认值{ name: 'App '，data(){ return { msg : ' Hello Vue '，msg1: ' '，}，methods : { change msg(){ this。msg=' Hello world这个. msg 1=这个.参考文献。消息。innerHTMlconsole.log('更新数字正射影像图之前： '这个。msg 1)} } }/script style # app { font-family : ' Avenir '，Helvetica，Arial，无衬线；-网络套件-字体-流畅：抗锯齿；-moz-OSX-字体-平滑：灰度；文本对齐：中心；颜色： # 2c 3e 50边距-top : 60px；}/style

我们通过运行代码能够看到当我们不在这个$nextTick .方法里面进行数字正射影像图操作的时候，这个$refs.message.innerHTML .的值存储的还是之前的初始值；

修改代码：

App.vue

模板div id=' App ' div ref=' Message“{ msg } }/div div v-if=' msg 1“{ msg 1 } }/div button @ click=' change msg '更改消息/按钮/div/模板脚本导出默认值{ name: 'App '，data(){ return { msg : ' Hello Vue '，msg1: ' '，}，methods : { change msg(){ this。msg=' Hello world//this.msg1=this .参考文献。消息。innerHTMl//console.log('更新数字正射影像图之前：' this.msg1)这个$nextTick(()={ this.msg1=this .参考文献。消息。innerHTMlconsole.log('更新数字正射影像图之后： '这个。msg 1)})} } }/script style # app { font-family : ' Avenir '，Helvetica，Arial，sans-serif；-网络套件-字体-流畅：抗锯齿；-moz-OSX-字体-平滑：灰度；文本对齐：中心；颜色： # 2c 3e 50边距-top : 60px；}/style

修改代码之后我们可以发现，使用这个$nextTick .很容易的就接收到了更新后的值，正如官网解释：在下次数字正射影像图更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的数字正射影像图

再来修改代码对比一下：

App.vue

模板div id=' App ' div ref=' Message“{ msg } }/div div v-if=' msg 1“{ msg 1 } }/div button @ click=' change msg '更改消息/按钮/div/模板脚本导出默认值{ name: 'App '，data(){ return { msg : ' Hello Vue '，msg1: ' '，}，methods : { change msg(){ this。msg=' Hello world这个. msg 1=这个.参考文献。消息。innerHTMlconsole.log('更新数字正射影像图之前：' this.msg1)这个$nextTick(()={ this.msg1=this .参考文献。消息。innerHTMlconsole.log('更新数字正射影像图之后： '这个。msg 1)})} } }/script style # app { font-family : ' Avenir '，Helvetica，Arial，sans-serif；-网络套件-字体-流畅：抗锯齿；-moz-OSX-字体-平滑：灰度；文本对齐：中心；颜色： # 2c 3e 50边距-top : 60px；}/style

经过修改代码，我们现在可以很容易看出来这个$nextTick(回调)的作用，回调是回调函数也就是我们要进行操作数字正射影像图的事情；

应用场景：

在某视频剪辑软件的生命周期钩子函数已创建()中进行数字正射影像图操作的时候一定要把数字正射影像图操作放入到这个$nextTick()中；

因为在创造钩子函数触发的时候唐是没有进行渲染的；数字正射影像图没有进行渲染，然后进行数字正射影像图操作无疑是徒劳的；

所以我们在创造中进行数字正射影像图操作的时候，一定要将数字正射影像图操作放入到这个$nextTick()中；

相反，挂载，因为当挂载被触发时，DOM的挂载和渲染已经完成，所以在挂载中DOM操作不会有问题；

因为DOM更新是异步的，就像v-if指令判断DOM元素的添加和删除一样，当我们给方法中的变量赋值时，如果我们不使用这个。$nextTick()，我们很可能得到初始值。如果我们想得到更新的值，我们需要使用它。$nextTick()方法

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。