Vue06/Vue中this.$nextTick( ) 的用法及详细介绍

一.$nextTick

语法:

this.$nextTick( 箭头函数体 )

 

作用: this.$nextTick这个方法作用是当数据被修改后使用这个方法 回调函数获取更新后的dom再渲染出来

注意:

1.data改变，更新DOM是异步的

2.获取更新后的DOM方法 this.$nextTick(() => { 需要更新的DOM } )

说明: 

1.$nextTick是一个异步微任务，等待当前函数的dom渲染结束后执行

2.$nextTick 类似于一个非常高级的定时器 自动追踪DOM更新 更新好了就触发

应用场景:

DOM更新是异步的 Vue 响应式的特征  修改数据后 页面会自动更新 而更新DOM这个操作是异步的  

这个时候使用 this.$nextTick( 回调函数 ) 回调函数会在下一次 DOM更新完毕后执行

详细:

1.this.$nextTick 将回调延迟到下次DOM更新循环之后执行 在修改数据之后立即使用他 

2.this$nextTick 跟全局方法 vue.nextTick一样 不同的是 回调的this 自动绑定到调用他的实列上

3.总的来说 假设我们更改了某个dom元素内部的文本，而这时候我们想直接打印这个更改之后的文本是需要 dom更新之后才会实现的 就像我们把将要打印输出的代码放在 setTimeout(fn, 0) 中

介绍: 

vue在修改数据后 视图(DOM)不会立刻更新，而是等同一事件循环中的所有数据变化完成之后 在统一进行视图更新 所以 在修改数据更新立马读取DOM是获取不到新数据的 ， 获取到的原来的DOM函数

使用newxtTick 可以获得DOM更新后的数据 在下次DOM更新之后vue会回调nextTick指定的函数 可以在修改数据之后立即使用这个nextTick方法 在指定的函数里获取更新后的DOM