浅析vue中的nextTick


Posted in Vue.js onDecember 28, 2020

背景

vue是异步渲染的,当data改变之后,DOM不会立刻被渲染,页面渲染时会将data的修改做整合,多次data修改只会做整合最后一次性渲染出来,这也是异步渲染的原因。只有异步渲染才可以实现整合操作。

例子

methods: {
  update() {
    for (let i = 0; i < 10; i++) {
      this.testNum = this.testNum + i;
    }
  },
},

在你的 Vue 视图中, testNum 会发生变化。不过需要注意的是这个变化的过程,虽然我们把 firstNum 循环修改了 10 次,但是实际上它只会把最后一次的值更新到视图上——这也是非常合理的,比如说我们这个 demo 里,每一次循环给 testNum 的赋值只不过是一个过程,最终的目的是拿到 10 次循环的计算结果而已。如果我们硬去算 10 次,那么不必要的性能开销必然是令人肉疼的。

需求

我们需要对data修改后并拿到DOM,对DOM进行操作解决,

例子

<template>
 <div id="app">
  <ul ref="ul1">
   <li v-for="(v, i) in list" :key="i">{{ v }}</li>
  </ul>
  <button @click="add">add DOM</button>
 </div>
</template>
<script>
export default {
 name: "app",
 data() {
  return {
   list: ["a", "b", "c"],
  };
 },
 methods: {
  add() {
   this.list.push(`${Date.now()}`);
   this.list.push(`${Date.now()}`);
   this.list.push(`${Date.now()}`);
   const ulElem = this.$refs.ul1;
   console.log(ulElem.childNodes.length);
  },
 },
};
</script>

浅析vue中的nextTick

本来点击完之后数组长度应该输出6个,但是实际上数组长度只有3个,因为data改变后,DOM并不会立刻改变,此时我们是拿不到新增的节点的,这时候的DOM节点还是一开始的a,b,c 。DOM操作执行完之后,它再异步渲染。

不过我们的期望是点击完之后立刻拿到后面的三个,这时候就需要请出我们的主角nextTick。

add() {
   this.list.push(`${Date.now()}`);
   this.list.push(`${Date.now()}`);
   this.list.push(`${Date.now()}`);
   const ulElem = this.$refs.ul1;
   this.$nextTick(() => {
    console.log(ulElem.childNodes.length);
   });
  },

浅析vue中的nextTick

这个例子也可以看出,$nextTick会待DOM渲染完成再回调,同时也可以看出,我们虽然一次点击有三次修改data,但是多次修改会进行整合,最后渲染一次,这也说明渲染也是异步的,如果是同步,就没办法整合。

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

Vue.js 相关文章推荐
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
用vue设计一个日历表
Dec 03 Vue.js
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
vue elementUI表格控制对应列
Apr 13 Vue.js
Vue实现省市区三级联动
Dec 27 #Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 #Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 #Vue.js
在vue项目中封装echarts的步骤
Dec 25 #Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 #Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 #Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 #Vue.js
You might like
模板引擎正则表达式调试小技巧
2011/07/20 PHP
php防止用户重复提交表单
2015/11/02 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
PHP strripos函数用法总结
2019/02/11 PHP
纯css+js写的一个简单的tab标签页带样式
2014/01/28 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
ECMAScript6中Set/WeakSet详解
2015/06/12 Javascript
利用jQuery和CSS将背景图片拉伸
2015/10/16 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
2016/06/03 Javascript
jQuery Easyui datagrid/treegrid 清空数据
2016/07/09 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
2019/06/15 Javascript
ES6 Generator函数的应用实例分析
2019/06/26 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
[02:30]DOTA2放量测试专访海涛:呼吁保护新手玩家
2013/08/26 DOTA
python修改注册表终止360进程实例
2014/10/13 Python
深入理解Python中变量赋值的问题
2017/01/12 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
python调用win32接口进行截图的示例
2020/11/11 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
关于Assembly命名空间的三个面试题
2015/07/23 面试题
sort命令的作用和用法
2013/08/25 面试题
夜大毕业生自我评价分享
2013/11/10 职场文书
费用会计岗位职责
2014/01/01 职场文书
总会计师岗位职责
2014/02/19 职场文书
诉讼财产保全担保书
2014/05/20 职场文书
家长会欢迎标语
2014/06/24 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书
详解Vue的列表渲染
2021/11/20 Vue.js
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript