小白写代码时遇到的问题问了同事说,要把代码放到$nextTick() 的回调函数中,查了一下$nextTick()
原因:DOM 的更新是异步的,也就是在数据变化之后,DOM不会立即更新,而是进入队列,等同一时间循环中的所有数据变化完成之后,再统一进行视图更新。
解决:
- 在vue的生命周期 created() 钩子函数中进行 dom 操作,一定要放在 $nextTick() 函数中执行。在 created() 钩子函数执行的时候 DOM 其实并未进行任何渲染,而此时进行 DOM 操作无异于徒劳,所以此处一定要将 DOM 操作的代码放进 nextTick() 的回调函数中。
- 官网对this.$nextTick()解释是:
将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。