1: $nextTick  用法于原理:

在Vue 中更新DOM 是异步的, nextTick的主要应用的场景及原因。

1.1:  在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中

在 Vue生命周期函数中 created钩子函数中: DOM 并没有进行任何渲染, 而此时进行DOM 操作无异于是徒劳的, 所以此处一定将DOM 操作的js 代码放进Vue.nextTick 回调函数中, 与之对应的就是mounted() 

 钩子函数, 因为该钩子函数执行时所有的DOM 挂载和渲染都已经完成, 此时在该钩子函数中进行任何操作都不会有问题。

1.2: 在数据变化后要执行某个回调函数,而这个操作需要使用随数据改变而改变的DOM结构的时候, 这个操作都应该放进Vue.nextTick () 回调函数中。

1.3: Vue的官方文档中详细解释:

 vue 执行dom 更新是异步的, 只要是观察到数据变化, vue  将会开启一个队列, 并缓冲在同一事件循环中发生的所有数据改变。 如果同一个watcher 被多次触发,只会被推如到队列中一次。 在这种缓冲时去除重复数据对于避免不必要的计算, 和DOM 操作非常重要。 然后下一个事件循环 “tick”中, vue 刷新队列执行实际(去重)工作。 在Vue 内部尝试对异步队列使用原生的promise.then 和 MessageChange, 如果

执行环境不支持, 会采用setTime(()=> {} , 0)代替。

Logo

前往低代码交流专区

更多推荐