JavaScript
JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlex脚本加解密web2.0XML/RSS网页编辑器相关技巧安全相关网页播放器DartVue.js

谈谈Vue中的nextTick

发布时间：2022-04-16 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了谈谈Vue中的nextTick，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

当数据发生变化之后，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中的nextTick全部内容，希望文章能够帮你解决谈谈Vue中的nextTick所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：Vue
猜你在找的JavaScript相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新JavaScript教程
热门JavaScript教程