当前位置: 代码迷 >> 综合 >> vue.js的this.$nextTick()使用场景
  详细解决方案

vue.js的this.$nextTick()使用场景

热度:24   发布时间:2023-12-29 03:00:33.0

重点:vue的this.$nextTick()作用将回调延迟到下次 DOM 更新循环之后执行

一般使用场景:

1、在钩子函数created()里面想要获取dom的内容或者操作dom,但是这个时候只是虚拟dom,实际dom操作不了,所以在这里可以用this.$nextTick(),这样等dom更新完了再执行this.$nextTick()里面的回调,这样就可以操作或者获取dom的内容了

例如:想要在created()里初始化echart的图表

//template<div ref="chart"></div>//scriptcreated() {this.$echarts.init(this.$refs.chart)
}

执行结果报错如下:

用this.$nextTick()就不会报错了

created() {this.$nextTick(()=>{this.$echarts.init(this.$refs.chart)})
}

2、当你更新了data里面的内容之后,想要立即获取dom的内容,但是这个时候获取到的还是赋值之前的内容,因为dom还没有更新,所以这个时候可以用this.$nextTick还是处理获取dom内容之后的操作。因为this.$nextTick()是等待dom更新完才会执行的回调。

  相关解决方案