$nextTick 的原理和使用的场景
1.使用原理1) vue是异步执行dom更新的,一旦观察到数据变化,vue就会开启一个队列,然后把在同一事件循环当中观察到数据变化的watcher推送进这个队列,如果这个watcher被触发多次,只会被推送到队列一次,这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和dom操作,这样可以提高渲染效率。2) 如果要获取更新后的dom元素,可以使用vue内置的$nextTick方法,参数是一个函数
·
1.使用原理
1) vue是异步执行dom更新的,一旦观察到数据变化,vue就会开启一个队列,然后把在同一事件循环当中观察到数据变化的watcher推送进这个队列,如果这个watcher被触发多次,只会被推送到队列一次,这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和dom操作,这样可以提高渲染效率。
2) 如果要获取更新后的dom元素,可以使用vue内置的$nextTick方法,参数是一个函数。它的作用类似setTimeout,进行执行异步的操作。
2.应用
vue中的nextTick主要用于处理数据动态变化后,DOM还未及时更新的问题,用nextTick可以获取数据更新后最新dom的变化。
3.场景:
1)第三方插件,在vue生成的某些dom动态发生变化时重新应用该插件。
2)视图更新之后,基于新的视图进行操作。
更多推荐
已为社区贡献2条内容
所有评论(0)