浅析vue中的nextTick
作者:Leise 发布时间:2024-04-26 17:42:21
标签:vue,nextTick
背景
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>
本来点击完之后数组长度应该输出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);
});
},
这个例子也可以看出,$nextTick会待DOM渲染完成再回调,同时也可以看出,我们虽然一次点击有三次修改data,但是多次修改会进行整合,最后渲染一次,这也说明渲染也是异步的,如果是同步,就没办法整合。
来源:https://www.cnblogs.com/leise/p/14194779.html
0
投稿
猜你喜欢
- 接着上一篇学习:https://www.jb51.net/article/70528.htm七、MySQL数据库Schema设计的性能优化高
- 前言之前简单学习过python爬虫基础知识,并且用过scrapy框架爬取数据,都是直接能用xpath定位到目标区域然后爬取。可这次碰到的需求
- 1.pickle 写: 以写方式打开一个文件描述符,调用pickle.dump把对象写进去 &
- KNN算法算是最简单的机器学习算法之一了,这个算法最大的特点是没有训练过程,是一种懒惰学习,这种结构也可以在tensorflow实现。KNN
- 第一步:python中安装selenium库和其他所有Python库一样,selenium库需要安装pip install selenium
- python有很多有趣的库,其中wxpy是连接微信的接口,具体可以查看官方文档。可以实现自动操作,wxpy 支持 Python 3.4-3.
- 这篇文章主要介绍了通过实例解析python描述符原理作用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的
- 1.SQL Server2019安装包下载1.1进入官网SQL Server 20191.2下载安装包1点击Continue2.填写个人信息
- 从github上下载,链接为:https://github.com/jhao104/proxy_pool下载好之后解压文件,然后将文件夹目录
- 在前面我们介绍了多种请求库,如 Requests、Urllib、Selenium 等。我们接下来首先贴近实战,了解一下代理怎么使用,为后面了
- 为什么要修改镜像源?一般使用python安装库,会用到pip install xxx 指令或者conda install xxx指令,因为p
- 用python语言读取二进制图片文件,并提取非零数据统计信息(例如:max,min,skewness and kurtosis)python
- Win10下python 2.7与python 3.7双环境安装教程,具体内容如下所示:1、python软件下载网址:https://www
- 1.模型类中设置:null=True,表示数据库创建时该字段可不填,用NULL填充.MySQL:Null这一列,如果值为YES表示:创建一条
- 一、简介本文旨在使用两种方法来实现sin函数的模拟,具体的模拟方法是使用机器学习来实现的,我们使用Python的torch模块进行机器学习,
- 在XHTML标签中有一些标签的作用是相似的,当然这里的相似是指语义相似,以至于很多人都不清楚这些相似的标签如何使用,那么今天的主题就是分解相
- 由于同事电脑上没有直接可以压缩gz.tar格式的压缩软件,而工作中这个又时常需要将zip文件转换为gz.tar格式,所以常常将压缩为zip格
- 前言在JavaScript中需要通过document.querySelector("#demo")来获取dom节点,然后
- 开源监控系统 Prometheus 集成了跟踪多种类型的时间序列数据,但如果没有集成你想要的数据,那么很容易构建一个。一个经常使用的例子使用
- 什么是 PycharmPycharm 是目前最好用的 Python 编辑器,自带文本高亮、版本管理、数据库连接、断点调试、虚拟环境和包管理的