深入学习Vue nextTick的用法及原理


Posted in Javascript onOctober 08, 2019

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>

深入学习Vue nextTick的用法及原理

我们通过运行代码能够看到当我们不在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>

深入学习Vue nextTick的用法及原理

修改代码之后我们可以发现,使用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>

深入学习Vue nextTick的用法及原理

经过修改代码,我们现在可以很容易看出来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()方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
编辑浪子版表单验证类
May 12 Javascript
javascript日期对象格式化为字符串的实现方法
Jan 14 Javascript
innerText 使用示例
Jan 23 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
jQuery中first()方法用法实例
Jan 06 Javascript
jquery中toggle函数交替使用问题
Jun 22 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
Aug 26 Javascript
JS实现漂亮的时间选择框效果
Aug 20 Javascript
js canvas实现QQ拨打电话特效
May 10 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
Jul 13 Javascript
vue实现文件上传功能
Aug 13 Javascript
JavaScript自定义超时API代码实例
Apr 30 Javascript
jQuery 筛选器简单操作示例
Oct 02 #jQuery
jQuery 查找元素操作实例小结
Oct 02 #jQuery
JavaScript 作用域实例分析
Oct 02 #Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 #Javascript
JavaScript 面向对象基础简单示例
Oct 02 #Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 #Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
Oct 02 #Javascript
You might like
一个简单的自动发送邮件系统(一)
2006/10/09 PHP
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
php 把数字转换成汉字的代码
2015/07/21 PHP
深入浅析php json 格式控制
2015/12/24 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
PHP编写RESTful接口
2016/02/23 PHP
php 如何获取文件的后缀名
2016/06/05 PHP
JavaScript 继承详解 第一篇
2009/08/30 Javascript
jquery tab标签页的制作
2010/05/10 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
React实现双向绑定示例代码
2016/09/19 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
javascript json字符串到json对象转义问题
2019/01/22 Javascript
VUE安装使用教程详解
2019/06/03 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
[58:15]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 NB vs Liquid
2018/04/02 DOTA
Python制作数据导入导出工具
2015/07/31 Python
Python实现简单文本字符串处理的方法
2018/01/22 Python
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
pyenv虚拟环境管理python多版本和软件库的方法
2019/12/26 Python
Python vtk读取并显示dicom文件示例
2020/01/13 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
英国玛莎百货美国官网:Marks & Spencer美国
2018/11/06 全球购物
大学生毕业自我鉴定范文
2014/02/03 职场文书
预备党员政审材料
2014/02/04 职场文书
2019广播稿怎么写
2019/04/17 职场文书
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL