最近再做vue项目时要在请求到数据后获取,结果报错。dom位undeifined。
用了nextTick之后解决,因为获取的时候得到了数据层,并没有渲染,所以获取失败。
vue.nextTick( [callback, context] )

概念
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

原理:
vue更新dom是异步的执行,当监听到数据变化(利用objeect.defineProperty)的时候开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。

例如,当你设置 vm.someData = ‘new value’,该组件不会立即重新渲染。当刷新队列时,组件会在下一个事件循环“tick”中更新。多数情况我们不需要关心这个过程,但是如果你想基于更新后的 DOM 状态来做点什么,这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM,可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用

Logo

前往低代码交流专区

更多推荐