vue2与vue3中nextTick基本应用

一、前言

1、nextTick()是什么?

nextTick(),延迟代码执行,是将回调函数的逻辑延迟在下一次dom更新后调用,简单的理解是:当数据更新时,在dom渲染后,自动执行该函数。

2、为什么要用nextTick()?

Vue采用异步渲染,简单来说就是为了提升性能,因为不采用异步更新,在每次更新数据都会对当前组件进行重新渲染,为了性能考虑,Vue会在本轮数据更新后,再去异步更新视图。如果我们想要在数据更新后进行dom操作,就需要用到nextTick(),,使用它可以让我们获取到最新的dom

二、 nextTick的注释详解(vue2)

xml 复制代码
<template>
  <div class="box">
    <h1 ref="text">{{ value }}</h1>
    <button type="danger" @click="setCont">点击</button>
    <div style="height: 20px;"></div>
    <button type="danger" @click="changeCont">疯狂点击</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "Hello Le!",
    };
  },
  created() {

  },
  methods: {
    setCont() {
      // 如果直接打印,打印结果是 Hello Le!,因为this.value = "你好,乐!"是异步的
      this.value = "你好,乐!"
      console.log(this.$refs["text"].innerText); // Hello Le!
      // 通过this.$nextTick在下次dom更新时执行,则能够获取到最新的值
      this.$nextTick(() => {
        // 页面dom中的数据渲染完之后,再执行回调函数中的逻辑。
        console.log(this.$refs["text"].innerText); // 你好,乐!
      });
    },
    changeCont() {
      // 即使数据变化在后,依旧会延迟在下次dom更新时执行
      this.$nextTick(() => {
        console.log(this.value);// 你好,乐!
      });
      this.value = "你好,乐!"
    },
  },
}
</script>
<style lang="scss" scoped></style>

三、 nextTick的注释详解(vue3)

xml 复制代码
<template>
  <div>
    <div ref="myDiv">{{ myText }}</div>
    <button @click="setText">点击</button>
  </div>
</template>  
  
<script>
import { ref, nextTick } from 'vue';

export default {
  setup() {
    const myDiv = ref(null);
    const myText = ref('Hello,world!');
    const setText = () => {
      myText.value = 'Hello,le!';
      // 此时因为异步渲染无法获取DOM元素内容
      console.log(myDiv.value.innerHTML); // Hello,world!
      // 使用nextTick延迟执行代码,直到DOM更新完成  
      nextTick(() => {
        // 此时可以访问最新的DOM元素  
        console.log(myDiv.value.innerHTML); // Hello,le!
      });
    }
    return { myDiv, myText, setText };
  },
};  
</script>
相关推荐
前端 贾公子1 分钟前
Monorepo + vite 怎么热更新
前端
然我37 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子42 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台2 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹2 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux