浅析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中通过render函数给子组件设置ref操作
Nov 17 Vue.js
vue实现表格合并功能
Dec 01 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
Vuex实现简单购物车
Jan 10 Vue.js
vue 页面跳转的实现方式
Jan 12 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
vue使用watch监听属性变化
Apr 30 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
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
PHP中的output_buffering详细介绍
2014/09/27 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
extjs render 用法介绍
2013/09/11 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
如何在Angular2中使用jQuery及其插件的方法
2017/02/09 Javascript
js定时器实现倒计时效果
2017/11/05 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
nodeJS微信分享
2017/12/20 NodeJs
jQuery 查找元素操作实例小结
2019/10/02 jQuery
Vue的Options用法说明
2020/08/14 Javascript
vue实现滚动鼠标滚轮切换页面
2020/12/13 Vue.js
[06:53]2018DOTA2国际邀请赛寻真——勇于创新的Vici Gaming
2018/08/14 DOTA
python查看模块安装位置的方法
2018/10/16 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
《郑和远航》教学反思
2014/04/16 职场文书
端午节活动总结报告
2015/02/11 职场文书
2015年新农村建设工作总结
2015/05/22 职场文书
工作后的感想
2015/08/07 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python
spring boot中nativeQuery的用法
2021/07/26 Java/Android
使用springMVC所需要的pom配置
2021/09/15 Java/Android