vue中this.$nextTick()的相关讲解（Demo详解）_辰兮要努力的博客-程序员秘密

技术标签： java vue 前端 js Java项目实战问题 JavaScript前端总结 javascript

【辰兮要努力】：hello你好我是辰兮，很高兴你能来阅读，昵称是希望自己能不断精进，向着优秀程序员前行！

博客来源于项目以及编程中遇到的问题总结，偶尔会有读书分享，我会陆续更新Java前端、后台、数据库、项目案例等相关知识点总结，感谢你的阅读和关注，希望我的博客能帮助到更多的人，分享获取新知，大家一起进步!

吾等采石之人，应怀大教堂之心，愿你们奔赴在各自的热爱中…

文章目录

- - 一、序言
  - 二、案例

一、序言

本篇一起了解一下this.$nextTick 相关方法

this.$nextTick 将回调延迟到下次DOM更新循环之后执行。

在这里插入图片描述

vue是异步渲染的，当data改变之后，DOM不会立刻被渲染，页面渲染时会将data的修改做整合，多次data修改只会做整合最后一次性渲染出来，这也是异步渲染的原因。只有异步渲染才可以实现整合操作。

二、案例

如下是亲测实践案例，初学者建议实践一波

<template>
    <div class="next-tick">
        <ul ref="ulRef">
            <li v-for="(item, index) in items" :key="index">
                {
    {
     item }}
            </li>
        </ul>
        <button @click="add">添加</button>
    </div>
</template>

<script>
    export default {
    
        data() {
    
            return {
    
                items: ['辰兮01', '辰兮02', '辰兮03'],
            };
        },
        methods: {
    
            add() {
    
                //给当前数组添加应该元素
                this.items.push('2021辰兮要努力');

                //尝试获取当前数组的长度
                const firstulElem = this.$refs.ulRef;
                const firstlength = firstulElem.childNodes.length;
                console.log('firstlength:获取当前数组的长度', firstlength);

                //用如上的方式：即使添加了获取的也是原数组的长度，用 this.$nextTick才能真正获取数组改变后的新长度
                this.$nextTick(() => {
    
                    // 获取子元素个数
                    const ulElem = this.$refs.ulRef;
                    const length = ulElem.childNodes.length;
                    console.log('length:获取当前数组的长度', length);
                });
            },
        },
    };
</script>

<style></style>

页面初始化状态，数组里面有三个元素，长度为3

在这里插入图片描述

当我们想获取数组添加一个元素后的长度，发现常见的方法在数组添加元素后，获取的还是原来数组的长度

这里我们使用this.$nextTick 即可获取当前最新数组长度

在这里插入图片描述
在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。

下期介绍相关实践demo…

非常感谢你阅读到这里，如果这篇文章对你有帮助，希望能留下你的点赞关注️ 分享留言thanks！！！

2021年4月9日23:00:20 愿你们奔赴在自己的热爱里！

本文链接：https://blog.csdn.net/weixin_45393094/article/details/115561169

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

python3-基础01篇_LaLaLaworld的博客-程序员秘密

执行python脚本：第一种：python python01.py第二种chmod +x test.py #添加可执行权限./test.py使用 \ 将语句分为多行显示\n实现换行输出默认换行，要不换行需要在变量末尾加上逗号代码块：if expression:python -h可以用来查看一些帮助信息变量赋值不需要指定变量的类型...

OpenCV Mat遍历的方法_AI吃大瓜的博客-程序员秘密

OpenCV像素遍历常用的是三种方法：ptr指针，迭代器（iterator）以及动态地址at。动态地址at不适合用于像素遍历，速度太慢了，比较适合随机访问的方式；使用Mat的ptr指针进行图像遍历更加高效，特别的：一般图像行与行之间往往存储是不连续的，但是有些图像可以是连续的，Mat提供了一个检测图像是否连续的函数isContinuous()。当图像连通时，我们就可以把图像完全展开，看成是一行进行处理。因此最高效的遍历方法如下：void image_copy(cv::Mat &amp

java里面的synchronized关键字详解_AAArlex的博客-程序员秘密

转至博客园，原文链接http://www.cnblogs.com/GnagWang/archive/2011/02/27/1966606.html记下来，很重要。Java语言的关键字，当它用来修饰一个方法或者一个代码块的时候，能够保证在同一时刻最多只有一个线程执行该段代码。一、当两个并发线程访问同一个对象object中的这个synchronized(this)同步代码块时

jQuery.qrCode.js实现二维码生成_二维码 qrcode js_许增强的博客-程序员秘密

代码如下:basic example *{margin:0;padding:0;font-family:微软雅黑;} #qrcode{border:1px solid #AFAFAF;width:200px;height:200px}Render in canvas //中文乱码,将UTF-16转换为UTF-8,UTF-16长度为2位,UTF-8为3位 St

【前沿】如何评价何恺明团队的最新工作RegNet？_zenRRan的博客-程序员秘密

来自 | 知乎链接 |https://www.zhihu.com/question/384255803编辑 | 深度学习这件小事公众号本文仅作学术交流，如有侵权，请联系删除提问如...

BOOTSTRAP：btn按钮中的data-toggle属性失效问题_这么厉害，要不要在村头摆两桌的博客-程序员秘密

BOOTSTRAP：btn按钮中的data-toggle属性失效问题BOOTSTRAP：btn按钮中的data-toggle属性失效问题bootstrap中用下拉选组件的时候遇到了点问题一开始这样写，发现失效，找了半天，实际上就是引入的js文件顺序问题。如果说有些组件不使用，其他一些bootstrap功能是可以正常使用的，但是F12会发现报错，后来将jquery库放在最前边就可以了其实...

随便推点

智能计算系统(学习笔记)-第二章神经网络_确定阈值逻辑单元的神经网络的参数wji和θj,如右图所示,以计算布尔变量x1和x2的异_oliveQ的博客-程序员秘密

课程: (中科院)地址第一章人工智能底层的缺失导致智能产业变成空中阁楼为什么有智能计算系统芯片层--->系统层--->算法层--->应用层计算机专业培养计算机整体及子系统的设计者和研究者不但会开车,还会制造汽车计算机系统的研究,算法仅仅是系统的一个环节,算法服务于系统.例如系统(Tensorflow,AlphaGo,TPU(芯片))计算机系统的研究,形成系统思维,拥有更广阔的科研道路.包括集成CPU和智能芯片的异构系统,软件上面向开发者的智能计算编程环境....

利用CSS3制作网页动画_css3动画官网_星辉闪烁奇迹的博客-程序员秘密

《利用CSS3制作网页动画》一、CSS3变形1.早期的动画和特效要依赖于图片、flash或者JavaScript来实现2.CSS3提供了很多新特性，使得动画制作跟以前相比简单且高效了很多3.CSS3动画分2D动画和3D动画，这里重点讲解2D动画，3D动画用法类似4.transform：变化，改变，变形 transformer变形金刚5.通过常用的变形函数，可以实现变形...

解决串口猎人软件Component ‘anigif.OCx‘ or one of its dependencies not correctly registered: a file is miss_anigif.ocx无法注册_嵌入式历练者的博客-程序员秘密

前言1.问题描述2.OCX文件介绍(百度而来)3.解决方法4.总结强调1.问题描述串口猎人软件打不开，Component ‘anigif.OCx’ or one of its dependencies not correctly registered: a file is missing or invalid。anigif.ocx是一个ActiveX插件控制模块中必不可少的.ocx文件，当你的计算机一旦出现“缺少anigif.ocx”或者“找不到anigif.ocx”就会导致一些增强型插件外挂无法显