背景
自从上周封装了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多个指令同时修改一个属性的时候： 顺序无法保证， 注意不要用覆盖的方式。
网友评论