1.nextTick()
vue更新DOM是异步的,异步渲染的时候想立刻获取DOM里面的元素当前是获取不到的,只能拿到更新之前的数据,解决这个就要用nextTick(()=>{}
),它可以在DOM渲染之后立刻获取DOM节点,执行回调
官方文档说法:将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。
应用场景:
在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。
原因:是created()钩子函数执行时DOM其实并未进行渲染。
在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时候,这个操作应该放在Vue.nextTick()的回调函数中。
原因:Vue异步执行DOM更新,只要观察到数据变化,Vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变,如果同一个watcher被多次触发,只会被推入到队列中一次。