vue.nextTick()是什么及怎么用

发布时间:2022-04-25 10:26:32 作者:iii
来源:亿速云 阅读:164

这篇文章主要介绍了vue.nextTick()是什么及怎么用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue.nextTick()是什么及怎么用文章都会有所收获,下面我们一起来看看吧。

概念

在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,获取更新后的DOM

简单理解:

为了去解决数据更新了但是视图不更新的问题,当数据更新了,在DOM渲染后,自动执行该函数

原理

Vue是异步执行dom更新的,一旦观察到数据变化,Vue就会开启一个队列,然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次,只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。而在下一个事件循环时,Vue会清空队列,并进行必要的DOM更新。
当你设置 vm.someData = ‘new value’,DOM 并不会马上更新,而是在异步队列被清除,也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此时你想要根据更新的 DOM 状态去做某些事情,就会出现问题。。为了在数据变化之后等待 Vue 完成更新 DOM ,可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

举例

<template>
  <div>
    <button ref="btn" @click="handleBtn()">{{ message }}</button>
  </div>
</template>

<script>
export default {
  data(){
    return{
      message:'这个是原始值'
    }
  },
  methods:{
    handleBtn:function(){
    let that=this
    that.message='修改后的值'
    console.log(that.$refs.btn.innerText);//这里输出的还是原始值
  }
  }
}
</script>

<style>

</style>

通过例子可以看到这样的话最终输出的值还是原来的值,下面再看一下使用this.$nextTick()会发生什么?

<template>
  <div>
    <button ref="btn" @click="handleBtn()">{{ message }}</button>
  </div>
</template>

<script>
export default {
  data(){
    return{
      message:'这个是原始值'
    }
  },
  methods:{
    handleBtn:function(){
    let that=this
    that.message='修改后的值'
    this.$nextTick(function(){
      console.log(that.$refs.btn.innerText);  //这里输出的是修改后的值
    })
  }
  }
}
</script>

<style>

</style>

通过这个例子就可以明显的看到this.$nextTick()的作用。

注意:

vue实现响应并不是数据发生变化之后DOM立即变化。而是按照一定的策略进行DOM的更新,在使用this.$nextTick()以后,就可以在他的回调中获取到更新后的DOM

应该什么时候使用vue.$nextTick()呢?

<template>
  <div>
    {{ message }}
    <button @click="changeText()">测试</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "这个是原始值",
    };
  },
  methods: {
    changeText () {
      let that = this;
      this.message = "这是修改后的值";
      that.$nextTick(function(){
        let txt=document.getElementById('btn').innerText
        console.log(txt);
        txt==='这个是原始值'? console.log('data的值发生改变时DOM的值没有立即更新') : console.log('data的值发生改变时DOM的值立刻更新了');
      })
    },
  },
};
</script>

<style>
</style>

关于“vue.nextTick()是什么及怎么用”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“vue.nextTick()是什么及怎么用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. HBase导入与数据恢复实践
  2. HBase导入与数据安全性增强

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

上一篇:C++的math函数如何用

下一篇:VUE怎么开发分布式医疗挂号系统的医院设置页面

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》