Vue中this.$nextTick()的理解与使用方法

更新时间：2022年02月22日 10:27:01 作者：Cirrod

this.$nextTick是在下次dom更新循环之后执行延迟回调,在修改数据之后立即使用这个方法,获取更新后的dom,下面这篇文章主要给大家介绍了关于Vue中this.$nextTick()的理解与使用的相关资料,需要的朋友可以参考下

this.$nextTick()原理：

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。
Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。
首先修改数据，这是同步任务。同一事件循环的所有的同步任务都在主线程上执行，形成一个执行栈，此时还未涉及 DOM 。
然后Vue 开启一个异步队列，并缓冲在此事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。

1.Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。

2.Vue官网

nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后立即使用 $nextTick，则可以在回调中获取更新后的 DOM

new Vue({
  // ...
  methods: {
    // ...
    example: function () {
      // modify data
      this.message = 'changed'
      // DOM is not updated yet
      this.$nextTick(function () {
        // DOM is now updated
        // `this` is bound to the current instance
        this.doSomethingElse()
      })
    }
  }

案例1：修改文本的值

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
</head>
 
<body>
    <div id="app">
        <span id="btn">{{msg}}</span>
        <button @click="updateText">修改文本的值</button>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'hello world!'
        },
        methods: {
            updateText() {
                this.msg = '修改文本的值'
                console.log(this.msg)
                console.log(document.getElementById('btn').innerHTML);
            }
        }
    });
</script>
 
</html>

打开控制台：

可以看到当我点击按钮后，msg数据会响应式的进行更新,但受msg影响的dom元素的文本值没有更新

使用nextTick()改进

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
</head>
 
<body>
    <div id="app">
        <span id="btn">{{msg}}</span>
        <button @click="updateText">修改文本的值</button>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'hello world!'
        },
        methods: {
            updateText() {
                this.msg = '修改文本的值'
                console.log(this.msg)
                this.$nextTick(() => {
                    console.log(document.getElementById('btn').innerHTML);
                });
 
            }
        }
    });
</script>
 
</html>

打开控制台：

可以看到当我点击按钮后，msg数据会响应式的进行更新,但受msg影响的dom元素的文本值也更新了

案例2：获取动态渲染的dom元素

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
</head>
 
<body>
    <div id="app">
        <span id="btn" v-if="isShow">hello world!</span>
        <button @click="show">显示</button>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            isShow: false
        },
        methods: {
            show() {
                this.isShow = true
                console.log(document.getElementById('btn'))
            }
        }
    });
</script>
 
</html>

打开控制台

可以看到当我点击按钮后，通过isShow的v-if的元素成功渲染出来，但是在函数里无法获取通过isShow来决定渲染的dom元素

使用nextTick()改进

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
</head>
 
<body>
    <div id="app">
        <span id="btn" v-if="isShow">hello world!</span>
        <button @click="show">显示</button>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            isShow: false
        },
        methods: {
            show() {
                this.isShow = true
                this.$nextTick(() => {
                    console.log(document.getElementById('btn'))
                })
 
            }
        }
    });
</script>
 
</html>

控制台运行：

可以看到动态的dom元素成功获取

3.等价转换，如果this.$nextTick不起作用时尝试用延时器

                this.$nextTick(() => {
                    dosomething
                })

相当于

                setTimeout(()=>{
                 dosomething
                },0)

4.this.$nextTick的应用场景

nextTick()的回调函数中。created()中使用的方法时，dom还没有渲染，如果此时在该钩子函数中进行dom赋值数据（或者其它dom操作）时无异于徒劳，所以，此时this.$nextTick()就会被大量使用，而与created()对应的是mounted()的钩子函数则是在dom完全渲染后才开始渲染数据，所以在mounted()中操作dom基本不会存在渲染问题。

5.总结

1.nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后立即使用 $nextTick，则可以在回调中获取更新后的 DOM

2.我的理解就是nextTick方法相当于当页面渲染结束的使用再调用nextTick方法，nextTick方法能获取页面最新的dom元素

到此这篇关于Vue中this.$nextTick()的理解与使用的文章就介绍到这了,更多相关Vue this.$nextTick()使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue3使用Suspense优雅地处理异步组件加载的示例代码
Vue3是Vue.js的最新版本,它带来了许多令人兴奋的新特性和改进,其中一个重要的特性是Suspense,它为我们提供了一种优雅地处理异步组件加载和错误处理的方式,本文给大家介绍了Vue3使用Suspense优雅地处理异步组件加载的示例,需要的朋友可以参考下
2024-01-01
vue利用openlayers实现动态轨迹
这篇文章主要为大家介绍了vue利用openlayers实现动态轨迹，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
vue3 setup语法糖下父组件如何调用子组件
这篇文章主要介绍了vue3 setup语法糖下父组件如何调用子组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
Vue实现文本编译详情
这篇文章主要介绍了Vue实现文本编译详情，文章围绕主题展开详细的内容介绍，具有一定的参考价值，感兴趣的小伙伴可以参考一下，希望对你的学习有所帮助
2022-08-08
原生JS实现Vue transition fade过渡动画效果示例
这篇文章主要为大家介绍了原生JS实现Vue transition fade过渡动画效果示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
使用Vue3和Echarts 5绘制带有立体感流线中国地图(推荐收藏!)
最近接到一个需求是做一个中国地图,下面这篇文章主要给大家介绍了关于如何使用Vue3和Echarts 5绘制带有立体感流线中国地图的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-04-04
Vue实现PopupWindow组件详解
这篇文章主要为大家详细介绍了Vue实现PopupWindow组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-04-04
Vue动态加载异步组件的方法
这篇文章主要介绍了Vue动态加载异步组件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
这篇文章主要介绍了VUE使用 wx-open-launch-app 组件开发微信打开APP功能,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-08-08
vue改变对象或数组时的刷新机制的方法总结
这篇文章主要介绍了vue改变对象或数组时的刷新机制的方法总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-04-04