近日在开发代码的过程中遇到了一个很有意思的bug,我就简单描述一下业务场景
有一个展开收起的功能,
绿色部分的高度=总体高度 - 红色部分的高度
demo1.png
demo2.png
展开的时候我们肯定是要去改变红色部分的高度的，改变之后我们在父组件里面去获取，发现在nextTick里面获取的永远都是展开之前的高度，收起之后获取的却是展开之后的高度，老是慢了一拍，但是当我我们去断点的时候又变的正常了，着实是诡异
认真的排查了一番，发现在写展开收起的时候添加了一个translation过度属性.5s，然后我就把$nextTick换成setTimeOut然后延时500ms这个问题就解决了
之前一直都认为$nextTick是页面渲染完成之后才会触发，现在看来一些动画的过渡效果是个例外
近日在开发代码的过程中遇到了一个很有意思的bug,我就简单描述一下业务场景有一个展开收起的功能, 红色部分未展开时...
Vue.nextTick Vue 中的 nextTick 涉及到 Vue 中 DOM 的异步更新 Vue 实现响应...
首先 this.$nextTick 其实就是Vue.nextTick, 因为this指向的就是Vue 总结： 页...
一.对vue.nextTick()和this.$nextTick()细致介绍 虽然vue是不建议操作dom的，...
有同学在看 Vue 官方文档时，对 API 文档中的 Vue.nextTick 和 vm.$nextTick 的作...
Vue源码解析之nextTick 前言 nextTick是Vue的一个核心功能，在Vue内部实现中也经常用到nex...
先看一下源码中关于nextTick的定义，摘自Vue 2.6.11。 然后将nextTick暴露给Vue 简单来讲...
Vue中的nextTick涉及到Vue中DOM的异步更新 this.$nextTick()将回调延迟到下次 DOM...
全局 api Vue.nextTick Vue.set( target, propertyName/index, ...
vue的nextTick方法的实现原理：vue用异步队列的方式来控制DOM更新和nextTick回调先后执行mic...
本文标题：vue $nextTick无效果探索
本文链接：https://www.haomeiwen.com/subject/uztcxktx.html
网友评论