
小白学 VUE 系列nextTick异步更新队列
vue / 发布于 2年前 / 更新于 / 本文字数: 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 全套入门实战
- 4643 2
-
-
-
黑白课堂
- Laravel6 全套入门实战
- 4557 5
-
-
-
黑白课堂
- Laravel6 全套入门实战
- 4443 0
-
-
-
黑白课堂
- Laravel6 全套入门实战
- 4066 0
-
-
-
黑白课堂
- Laravel6 全套入门实战
- 4065 0
-
最新视频课程
-
Laravel 消息通知使用
黑白课堂
284617 03年前
-
ace.js 打造一款属于你的 Web 编辑器,入门文档。
黑白课堂
15257 04年前
-
Laravel 实现 RBAC 权限管理功能 Permission 包操作
黑白课堂
14111 04年前
-
微信小程序等比例图片压缩上传,100%可用,非官方压缩方法
黑白课堂
12162 14年前
-
宝塔面板强制绑定账号修改为不强制绑定方案
黑白课堂
11348 02年前
-
wap2App 入门讲解,100%速成,全面为你讲解。
黑白课堂
9187 04年前
-
Laravel 设置请求头 header 参数
黑白课堂
8314 03年前
-
Laravel 的 PhpSpreadsheet 包入门
黑白课堂
8309 04年前
-
Laravel 表格操作 Maatwebsite/Laravel-Excel 3.1 最新版本的操作指南
黑白课堂
8287 04年前
-
Linux 下如何监听我们的脚本是否掉线了
黑白课堂
7550 02年前
-
KongQi Laravel Admin2.0 文档安装
黑白课堂
3906 23年前
-
KongQi Laravel admin2.0 layui admin 版本序言
黑白课堂
3330 03年前
-
易语言入门拖入文件导入到超级列表框表格内
哪吒
8376 13年前
-
易语言入门易语言定时任务模块
哪吒
6464 03年前
-
postman 使用手册cookie 使用
哪吒
4971 03年前
-
谷歌浏览器插件教程proxy 代理
哪吒
4506 01年前
-
易语言入门判断文件夹是否存在的方法
哪吒
4216 02年前
-
易语言入门TAB 标签页制作
哪吒
4192 03年前
-
Visual Studio Code 入门和使用教程插件安装使用
哪吒
4122 13年前
-
Visual Studio Code 入门和使用教程安装下载
哪吒
4092 03年前
