博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue.nextTick()
阅读量:6814 次
发布时间:2019-06-26

本文共 982 字,大约阅读时间需要 3 分钟。

hot3.png

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。 vue更新数据是异步的

1.0 中确实是通过 v-el:xxx 标记 dom 然后在组件里通过 this.$els.xxx 就可以获得这个 dom 对象了 $nextTick(() => {}) 与DOM相关操作写在该函数回调中,确保DOM已渲染

什么是Vue.nextTick()

官方文档解释如下:

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.$nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码,

什么时候需要用的Vue.nextTick()

你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢,原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数,因为该钩子函数执行时所有的DOM挂载已完成。使用时机:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子函数,此时页面并未全部渲染。

在某个动作有可能改变DOM元素结构的时候,对DOM一系列的js操作都要放进Vue.nextTick()的回调函数中

created(){            let vm = this;            console.log(vm.messageObj);            // 请求行政办公banner            vm.$nextTick(() => {                // 获取列表商品                vm.getGoods();                // 初始化滚动                vm._initScroll();            });        },

转载于:https://my.oschina.net/shuaihong/blog/1584496

你可能感兴趣的文章
ALTER TABLE & ALTER TYPES
查看>>
Hadoop-调优剖析
查看>>
Mac前端抓包小工具Charles4.0下载
查看>>
用AHP层次分析法挑选最佳结婚对象
查看>>
Subversion安装手记
查看>>
Linux 获取设备树源文件(DTS)里描述的资源【转】
查看>>
Effective C++ 阅读笔记(二)public继承与继承中的函数覆盖
查看>>
什么是UV?
查看>>
Stringbuffer与Stringbuilder源码学习和对比
查看>>
Centos 学习大纲
查看>>
常见的JavaScript易错知识点整理
查看>>
RagingWire战略重点批发数据中心服务
查看>>
数据中心的规模是否影响虚拟化DCIM的决策?
查看>>
后流量时代,世间再无电信运营商
查看>>
李开复:钉钉是大胆的突破式创新
查看>>
夏普欲收回美洲品牌授权 海信总裁:严格按照合同办
查看>>
大数据市场迎来扩容期 本土内存数据库抢位崛起
查看>>
IPython4_Notebook
查看>>
rac问题思考总结
查看>>
Android 自定义View总结
查看>>