登录 注册

vue【nextTick()】

Vue 中的 $nextTick

Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调，在修改数据之后使用$nextTick，则可以在回调中获取更新后的DOM（dom的改变是发生在nextTick()之后），这个方法作用是当数据被修改后使用这个方法，会回调获取更新后的dom再render出来

Vue.nextTick()作用：在下次 dom 更新循环结束之后，执行延迟回调。在修改数据之后立即使用这个方法，获得更新后的 dom。

Vue.nextTick()使用场景

  1. Vue 声明周期的 created() 钩子函数进行的 DOM 操作一定要放在 Vue.nextTick() 的回调函数中，因为 created() 执行的时候 DOM 实际上并未进行任何渲染，此时进行 DOM 操作无异于徒劳，所以此处一定要将 DOM 操作的 js 代码放进 Vue.nextTick()的回调函数中。
  2. 与之对应的就是 mounted 钩子函数，因为该函数执行时所有的 DOM 挂载和渲染都已完成，此时再钩子函数中进行任何 DOM 操作都不会有问题。
  3. 在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的 DOM 结构的时候，这个操作应该放进 Vue.nextTick() 的回调函数中

总结：简而言之，如果你在数据改变之后的操作跟改变之后的 DOM 有关，那么就应该使用 Vue.nextTick()

 this.$nextTick(() => {
       this.Height = this.$refs.ZhTable.clientHeight - 108;
	//方法的使用，或者是对某个变量的操作

     });
  • Vue.js

    Vue.js（读音 /vjuː/，类似于 view）是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    228 引用 • 641 回帖 • 473 关注
1 回帖
71 11 14 4 1 41

相关帖子

随便看看

广告 我要投放

1 回帖
vue【nextTick()】

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • Blackman99 •
    捐赠者

    随着 3 的到来，nextTick 已经 Hook 化了

    import { nextTick } from 'vue'

export default {
  setup: () => {
    return {
      someAction: () => {
        // 假设在这里进行了某中引起dom更新的动作
        nextTick(() => {
          // 上面的动作引起的dom更新之后
        })
      }
    }
  }
}