
小白学 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
来获取变化后的准确数据。
版权提示
1.除了标识原创之外,其他可能来源于网友的分享,仅供学习使用2.如您发现侵犯了您的权利,请联系我们删除
3.转载必须带本文链接,否则你将侵权
4.关于会员或其发布的相关内容均由会员自行提供,会员依法应对其提供的任何信息承担全部责任,本站不对此承担任何法律责任
0 人点赞
评论区 (0)
最新视频教程
-
-
黑白课堂
- Laravel6 全套入门实战
- 3640 2
-
-
-
黑白课堂
- Laravel6 全套入门实战
- 3542 5
-
-
-
黑白课堂
- Laravel6 全套入门实战
- 3305 0
-
-
-
黑白课堂
- Laravel6 全套入门实战
- 3074 0
-
-
-
黑白课堂
- Laravel6 全套入门实战
- 2910 0
-
最新视频课程
-
Laravel 消息通知使用
黑白课堂
170796 01年前
-
ace.js 打造一款属于你的 Web 编辑器,入门文档。
黑白课堂
10067 03年前
-
Laravel 实现 RBAC 权限管理功能 Permission 包操作
黑白课堂
9012 03年前
-
微信小程序等比例图片压缩上传,100%可用,非官方压缩方法
黑白课堂
8875 13年前
-
宝塔面板强制绑定账号修改为不强制绑定方案
黑白课堂
7134 01年前
-
Laravel 的 PhpSpreadsheet 包入门
黑白课堂
6775 03年前
-
Laravel 表格操作 Maatwebsite/Laravel-Excel 3.1 最新版本的操作指南
黑白课堂
6764 03年前
-
wap2App 入门讲解,100%速成,全面为你讲解。
黑白课堂
6395 03年前
-
Laravel 设置请求头 header 参数
黑白课堂
6221 02年前
-
Laravel Permission 中文文档
黑白课堂
5592 03年前
-
KongQi Laravel Admin2.0 文档安装
黑白课堂
2696 21年前
-
KongQi Laravel admin2.0 layui admin 版本序言
黑白课堂
2502 01年前
-
易语言入门拖入文件导入到超级列表框表格内
空气
4799 02年前
-
postman 使用手册cookie 使用
空气
3625 01年前
-
易语言入门易语言定时任务模块
空气
3568 02年前
-
Visual Studio Code 入门和使用教程安装下载
空气
3042 02年前
-
Visual Studio Code 入门和使用教程插件安装使用
空气
3039 12年前
-
黑白课堂社区使用如何购买元宝和开通 VIP
黑白课堂
2862 02年前
-
易语言入门TAB 标签页制作
空气
2814 02年前
-
Visual Studio Code 入门和使用教程快捷键使用
空气
2654 02年前
微信公众号

