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中通过render函数给子组件设置ref操作
Nov 17 Vue.js
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
vue 通过base64实现图片下载功能
Dec 19 Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
vue打包时去掉所有的console.log
Apr 10 Vue.js
vue使用watch监听属性变化
Apr 30 Vue.js
vue3不同环境下实现配置代理
May 25 Vue.js
vue css 相对路径导入问题级踩坑记录
Jun 05 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/06 PHP
PHP 开发环境配置(Zend Server安装)
2010/04/28 PHP
Windows下的PHP安装pear教程
2014/10/24 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
PHP耦合设计模式实例分析
2018/08/08 PHP
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
2010/01/07 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
纯javascript移动优先的幻灯片效果
2015/11/02 Javascript
jquery自定义插件开发之window的实现过程
2016/05/06 Javascript
使用Javascript监控前端相关数据的代码
2016/10/27 Javascript
VueJS全面解析
2016/11/10 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
Vue.js实现模拟微信朋友圈开发demo
2017/04/20 Javascript
javascript按钮禁用和启用的效果实例代码
2017/10/29 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
jQuery实现移动端扭蛋机抽奖
2020/11/08 jQuery
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
[39:19]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第二场 11.26
2020/11/30 DOTA
python多线程抓取天涯帖子内容示例
2014/04/03 Python
Python实现二维数组按照某行或列排序的方法【numpy lexsort】
2017/09/22 Python
python实现人脸识别代码
2017/11/08 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
《夹竹桃》教学反思
2014/04/20 职场文书
热爱祖国的演讲稿
2014/05/04 职场文书
我的中国梦演讲稿1000字
2014/08/19 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
中小学校园安全广播稿
2014/09/29 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers
Django Paginator分页器的使用示例
2021/06/23 Python