浅析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+vant实现购物车全选和反选功能
Nov 17 Vue.js
如何实现vue的tree组件
Dec 03 Vue.js
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
vue动态设置路由权限的主要思路
Jan 13 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
vue postcss-px2rem 自适应布局
May 15 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文件夹与文件目录操作函数介绍
2013/09/09 PHP
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
微信小程序 canvas API详解及实例代码
2016/10/08 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
jquery uploadify如何取消已上传成功文件
2017/02/08 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
微信小程序自定义底部弹出框
2020/11/16 Javascript
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
Python多线程编程简单介绍
2015/04/13 Python
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
python 实现敏感词过滤的方法
2019/01/21 Python
Tensorflow的梯度异步更新示例
2020/01/23 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
python如何构建mock接口服务
2021/01/28 Python
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
The North Face北面英国官网:美国著名户外品牌
2017/12/13 全球购物
expedia比利时:预订航班+酒店并省钱
2018/07/13 全球购物
什么是Assembly(程序集)
2014/09/14 面试题
会计大学生职业生涯规划书范文
2014/01/13 职场文书
三个儿子教学反思
2014/02/03 职场文书
国旗下讲话演讲稿
2014/05/08 职场文书
助残日活动总结
2014/08/27 职场文书
2014年最新个人对照检查材料范文
2014/09/25 职场文书
公务员政审材料范文
2014/12/23 职场文书
团结主题班会
2015/08/13 职场文书
初中班主任工作随笔
2015/08/15 职场文书
电工实训心得体会
2016/01/14 职场文书
判断Python中的Nonetype类型
2021/05/25 Python
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫