浅析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中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
Vue接口封装的完整步骤记录
May 14 Vue.js
解读Vue组件注册方式
May 15 Vue.js
vue使用节流函数的踩坑实例指南
May 20 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
vue如何清除浏览器历史栈
May 25 Vue.js
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
Vue深入理解插槽slot的使用
Aug 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
PHP持久连接mysql_pconnect()函数使用介绍
2012/02/05 PHP
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
PHP Global定义全局变量使用说明
2013/08/15 PHP
thinkphp整合微信支付代码分享
2016/11/24 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
JQuery 在线引用及测试引用是否成功
2014/06/24 Javascript
JavaScript中实现最高效的数组乱序方法
2014/10/11 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
jQuery实现动态删除LI的方法
2017/05/30 jQuery
js+html5实现复制文字按钮
2017/07/15 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
原生js实现购物车
2020/09/23 Javascript
Python3 模块、包调用&amp;路径详解
2017/10/25 Python
Tornado Web Server框架编写简易Python服务器
2018/07/28 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
Python读取YUV文件,并显示的方法
2018/12/04 Python
Python 将 QQ 好友头像生成祝福语的实现代码
2020/05/03 Python
简单了解Django项目应用创建过程
2020/07/06 Python
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
数据库的约束含义
2012/09/09 面试题
致短跑运动员广播稿
2014/01/09 职场文书
职称评定自我鉴定
2014/03/18 职场文书
国际商务专业求职信
2014/07/15 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
学雷锋活动简报
2015/07/20 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书
2019年感恩励志演讲稿(收藏备用)
2019/09/11 职场文书
Nginx配置https的实现
2021/11/27 Servers