小白学 VUE 系列nextTick异步更新队列

nextTick异步更新队列

Vue是异步执行DOM更新的,为了数据变化之后等待Vue完成更新DOM,可以在数据变化之后立即使用Vue.nextTickl)方法在当前的回调函数中能获或最新的DOM,如果在组件内部可以使用$nextTick()方法。
Vue在内部尝试对异步队列使用原生的Promise.then、MutationObserver和setmmediate,如果执行环境不支持,会采用setTimeout(fn,0代替。其实就是做了异步延迟执行队列。

例子

 <p ref="msg">{{ nextName}} </p>
<button @click="updateName">更新</button>
 export default {
        name: 'Home',
        components: {},
        data() {
            return {
                nextName:"赵山"
            }
        },

        methods:{
            updateName(){
                this.nextName="李四";
               console.log("直接获取",this.$refs['msg'].innerHTML);//输出赵山
                this.$nextTick(()=>{
                    console.log(this.$refs['msg'].innerHTML);//输出李四
                })

            }
        },

    }

如果要更新dom,需要采用 this.$nextTick 来获取变化后的准确数据。

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。
黑白课堂

黑白课堂 · 技术专家

专业PHP开发

年度VIP 站长创业者玉树凌风每天醒来0收入
查看更多

最新视频课程