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>
相关推荐
tsumikistep17 小时前
【前端】前端运行环境的结构
前端
你的人类朋友17 小时前
【Node】认识multer库
前端·javascript·后端
Aitter17 小时前
PDF和Word文件转换为Markdown的技术实现
前端·ai编程
mapbar_front18 小时前
面试问题—上家公司的离职原因
前端·面试
昔人'18 小时前
css使用 :where() 来简化大型 CSS 选择器列表
前端·css
昔人'18 小时前
css `dorp-shadow`
前端·css
流***陌18 小时前
扭蛋机 Roll 福利房小程序前端功能设计:融合趣味互动与福利适配
前端·小程序
烛阴19 小时前
用 Python 揭秘 IP 地址背后的地理位置和信息
前端·python
前端开发爱好者19 小时前
尤雨溪官宣:"新玩具" 比 Prettier 快 45 倍!
前端·javascript·vue.js
why技术19 小时前
从18w到1600w播放量,我的一点思考。
java·前端·后端