我和vue.js 番外篇——如何监测vue渲染dom进度

最近用vue.js作项目,初学vue,使用的也是一些简单的方法和函数,但是还是遇到不少困难,经过反复思考和查阅资料,还是解决了不少问题,在此和小伙伴们分享下一些问题的解决方法和技巧,希望各位少走弯路~

最近碰到了一个问题,模拟单选按钮美化,按钮和数据是Ajax请求,v-for动态加载出的,然后下方jQuery写的模拟单选的方法内的jQuery选择器找不到循环出的dom元素。可能是Ajax请求和v-for渲染浪费了一些时间,也就是还没有生成dom jQuery方法就已经执行了,所以报错找不到。找到原因后用window.setTimeout() 加了100ms的延时,好用了,但是这种取巧的方法容易有bug,网络原因和设备原因都可能影响加载速度。所以这种方法绝对不可行,继续研究。

查阅vue手册的时候发现一个异步更新 队列的方法,

如果想在 DOM 状态更新后做点什么,这会有帮助。尽管 Vue.js 鼓励开发者沿着数据驱动的思路,避免直接修改 DOM,但是有时确实要这么做。为了在数据变化之后等待 Vue.js 完成更新 DOM,可以在数据变化之后立即使用 Vue.nextTick(callback) 。回调在 DOM 更新完成后调用。

把$nextTick()方法放到Ajax成功的回调函数中,刷新,完成~

版权属于: 三个前端 | 积累知识,分享经验,交流心得
原文地址: http://web3ge.com/archives/190
欢迎转载,请以链接形式注明原始出处及本声明。

Be the first to comment

发表评论