1. Toy模板网首页
  2. > Toy博客

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

9月前 作者：春暖花开., 分类：Toy博客 阅读(36) 违法举报

这篇具有很好参考价值的文章主要介绍了Vue06/Vue中this.$nextTick( ) 的用法及详细介绍。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一.$nextTick

语法:

this.$nextTick( 箭头函数体 )

 文章来源地址https://www.toymoban.com/news/detail-589913.html

this.nexttick,vue.js,javascript,前端

作用: 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

到了这里，关于Vue06/Vue中this.$nextTick( ) 的用法及详细介绍的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 浅谈Vue中的NextTick。

            等待下一次 DOM 更新刷新的工具方法。（在修改数据后使用这个方法，能获取更新的dom）         当你在 Vue 中更改响应式状态时，最终的 DOM 更新并不是同步生效 的，而是由 Vue 将它们缓存在一个队列中，直到下一个“tick”才一起执行。这样是为了确保每个组

    2024年01月16日
    浏览(37)
  • Vue $nextTick

    Vue $nextTick

    我们用一个例子来说明$nextTick的作用： 我们用一个变量showIpt来控制input框的显示和隐藏，默认是隐藏。 我们点击一个按钮后显示这个输入框的同时，input还要自动获取焦点。 但是我们点击按钮过后并没有生效。    为什么？this.showIpt=true执行过后接着就是执行this.$refs.ipt.fo

    2024年02月08日
    浏览(33)
  • vue3 nextTick()应用

    vue3 nextTick()应用

    在Vue3中，可以使用 nextTick 函数来延迟执行某些操作，这些操作会在下一次DOM更新周期之后执行。这个函数通常用于在数据更新后，等待DOM更新之后执行一些操作，比如获取DOM元素的尺寸、位置等。 例如，以下一个切换元素显示的组件： 打印结果： 如果show是true，那么conte

    2024年02月04日
    浏览(39)

  • vue中的nextTick的作用

    vue里面，常用的事件onMounted里，总喜欢用一个nextTick： 这个东西有啥用呢？我总搞不懂。 今天我忽然有点明白了。这是一个跟前面语句有关的方法。意思是，等前面的都执行完了，再执行nextTick里面的方法。比如说，页面上有一块内容，正常情况下是隐藏的，满足条件下才显

    2024年02月11日
    浏览(35)

  • Vue 中的 $nextTick 深度解毒

    $nextTick 的底层原理涉及Vue的更新机制和异步队列。 vue 的视图更新是异步的，数据变动后视图的更新是异步的，整个异步额实现，它最核心的 api 就是 nextTick。 Vue的更新机制是基于异步的，在修改数据后，Vue会将DOM更新操作放在异步队列中，并在下一个事件循环中执行更新。

    2024年02月17日
    浏览(40)
  • vue3使用nextTick

    vue3使用nextTick

    Vue之nextTick原理 nextTick原理 发现nextTick必须放在修改一个响应式数据之后，才会在onUpdated之后被调用，如果nextTick是放在所有对响应式数据修改之前，则nextTick里面的回调函数会在onBeforeUpdate方法执行前就被调用了。可是nextTick必须等到onUpdated执行完成之后执行，才能拿到渲染得

    2024年02月05日
    浏览(35)
  • vue3中使用nextTick

    vue3中使用nextTick

    1、引入nextTick 2、使用

    2024年02月09日
    浏览(31)
  • Vue3 nextTick()使用教程

    Vue3 nextTick()使用教程

    简单定义：等待下一次 DOM 更新刷新的工具方法 类型： 需求：一个表单提交，父组件2中定义一个方法，用于验证父组件1中表单 思路：父组件2中要拿到父组件1中form 方法： 1.在父组件1中应用nextTick(),拿到ref，存入vuex 2.在父组件2中，通过vuex拿到传过来的ref，然后通过validat

    2024年02月13日
    浏览(31)
  • Vue中的$nextTick有什么作用？

    Vue中的$nextTick有什么作用？

    官方对其的定义 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM 什么意思呢？ 我们可以理解成， Vue  在更新  DOM  时是异步执行的。当数据发生变化， Vue 将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后

    2024年02月22日
    浏览(38)
  • Vue学习笔记5-- nextTick | Vue封装的过渡与动画

    Vue学习笔记5-- nextTick | Vue封装的过渡与动画

    语法： this.$nextTick(回调函数） 作用：在下一次DOM更新结束后执行其指定的回调。 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数 在一个函数中，一般要函数执行完之后才会更新DOM，但有些涉及到DOM的操作比如获取焦点 this.

    2024年01月17日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包