浅析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 相关文章推荐
vuex的数据渲染与修改浅析
Nov 26 Vue.js
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
vuex的使用和简易实现
Jan 07 Vue.js
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
详解实现vue的数据响应式原理
Jan 20 Vue.js
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
vue项目支付功能代码详解
Feb 18 Vue.js
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
vue如何在data中引入图片的正确路径
Jun 05 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
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
分享php分页的功能模块
2015/06/16 PHP
PHP上传文件及图片到七牛的方法
2018/07/25 PHP
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
iframe子页面获取父页面元素的方法
2013/11/05 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
2015/06/24 Javascript
javascript自定义in_array()函数实现方法
2015/08/03 Javascript
JS实现单击输入框弹出选择框效果完整实例
2015/12/14 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
2017/02/12 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
在Vue.js中使用Mixins的方法
2017/09/12 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
Python3读取zip文件信息的方法
2015/05/22 Python
python函数形参用法实例分析
2015/08/04 Python
python调用百度地图WEB服务API获取地点对应坐标值
2019/01/16 Python
使用pycharm设置控制台不换行的操作方法
2019/01/19 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
python可以用哪些数据库
2020/06/22 Python
我为自己代言广告词
2014/03/18 职场文书
经理秘书求职自荐信范文
2014/03/23 职场文书
开展党的群众路线教育实践活动情况汇报
2014/11/05 职场文书
2016年寒假见闻
2015/10/10 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书
启迪人心的励志语录:脾气永远不要大于本事
2020/01/02 职场文书
vue Element-ui表格实现树形结构表格
2021/06/07 Vue.js
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS