浅析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项目利用axios请求接口下载excel
Nov 17 Vue.js
深入了解Vue3模板编译原理
Nov 19 Vue.js
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
Vue与React的区别和优势对比
Dec 18 Vue.js
vue实现树状表格效果
Dec 29 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
vue实现可拖拽的dialog弹框
May 13 Vue.js
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
解决vue中provide inject的响应式监听
Apr 19 Vue.js
el-table-column 内容不自动换行的解决方法
Aug 14 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
PHP 如何向 MySQL 发送数据
2006/10/09 PHP
PHP fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
自定义php类(查找/修改)xml文档
2013/03/26 PHP
Redis构建分布式锁
2017/03/28 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
PHP实现随机数字、字母的验证码功能
2018/08/01 PHP
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
2009/10/26 Javascript
网页中的图片的处理方法与代码
2009/11/26 Javascript
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
2013/06/29 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
2014/03/13 Javascript
JavaScript实现的一个日期格式化函数分享
2014/12/06 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
简单封装js的dom查询实例代码
2016/07/08 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
nodejs 使用http进行post或get请求的实例(携带cookie)
2019/01/03 NodeJs
[09:13]2014DOTA2国际邀请赛 中国区预选赛coser表演
2014/05/23 DOTA
python如何拆分含有多种分隔符的字符串
2018/03/20 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
pandas去重复行并分类汇总的实现方法
2019/01/29 Python
几个解决兼容IE6\7\8不支持html5标签的几个方法
2013/01/07 HTML / CSS
造价工程师个人求职信
2013/09/21 职场文书
六查六看剖析材料
2014/02/15 职场文书
公司投资建议书
2014/05/16 职场文书
设计大赛策划方案
2014/06/13 职场文书
校园运动会广播稿
2014/10/06 职场文书
民事辩护词范文
2015/05/21 职场文书
士兵突击观后感
2015/06/16 职场文书
勤俭节约主题班会
2015/08/13 职场文书
诚实守信主题班会
2015/08/13 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
Python预测分词的实现
2021/06/18 Python
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript