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>
相关推荐
redreamSo11 分钟前
AI Daily | AI日报:ChatGPT识破10年顽疾,医疗AI震撼登场; 微信支付MCP开放,机遇与风险并存; 蒙娜丽莎图让大模型几乎全军覆没
程序员·aigc·资讯
打不着的大喇叭33 分钟前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code38 分钟前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟41 分钟前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
程序员鱼皮1 小时前
Cursor 1.2重磅更新,这个痛点终于被解决了!
ai·程序员·编程·agent·软件开发
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00001 小时前
Vue组件通信方式详解
前端·面试
呆呆的心1 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html