Vue.nextTick 和 this.$nextTick 的使用

最新推荐文章于 2022-11-04 10:51:36 发布

菜同学

最新推荐文章于 2022-11-04 10:51:36 发布

阅读量762

点赞数

分类专栏： Vue 文章标签： nextTick vue 使用

本文链接：https://blog.csdn.net/qq_41530816/article/details/96110572

版权

Vue 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

定义： 在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即调用这个函数，获取更新后的DOM
简而言之就是 数据更新，在DOM中渲染，立即执行这个函数
created() 钩子函数中进行DOM操作的 js 代码必须放在 Vue.nextTick() 中，因为此时 DOM 还未进行渲染，对DOM进行操作是不起作用的

<template>
  <div class="vfor">
    <div ref="container" style="margin:20px auto">{{msg}}</div>
    <div v-if="msg1">msg1: {{msg1}}</div>
    <div v-if="msg2" style="margin:20px auto">msg2: {{msg2}}</div>
    <div v-if="msg3">msg3: {{msg3}}</div>
    <button type="button" class="btn btn-outline-primary" @click="changeMsg" style="margin-top:20px">change msg</button>
  </div>
</template>
<script>
export default {
  methods:{
    changeMsg(){
      this.msg = "updated~~~~~~~~ bad bad bad"
      this.msg1 = this.$refs.container.innerHTML
      this.$nextTick(()=>{
        this.msg2 = this.$refs.container.innerHTML;
      })
      this.msg3 = this.$refs.container.innerHTML

    }
  },
  data(){
    return{
      msg:"good morning",
      msg1:'',
      msg2:'',
      msg3:''
    }
  }
}
</script>

页面效果展示
在这里插入图片描述
点击按钮后

从上图中可以看出来 msg 和 msg2 改变了，msg1 和 msg3 仍然是 msg 未改变前的值
深入了解参考官网
https://cn.vuejs.org/v2/guide/reactivity.html#异步更新队列
 https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats