拍案惊奇之v-show的失效

背景

自从上周封装了dragmove指令之后，组件中的很多拖拽的代码消失了，组件代码清爽了很多。我对这个指令的封装很是满意，虽然中途经过了多次迭代。

开发拖拽指令：https://www.jianshu.com/p/5b20207be9de
添加位置记录功能：https://www.jianshu.com/p/e5f2929e5ef6
修改初始位置不生效的问题:https://www.jianshu.com/p/63f552ad8fcc

案情描述

今天，宁哥和我说有一个我那个dragmove指令相关的bug让我看一下，bug是这样的：隐藏该组件，切换路由在切换回来，该隐藏的组件却显示了。

我看了下代码：

 <div 
        id="timerModal" 
        v-dragmove:timerModal.save="{benchmark: 'right'}" class="timeBox bg_color drag" 
        v-show="this.isShowTimer && this.isLecture">
</div>

寻凶之路

vuex：

isShowTimer取自vuex，我开始怀疑是vuex的问题，state更新了没有同步到组件，后来发现组件中的值也是最新的，所以排除vuex的嫌疑，继续寻找凶手。

v-show:

数据是false，但是元素却显示了，我看了一下元素的样式，display并没有值，于是我开始怀疑v-show，它是不是在首次渲染的时候并不会做处理，就算值是false也会显示。

我翻开v-show指令的源码看了一下，因为怀疑是首次渲染的问题，所以我只看了bind的部分。

  bind (el: any, { value }: VNodeDirective, vnode: VNodeWithData) {
    vnode = locateNode(vnode)
    const transition = vnode.data && vnode.data.transition
    const originalDisplay = el.__vOriginalDisplay =
      el.style.display === 'none' ? '' : el.style.display
    if (value && transition) {
      vnode.data.show = true
      enter(vnode, () => {
        el.style.display = originalDisplay
      })
    } else {
      el.style.display = value ? originalDisplay : 'none'
    }
  }

我按照初值为false走了一下，发现最终是

el.style.display = value ? originalDisplay : 'none'

会修改display为none。

因此，v-show指令有问题的嫌疑也可以排除。

v-dragmove

坚信真相永远只有一个，继续思索：v-show指令没生效，是不是受我另一个指令的影响呢，这两个指令有什么共同之处么。

灵光一闪，我找到了问题的关键：这两个指令都修改了style。

我连忙看了下dragmove指令中修改style的代码：


    //生成position样式
    const generatePositionStyle = (position) => {
        let positionStyleStr = ';';
        ['left', 'right', 'bottom', 'top'].forEach((item) => {
            positionStyleStr += (position[item] ? `${item}:${position[item]}px;` : '');
        })
        return positionStyleStr;
    }

    //重置位置
    const resetPosition = (element, positionId) => {
        if (positionMap.has(positionId)) {
            const position = positionMap.get(positionId);
            element.style += generatePositionStyle(position);
        }
    }

是直接覆盖了之前的style，如果dragmove指令在v-show之后编译，这里可能会把v-show设置的style给覆盖掉。

怀疑凶手是dragmove指令的暴力覆盖style。所以，我改成了这样：

    //生成position样式
    const adjustPositionStyle = (style, position) => {
        ['left', 'right', 'bottom', 'top'].forEach((item) => {
            style[item] =  position[item] + 'px';
        })
    }

    //重置位置
    const resetPosition = (element, positionId) => {
        if (positionMap.has(positionId)) {
            const position = positionMap.get(positionId);
            adjustPositionStyle(element.style, position);
        }
    }

不覆盖，只修改部分属性。经过尝试，v-show生效了。果然，就是这里的问题。

后来我又把v-show换成v-if也是生效的，想了一下，原因是v-if是直接去掉了这段dom元素，避开了同时修改style。

总结

整个过程涉及三个犯罪嫌疑人：
vuex：getter缓存，
v-show：初次绑定逻辑，
v-dragmove：把v-show的操作覆盖掉了

通过一步步的分析，最终确定了凶手：还是我dragmove指令封装的有问题。囧

回忆了一下从开始封装这个指令到一步步的完善的整个过程：

最初只是想把组件中dom操作相关的代码抽出来放到指令中，精简组件的代码。后来又加了记录位置的职责，再后来遇到了初始位置不生效和隐藏不生效的两个问题，经过一步步的调试，发现都是多指令同时修改style导致的。总结了一些经验:

vue多个指令同时修改一个属性的时候：顺序无法保证，注意不要用覆盖的方式。

最后编辑于：2018.09.18 20:07:34