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

2024-11-27 06:53:23

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()使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue中$nextTick的用法讲解

vue是非常流行的框架,他结合了angular和react的优点,从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框架.本人比较喜欢用之.在我们用vue时,我们经常用到一个方法是this.$nextTick,相信你也用过.我常用的场景是在进行获取数据后,需要对新视图进行下一步操作或者其他操作时,发现获取不到dom.因为赋值操作只完成了数据模型的改变并没有完成视图更新.在这个时候我们需要用到本章介绍的函数. 虽然 Vue.js 通常鼓励开发人员沿着"数据驱动"的方式思考,避免
详解vue中$nextTick和$forceUpdate的用法

1.$nextTick vm.$nextTick( [callback] ) this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行,在修改数据之后立即使用它,然后等待 DOM 更新.它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上. 应用场景: 1. 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中. 2. 因为在created()钩子函数执行的时候DOM 其实并未
Vue中this.$nextTick的作用及用法

Vue实现响应式后DOM的变化 data对象中数据改变是如何追踪的? vue将遍历data对象中所有的属性,并通过 Object.defineProperty 把这些属性全部转为 getter/setter:但是我们是没有办法看到 getter/setter的,但是在内部它们让 Vue 能够追踪依赖,在属性被访问和修改时通知变更. 每个组件都对应一个 watcher 实例,它会在组件渲染的过程中把"接触"过的数据属性记录为依赖.之后当依赖项的 setter 触发时,会通知 watche
全面解析Vue中的$nextTick

当在代码中更新了数据,并希望等到对应的Dom更新之后,再执行一些逻辑.这时,我们就会用到$nextTick funcion callback(){ //等待Dom更新,然后搞点事. } $nextTick(callback): 官方文档对nextTick的解释是: 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 那么,Vue是如何做的这一点的,是不是在调用修改Dom的Api之后(appendChild, textContent = "xxxx
Vue中this.$nextTick()的理解与使用方法

目录 this.$nextTick()原理: 1.Vue实现响应式并不是数据发生变化之后DOM立即变化,而是按一定的策略进行DOM的更新. 2.Vue官网 3.等价转换,如果this.$nextTick不起作用时尝试用延时器 4.this.$nextTick的应用场景 5.总结 this.$nextTick()原理: Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新. Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之
简单理解Vue中的nextTick方法

Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一.示例先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用. 模板 <div class="app"> <div ref="msgDiv">{{msg}}</div> <div v-if="msg1&q
一文了解Vue中的nextTick

Vue中的 nextTick 涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于 nextTick 的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下 nextTick . 一.示例先来一个示例了解下关于Vue中的DOM更新以及 nextTick 的作用. 模板 <div class="app"> <div ref="msgDiv">{{msg}}</div> <div v-if=&quo
Vue中的nextTick作用和几个简单的使用场景

目的理解下 nextTick 的作用和几个简单的使用场景正文起什么作用? 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 我想各位都知道或了解 Vue 的渲染流程,Vue 在监听到数据变化后会重新渲染,配合 VDOM 更新真实的 DOM,而 nextTick 的触发时机就是在调用方法后的第一次重新渲染完毕后. 如何使用? 有两种使用方法,一种是传入回调,另一种是 Promise,官方使用示例如下: // 修改数据 vm.msg = 'H
Vue中this.$nextTick()的具体使用

目录 1.官网说法 2.DOM 更新 3.获取更新后的 DOM 4.小结:this.$nextTick()的使用场景 1.官网说法在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 核心点有2个:DOM 更新和获取更新后的 DOM. DOM 更新,可以理解为:Vue 的DOM更新机制,那 Vue 的DOM更新机制是什么? 2.DOM 更新首先,我们要知道:Vue实现响应式并不是数据发生变化之后DOM立即变化,而是异步执行DOM更新的. 通过代
从源码里了解vue中的nextTick的使用

今天做了一个需求,场景是这样的: 在页面拉取一个接口,这个接口返回一些数据,这些数据是这个页面的一个浮层组件要依赖的,然后我在接口一返回数据就展示了这个浮层组件,展示的同时,上报一些数据给后台(这些数据就是父组件从接口拿的),这个时候,神奇的事情发生了,虽然我拿到数据了,但是浮层展现的时候,这些数据还未更新到组件上去. 父组件: <template> ..... <pop ref="pop" :name="name"/> </templ
浅析vue中的nextTick

背景 vue是异步渲染的,当data改变之后,DOM不会立刻被渲染,页面渲染时会将data的修改做整合,多次data修改只会做整合最后一次性渲染出来,这也是异步渲染的原因.只有异步渲染才可以实现整合操作. 例子 methods: { update() { for (let i = 0; i < 10; i++) { this.testNum = this.testNum + i; } }, }, 在你的 Vue 视图中, testNum 会发生变化.不过需要注意的是这个变化的过程,虽然我们把 f
谈谈Vue中的nextTick

当数据发生变化之后,DOM视图并不会立即更新,如果我们在发生变化之后立马去获取某个节点或者某个节点的值,很有可能结果就是undefined:因为Vue实现响应式并不是数据发生变化之后DOM立即变化,而是按一定的策略进行DOM的更新: 来看一个小demo: App.vue <template> <div id="app"> <div ref="message">{{msg}}</div> <div v-if=&qu
Vue中对watch的理解(关键是immediate和deep属性)

目录 watch是什么? watch的使用 watch是什么? watch:侦听器,是Vue实例的一个属性,是用来响应数据的变化,需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的. watch的使用 watch基础语法 watch: { 被监听的数据: { handler(数据改变后的值, 数据改变之前的值) { 相关代码逻辑... } } } 被监听的数据:data中定义的数据: 数据改变后的值:该数据改变后