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组件生命周期运行原理解析
Nov 25 Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
Vue中引入svg图标的两种方式
Jan 14 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
详解Vue3使用axios的配置教程
Apr 29 Vue.js
vue实现在data里引入相对路径
Jun 05 Vue.js
vue递归实现树形组件
Jul 15 Vue.js
el-table-column 内容不自动换行的解决方法
Aug 14 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
一台收音机,让一家人都笑逐颜开!
2020/08/21 无线电
php另类上传图片的方法(PHP用Socket上传图片)
2013/10/30 PHP
Codeigniter发送邮件的方法
2015/03/19 PHP
Javascript开发包大全整理
2006/12/22 Javascript
动态创建的表格单元格中的事件实现代码
2008/12/30 Javascript
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
BOM之navigator对象和用户代理检测
2017/02/10 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
vue货币过滤器的实现方法
2017/04/01 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
Vue中使用sass实现换肤功能
2018/09/07 Javascript
在Vue 中获取下拉框的文本及选项值操作
2020/08/13 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
Python 代码性能优化技巧分享
2012/08/07 Python
Python中的闭包实例详解
2014/08/29 Python
python实现将文本转换成语音的方法
2015/05/28 Python
Python实现的文本编辑器功能示例
2017/06/30 Python
Python3 读、写Excel文件的操作方法
2018/10/20 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
django-初始配置(纯手写)详解
2019/07/30 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
美国Max仓库:Max Warehouse
2020/05/31 全球购物
生产车间主任的个人自我鉴定
2013/10/25 职场文书
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
抢劫罪辩护词
2015/05/21 职场文书
小组口号霸气押韵
2015/12/24 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书