Vue中的nextTick作用和几个简单的使用场景


Posted in Vue.js onJanuary 25, 2021

目的

理解下 nextTick 的作用和几个简单的使用场景

正文

起什么作用?

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

我想各位都知道或了解 Vue 的渲染流程,Vue 在监听到数据变化后会重新渲染,配合 VDOM 更新真实的 DOM,而 nextTick 的触发时机就是在调用方法后的第一次重新渲染完毕后。

Vue中的nextTick作用和几个简单的使用场景

如何使用?

有两种使用方法,一种是传入回调,另一种是 Promise,官方使用示例如下:

// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
 // DOM 更新了
})

// 作为一个 Promise 使用 (2.1.0 起新增,详见接下来的提示)
Vue.nextTick()
 .then(function () {
 // DOM 更新了
 })

如果在 SPA(单文件组件) 中,可能是这个样子

<template>
 <div id="test">{{msg}}</div>
</template>

<script>
export default {
 name: 'app',
 data() {
 return {
  "msg": "Hello World!"
 }
 },
 method() {
 this.msg = "Hi World!";
 this.$nextTick(() => {
  console.log('DOM updated:', document.getElementById('test').innerHTML)
 });
 }
}
</script>

有什么使用场景?

需要等待渲染完成后执行的一些方法

初始化绑定或操作 DOM

比如在 created 和 mounted 回调中,需要操作渲染好的 DOM,则需要在 nextTick 中执行相关逻辑,这在必须使用一些老的需要绑定 DOM 的库时很有用。

比如,在加载 UEditor 时,可能会这样玩

<template>
<script id="container" name="content" type="text/plain"> 这里写你的初始化内容 </script>
</template>
<script>
export default {
 mounted() {
  this.nextTick(() => {
   var ue = UE.getEditor('container');
  });
 }
}

获取元素宽度

在 Vue 中获取元素宽度有两种方式,第一种是通过 $refs[ref名称].style.width,第二种可以使用传统操作 DOM 的方式获取,但这两者要获取到准确的元素宽度,则需要在 DOM 渲染完毕后执行。

<template>
<p ref="myWidth" v-if="showMe">{{ message }}</p> <button @click="getMyWidth">获取p元素宽度</button>
</template>
<script>
export default {
 data() {
 return {
  message: "Hello world!",
  showMe: false,
 },
 methods: {
  getMyWidth() {
  this.showMe = true;
  //this.message = this.refs.myWidth.offsetWidth;  //报错 TypeError: this.refs.myWidth is undefined 
  this.nextTick(()=>{
  //dom元素更新后执行,此时能拿到p元素的属性   this.message = this.refs.myWidth.offsetWidth; })
  }
 }
 }
}
</script>

总结

虽说 Vue 的设计理念并不建议我们去直接操作 DOM,但有些场景下出现了特别令人迷惑的问题,理解 Vue 的渲染逻辑后,使用 nextTick() 可以解决。

以上就是如何使用Vue中的nextTick的详细内容,更多关于使用vue中的nextTick的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
vue+openlayers绘制省市边界线
Dec 24 Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
vue实现可拖拽的dialog弹框
May 13 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
vue修饰符.capture和.self的区别
Apr 22 Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 #Vue.js
如何在Vue项目中添加接口监听遮罩
Jan 25 #Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 #Vue.js
vue 计算属性和侦听器的使用小结
Jan 25 #Vue.js
vue keep-alive的简单总结
Jan 25 #Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 #Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 #Vue.js
You might like
特转载一高手总结PHP学习资源和链接.
2006/12/05 PHP
c#中的实现php中的preg_replace
2009/12/21 PHP
PHP 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
深入php define()函数以及defined()函数的用法详解
2013/06/05 PHP
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
php桥接模式应用案例分析
2019/10/23 PHP
使用JQuery进行跨域请求
2010/01/25 Javascript
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
jquery获取复选框被选中的值
2014/03/22 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
2015/04/13 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
js实现纯前端的图片预览
2016/04/27 Javascript
详解vue-router基本使用
2017/04/18 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
动态内存分配导致影响Javascript性能的问题
2018/12/18 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
Python制作Windows系统服务
2017/03/25 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
python 重定向获取真实url的方法
2018/05/11 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
Django 批量插入数据的实现方法
2020/01/12 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
集团薪酬管理制度
2014/01/13 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
2015学校图书管理员工作总结
2015/05/11 职场文书
无罪辩护词范文
2015/05/21 职场文书
2019送给家人们的中秋节祝福语
2019/08/15 职场文书
mysql事务隔离级别详情
2021/10/24 MySQL
mysql字段为NULL索引是否会失效实例详解
2022/05/30 MySQL
Python实现仓库管理系统
2022/05/30 Python