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>
相关推荐
daols881 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
小小小小宇2 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊2 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习3 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖3 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖3 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水4 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐4 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06274 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台4 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue