首页 > 其他分享 >Vue.nextTick() 使用场景及实现原理

Vue.nextTick() 使用场景及实现原理

时间:2024-04-08 16:58:45浏览次数:33  
标签:nextTick count 场景 DOM 更新 Vue 组件

Vue.nextTick() 基本使用

作用: 等待下一次 DOM 更新刷新的工具方法。

  1. 为什么需要用到Vue.nextTick()?

    当你在 Vue 中更改响应式状态时,最终的 DOM 更新并不是同步生效的,而是由 Vue
    将它们缓存在一个队列中,直到下一个“tick”才一起执行。这样是为了确保每个组件无论发生多少状态改变,都仅执行一次更新。

    nextTick() 可以在状态改变后立即使用,以等待 DOM 更新完成。你可以传递一个回调函数作为参数,或者 await 返回的
    Promise。

  2. Vue.nextTick() 和 this.$nextTick() 的区别

    vue中this.$nextTick() 是绑定在实例上的 nextTick() 函数。和全局版本的 nextTick()
    的唯一区别就是组件传递给 this.$nextTick() 的回调函数会带上 this 上下文,其绑定了当前组件实例。

  3. Vue.nextTick() 使用场景

    获取数据更新后的dom元素,或者在数据更新后操作dom

  4. Vue.nextTick() 实现原理 点击查看
  5. 使用示例:
    <script setup>
    import { ref, nextTick } from 'vue'
    
    const count = ref(0)
    
    async function increment() {
      count.value++
    
      // DOM 还未更新
      console.log(document.getElementById('counter').textContent) // 0
    
      await nextTick()
      // DOM 此时已经更新
      console.log(document.getElementById('counter').textContent) // 1
    }
    </script>
    
    <template>
      <button id="counter" @click="increment">{{ count }}</button>
    </template>
    

标签:nextTick,count,场景,DOM,更新,Vue,组件
From: https://blog.csdn.net/qq_39454432/article/details/137507440

相关文章

  • Vue3 · 小白学习全局 API:常规
    全局API:常规本次笔记versionnextTick()defineComponent()defineAsyncComponent()defineCustomElement()1.version暴露当前所使用的Vue版本。类型string示例import{version}from'vue'console.log(version)2.nextTick()等待下一次DOM更新刷新的工具......
  • Vite+Vue3.0项目使用ant-design-vue <a-calendar>日期组件汉化
    antd的弹框、日期等默认为英文,要把英文转为中文请看下文:1.首先我们要在main.js中引入ant-design组件库并全局挂载:importAppfrom'./App'importAntdfrom'ant-design-vue';import'ant-design-vue/dist/antd.css';constapp=createApp(App);app.use(Antd);2.然......
  • vue3使用van-picker组件时,滑动选中某个数值时在旁边相应显示单位
    vant的官方文档中没有支持这种需求的属性或方法,所以只能自己找别的方法。方法一van-picker控件选中某个元素时,该元素会有一个类名van-picker-column__item–selected我们可以在css里给这个类名通过::after,即使用伪类,来添加单位.van-picker-column__item--selected::aft......
  • Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined.
    由于defineModel在vue3.4版本才能使用,原有项目依赖为"vue":"^3.3.4", "@vitejs/plugin-vue":"^4.1.0",升级项目中vue版本后出现如下警告:Featureflag__VUE_PROD_HYDRATION_MISMATCH_DETAILS__isnotexplicitlydefined.Youarerunningtheesm-bund......
  • 前端【VUE】08-vue【插槽】【默认插槽】【具名插槽】【作用域插槽】
    1、默认插槽默认插槽对应的插槽的名字为default  1、组件目录下components/MyDialog.vue1<template>2<divclass="dialog">3<divclass="dialog-header">4<h3>友情提示</h3>5<spanclass="close......
  • 如何在vue工程中模块化使用大量的svg图片
    如果你在执行 requireAll(requireSvg) 后得到的是一个 BrowserSpriteSymbol 数组,并且能够直接使用 <use> 进行引用,这通常意味着在构建过程中有一些特定的Webpack配置和/或自定义加载器(loader)被用来处理SVG文件,并将它们转换为一个SVGSprite,其中每个SVG都转换为了一个......
  • vue快速入门(十二)v-key索引标志
    注释很详细,直接上代码新增内容v-key的使用场景数组筛选器的使用源码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0">&......
  • cesium 地图旋转 整个场景旋转 开场动画
    设置camera旋转能实现整个场景的旋转,多用于开场动画开始旋转functiononTickCallback(){viewer.scene.camera.rotate(Cesium.Cartesian3.UNIT_Z,-0.02);}viewer.clock.onTick.addEventListener(onTickCallback);停止旋转view......
  • 基于springboot+vue+Mysql的学习平台
    开发语言:Java框架:springbootJDK版本:JDK1.8服务器:tomcat7数据库:mysql5.7(一定要5.7版本)数据库工具:Navicat11开发软件:eclipse/myeclipse/ideaMaven包:Maven3.3.9系统展示平台首页用户注册课程信息作业信息资料信息个人中心管理员功能界面学生管理教师管理课程......
  • 基于Java+SpringBoot+Vue的SRM供应商系统(源码分享)
           前言:供应商招投标管理系统是一个综合性的管理平台,旨在规范供应商的招投标流程,确保采购过程的透明度和公正性,同时提高采购效率。以下是对您提到的各个环节的详细解释:一、供应商准入供应商准入是招投标管理系统的首要环节,它负责审核和管理潜在供应商的资质。具......