24
2020
08

vue $nextTick 作用是什么?

官方解释:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。简单的说就是再DOM操作时,vue的更新是异步的,$nextTick 是用来知道什么时候 DOM 更新完成的。

举例:我们给一个div设置显示隐藏,当点击 button 的时候 #textDiv 先是被渲染出来,接着我们获取 #textDiv 的 html内容


<div id="app">

    <div id="textDiv" v-if="isShow">这是一段文本</div>

    <button @click="getText">获取div内容</button>

</div>

<script>

var app = new Vue({

    el : "#app",

    data:{

        isShow: false

    },

    methods:{

        getText:function(){

            this.isShow= true;

            var text = document.getElementById('textDiv').innnerHTML;

             console.log(text);

        }

    }

})

</script>

这段代码表面上看不会有问题,但实际上点击报错,提示获取不到div元素,这里就涉及到 Vue 异步更新队列。

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。