深入学习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 相关文章推荐
javascript采用数组实现tab菜单切换效果
Dec 12 Javascript
JavaScript自定义事件介绍
Aug 29 Javascript
用js模拟struts2的多action调用示例
May 19 Javascript
jQuery.holdReady()方法用法实例
Dec 27 Javascript
jQuery中on()方法用法实例详解
Feb 06 Javascript
浅析javascript中函数声明和函数表达式的区别
Feb 15 Javascript
jquery实现全选功能效果的实现代码
May 05 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
详解微信小程序设置底部导航栏目方法
Jun 29 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
Bootstrap栅格系统的使用详解
Oct 30 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
Jul 06 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脚本的10个技巧(6)
2006/10/09 PHP
通过文字传递创建的图形按钮
2006/10/09 PHP
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
yii框架表单模型使用及以数组形式提交表单数据示例
2014/04/30 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
你未必知道的JavaScript和CSS交互的5种方法
2014/04/02 Javascript
jquery复选框checkbox实现删除前判断
2014/04/20 Javascript
JavaScript实现简单获取当前网页网址的方法
2015/11/09 Javascript
JS获取文件大小方法小结
2015/12/08 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
jQuery实现的无限级下拉菜单功能示例
2016/09/12 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
vue中使用localstorage来存储页面信息
2017/11/04 Javascript
nodejs 如何手动实现服务器
2018/08/20 NodeJs
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
Nodejs核心模块之net和http的使用详解
2019/04/02 NodeJs
layui switch 开关监听 弹出确定状态转换的例子
2019/09/21 Javascript
H5实现手机拍照和选择上传功能
2019/12/18 Javascript
python中zip和unzip数据的方法
2015/05/27 Python
详细介绍Python的鸭子类型
2016/09/12 Python
python pygame实现五子棋小游戏
2020/10/26 Python
如何用OpenCV -python3实现视频物体追踪
2019/12/04 Python
python入门之井字棋小游戏
2020/03/05 Python
对Pytorch 中的contiguous理解说明
2021/03/03 Python
西尔斯百货官网:Sears
2016/09/06 全球购物
介绍一下Linux文件的记录形式
2013/09/29 面试题
后勤采购员岗位职责
2013/12/19 职场文书
银行优秀员工事迹
2014/02/06 职场文书
优秀护士先进事迹
2014/05/08 职场文书