脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue中的nextTick

谈谈Vue中的nextTick

 更新时间：2021年04月25日 14:55:51   作者：有梦想的咸鱼前端  
Vue.nextTick是Vue官方给我们提供的一个API（方法），作用是在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM

当数据发生变化之后，DOM视图并不会立即更新，如果我们在发生变化之后立马去获取某个节点或者某个节点的值，很有可能结果就是undefined；因为Vue实现响应式并不是数据发生变化之后DOM立即变化，而是按一定的策略进行DOM的更新；

来看一个小demo：

App.vue

<template>
  <div id="app">
        <div ref="message">{{msg}}</div>
        <div v-if="msg1">{{msg1}}</div>
        <button @click="changeMsg">Change the Message</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      msg:"Hello Vue",
      msg1: '',
    }
  },
  methods:{
    changeMsg(){
      this.msg='hello world';
      this.msg1=this.$refs.message.innerHTML;
       console.log("更新DOM之前:"+this.msg1)
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

我们通过运行代码能够看到当我们不在this.$nextTick方法里面进行DOM操作的时候，this.$refs.message.innerHTML的值存储的还是之前的初始值；

修改代码：

App.vue

<template>
  <div id="app">
        <div ref="message">{{msg}}</div>
        <div v-if="msg1">{{msg1}}</div>
        <button @click="changeMsg">Change the Message</button>
  </div>
</template>

<script>
export default {
  name: 'App',  
  data(){
    return {
      msg:"Hello Vue",
      msg1: '',
    }
  },
  methods:{
    changeMsg(){
      this.msg='hello world';
      // this.msg1=this.$refs.message.innerHTML;
      //  console.log("更新DOM之前:"+this.msg1)
        this.$nextTick(()=>{
          this.msg1=this.$refs.message.innerHTML;
          console.log("更新DOM之后:"+this.msg1)
        })
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

修改代码之后我们可以发现，使用this.$nextTick很容易的就接收到了更新后的值，正如官网解释：在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM；

再来修改代码对比一下：

App.vue

<template>
  <div id="app">
        <div ref="message">{{msg}}</div>
        <div v-if="msg1">{{msg1}}</div>
        <button @click="changeMsg">Change the Message</button>
  </div>
</template>

<script>
export default {
  name: 'App',  
  data(){
    return {
      msg:"Hello Vue",
      msg1: '',
    }
  },
  methods:{
    changeMsg(){
      this.msg='hello world';
      this.msg1=this.$refs.message.innerHTML;
       console.log("更新DOM之前:"+this.msg1)
        this.$nextTick(()=>{
          this.msg1=this.$refs.message.innerHTML;
          console.log("更新DOM之后:"+this.msg1)
        })
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

经过修改代码，我们现在可以很容易看出来this.$nextTick(callback)的作用，callback是回调函数也就是我们要进行操作DOM的事情；

应用场景：

  • 在vue的生命周期钩子函数created()中进行DOM操作的时候一定要把DOM操作放入到this.$nextTick()中；
  • 因为在created钩子函数触发的时候，DOM是没有进行渲染的；DOM没有进行渲染，然后进行DOM操作无疑是徒劳的；
  • 所以我们在created中进行DOM操作的时候，一定要将DOM操作放入到this.$nextTick()中；
  • 与之相反的是mounted，因为当触发mounted的时候，DOM的挂载和渲染都已经完成了，所以在mounted中进行DOM操作是不会有任何问题的；

因为DOM更新是异步的，像v-if指令判断增删DOM元素，我们在方法中给变量赋值的时候，如果不使用this.$nextTick()，我们很有可能拿到的还是初始值，如果想拿到更新后的值，需要使用this.$nextTick（）方法

以上就是Vue中的nextTick的详细内容，更多关于Vue中的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • vue递归组件实现树形结构

    vue递归组件实现树形结构

    这篇文章主要为大家详细介绍了vue递归组件实现树形结构，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-09-09
  • vue封装Animate.css动画库的使用方式

    vue封装Animate.css动画库的使用方式

    这篇文章主要介绍了vue封装Animate.css动画库的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • vue面试常考之computed是如何实现的

    vue面试常考之computed是如何实现的

    对于每天都在用的计算属性(computed)，小编猜大家肯定也想窥探其奥妙与原理对吧，所以这篇文章就来讲讲computed是如何实现的吧，感兴趣的小伙伴可以学习一下
    2023-08-08
  • django+vue实现注册登录的示例代码

    django+vue实现注册登录的示例代码

    这篇文章主要介绍了django+vue实现注册登录的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • Vue开发手册Function-based API RFC

    Vue开发手册Function-based API RFC

    这篇文章主要为大家介绍了Vue开发手册Function-based API RFC使用示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • 关于antd中select搜索框改变搜索值的问题

    关于antd中select搜索框改变搜索值的问题

    这篇文章主要介绍了关于antd中select搜索框改变搜索值的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-04-04
  • Vue兼容ie9的问题全面解决方案

    Vue兼容ie9的问题全面解决方案

    这篇文章主要介绍了Vue兼容ie9的问题全面解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • Vue3插槽(slot)使用方法详解

    Vue3插槽(slot)使用方法详解

    在VUE开发项目的过程中,插槽<slot>是重要的承载分发内容的出口,下面这篇文章主要给大家介绍了关于Vue3插槽(slot)使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • 在项目vue中使用echarts的操作步骤

    在项目vue中使用echarts的操作步骤

    这篇文章主要介绍了在项目vue中使用echarts的操作步骤，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue3父子同信的双向数据的项目实现

    vue3父子同信的双向数据的项目实现

    我们知道的是，父传子的通信，和子传父的通信，那如何实现父子相互通信的呢，本文就来详细的介绍一下，感兴趣的可以了解一下
    2023-08-08

最新评论