快捷導(dǎo)航

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

更新時(shí)間：2022年02月22日 10:27:01 作者：Cirrod

this.$nextTick是在下次dom更新循環(huán)之后執(zhí)行延遲回調(diào),在修改數(shù)據(jù)之后立即使用這個(gè)方法,獲取更新后的dom,下面這篇文章主要給大家介紹了關(guān)于Vue中this.$nextTick()的理解與使用的相關(guān)資料,需要的朋友可以參考下

this.$nextTick()原理：
1.Vue 實(shí)現(xiàn)響應(yīng)式并不是數(shù)據(jù)發(fā)生變化之后 DOM 立即變化，而是按一定的策略進(jìn)行 DOM 的更新。
2.Vue官網(wǎng)
3.等價(jià)轉(zhuǎn)換，如果this.$nextTick不起作用時(shí)嘗試用延時(shí)器
4.this.$nextTick的應(yīng)用場景
5.總結(jié)

this.$nextTick()原理：

Vue 實(shí)現(xiàn)響應(yīng)式并不是數(shù)據(jù)發(fā)生變化之后 DOM 立即變化，而是按一定的策略進(jìn)行 DOM 的更新。
Vue 在修改數(shù)據(jù)后，視圖不會(huì)立刻更新，而是等同一事件循環(huán)中的所有數(shù)據(jù)變化完成之后，再統(tǒng)一進(jìn)行視圖更新。
首先修改數(shù)據(jù)，這是同步任務(wù)。同一事件循環(huán)的所有的同步任務(wù)都在主線程上執(zhí)行，形成一個(gè)執(zhí)行棧，此時(shí)還未涉及 DOM 。
然后Vue 開啟一個(gè)異步隊(duì)列，并緩沖在此事件循環(huán)中發(fā)生的所有數(shù)據(jù)改變。如果同一個(gè) watcher 被多次觸發(fā)，只會(huì)被推入到隊(duì)列中一次。

1.Vue 實(shí)現(xiàn)響應(yīng)式并不是數(shù)據(jù)發(fā)生變化之后 DOM 立即變化，而是按一定的策略進(jìn)行 DOM 的更新。

2.Vue官網(wǎng)

nextTick 是在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)，在修改數(shù)據(jù)之后立即使用 $nextTick，則可以在回調(diào)中獲取更新后的 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>

打開控制臺(tái)：

可以看到當(dāng)我點(diǎn)擊按鈕后，msg數(shù)據(jù)會(huì)響應(yīng)式的進(jìn)行更新,但受msg影響的dom元素的文本值沒有更新

使用nextTick()改進(jìn)

<!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>

打開控制臺(tái)：

可以看到當(dāng)我點(diǎn)擊按鈕后，msg數(shù)據(jù)會(huì)響應(yīng)式的進(jìn)行更新,但受msg影響的dom元素的文本值也更新了

案例2：獲取動(dòng)態(tài)渲染的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>

打開控制臺(tái)

可以看到當(dāng)我點(diǎn)擊按鈕后，通過isShow的v-if的元素成功渲染出來，但是在函數(shù)里無法獲取通過isShow來決定渲染的dom元素

使用nextTick()改進(jìn)

<!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>

控制臺(tái)運(yùn)行：

可以看到動(dòng)態(tài)的dom元素成功獲取

3.等價(jià)轉(zhuǎn)換，如果this.$nextTick不起作用時(shí)嘗試用延時(shí)器

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

相當(dāng)于

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

4.this.$nextTick的應(yīng)用場景

nextTick()的回調(diào)函數(shù)中。created()中使用的方法時(shí)，dom還沒有渲染，如果此時(shí)在該鉤子函數(shù)中進(jìn)行dom賦值數(shù)據(jù)（或者其它dom操作）時(shí)無異于徒勞，所以，此時(shí)this.$nextTick()就會(huì)被大量使用，而與created()對(duì)應(yīng)的是mounted()的鉤子函數(shù)則是在dom完全渲染后才開始渲染數(shù)據(jù)，所以在mounted()中操作dom基本不會(huì)存在渲染問題。