注册
登录

小白学 VUE 系列nextTick异步更新队列

vue / 发布于 1年前 / 更新于 / 本文字数: 851 字 /教程集数： 32

标签： nextTick异步更新队列 / vue nextTick

nextTick异步更新队列

Vue是异步执行DOM更新的，为了数据变化之后等待Vue完成更新DOM，可以在数据变化之后立即使用Vue.nextTickl)方法在当前的回调函数中能获或最新的DOM，如果在组件内部可以使用$nextTick()方法。
Vue在内部尝试对异步队列使用原生的Promise.then、MutationObserver和setmmediate，如果执行环境不支持，会采用setTimeout(fn,0代替。其实就是做了异步延迟执行队列。

例子

 <p ref="msg">{{ nextName}} </p>
<button @click="updateName">更新</button>
 export default {
        name: 'Home',
        components: {},
        data() {
            return {
                nextName:"赵山"
            }
        },

        methods:{
            updateName(){
                this.nextName="李四";
               console.log("直接获取",this.$refs['msg'].innerHTML);//输出赵山
                this.$nextTick(()=>{
                    console.log(this.$refs['msg'].innerHTML);//输出李四
                })

            }
        },

    }

如果要更新dom，需要采用 this.$nextTick 来获取变化后的准确数据。

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。

小白学 VUE 系列

黑白课堂

黑白课堂 · 技术专家

专业PHP开发

年度VIP 站长创业者玉树凌风每天醒来0收入
查看更多

最新视频教程

查看更多

最新视频课程

热门文章

热门文档

Laravel 消息通知使用

ace.js 打造一款属于你的 Web 编辑器，入门文档。

Laravel 实现 RBAC 权限管理功能 Permission 包操作

微信小程序等比例图片压缩上传，100%可用，非官方压缩方法

宝塔面板强制绑定账号修改为不强制绑定方案

wap2App 入门讲解，100%速成，全面为你讲解。

Laravel 的 PhpSpreadsheet 包入门

Laravel 表格操作 Maatwebsite/Laravel-Excel 3.1 最新版本的操作指南

Laravel 设置请求头 header 参数

Laravel Permission 中文文档

查看更多

KongQi Laravel Admin2.0 文档安装

KongQi Laravel admin2.0 layui admin 版本序言

易语言入门拖入文件导入到超级列表框表格内

易语言入门易语言定时任务模块

postman 使用手册cookie 使用

Visual Studio Code 入门和使用教程安装下载

Visual Studio Code 入门和使用教程插件安装使用

易语言入门TAB 标签页制作

黑白课堂社区使用如何购买元宝和开通 VIP

Visual Studio Code 入门和使用教程快捷键使用

查看更多

钻级赞助商

合作联系

站长信息

订阅会员

类型:
金额:
立即购买

购买学币

学币:
金额:
立即购买

选择支付类型

支付宝电脑支付
微信支付扫码
支付宝扫码支付
立即支付