照例的先扯淡
前几天做项目(Vue+jQuery),发现了一个问题:
通过v-show 指令隐藏包含 jQCloud的div 时,如果这时 碰巧 开启了jqcloud的autoresize,并且在这时 碰巧 改变了窗口大小,div再次显示后你会发现标签云会都挤在左上角。
会这样的原因得从v-show说起。v-if跟v-show最大的区别就是,一个是重新渲染,另一个仅仅是通过将 display属性设置为none。
相信各位已经看过了Vue的相关文档了,使用v-show的好处也应该明白了(不必重新渲染,性能会有一定的提升)。
的确,使用v-if替换掉v-show即可解决我遇到的这个问题,但有的时候我们还是向稍微提高一下性能的,对吧?特别是包含很复杂的组件(如图表、动画等)。
问题的根源在于,在组件处于display:none状态时,jqcloud获得的父div的长宽是不对的。通过修改jqcloud的代码可以搞定这个问题,但略微麻烦。所以在不改变jqcloud代码的情况下,如果我们能手动调用其自适应函数,那么我们就可以实现在它被激活的时候再进行自适应。
讲一下思路
因为是公司的代码,不能放出来,我大概说一下怎么搞。
通过阅读源码,发现jqcloud内部已经包含了自动调节函数:
jQCloud.prototype = {
……
// Update the list of words
update: function(word_array) {