深入学习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 相关文章推荐
JS 分号引起的一段调试问题
Jun 18 Javascript
关于JS数组追加数组采用push.apply的问题
Jun 09 Javascript
JavaScript中几种排序算法的简单实现
Jul 29 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
Jan 23 Javascript
基于jQuery实现点击列表加载更多效果
May 31 Javascript
简易的JS计算器实现代码
Oct 18 Javascript
vue2.0开发实践总结之入门篇
Dec 06 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 Javascript
Vue实战之vue登录验证的实现代码
Oct 31 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
Mar 07 Javascript
测量JavaScript函数的性能各种方式对比
Apr 27 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
PHP开发大型项目的一点经验
2006/10/09 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
PHP中大于2038年时间戳的问题处理方案
2015/03/03 PHP
分享PHP守护进程类
2015/12/30 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
JavaScript 事件的一些重要说明
2009/10/25 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
单击复制文字兼容各浏览器的完美解决方案
2013/07/04 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
详解AngularJS中的作用域
2015/06/17 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
2018/08/31 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
js实现特别简单的钟表效果
2020/09/14 Javascript
在Python中进行自动化单元测试的教程
2015/04/15 Python
Python中实现参数类型检查的简单方法
2015/04/21 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
Python numpy.array()生成相同元素数组的示例
2018/11/12 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
DVF官方网站:美国时装界尊尚品牌
2017/08/29 全球购物
美国五金商店:Ace Hardware
2018/03/27 全球购物
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
班主任工作经验交流会总结
2015/11/02 职场文书
小学科学课教学反思
2016/02/23 职场文书
检讨书格式
2019/04/25 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书