problem: 记一次聊天框的表情包弹框不显示的找问题过程

左边是列表，包含了群和成员，右侧是聊天窗口。点击群列表，右侧显示群聊窗口，点击学员，右侧显示私聊窗口。

群聊窗口和私聊窗口是不同的组件，但是窗口中的子组件，例如窗口的头部、中间内容部分、输入框都是复用的同一个组件。

一个花了很长时间才定位到问题的bug：

群聊窗口的表情包弹窗怎么也不显示，但是私聊窗口的表情包弹窗总是可以正常显示，复用的都是同一个组件，而且本地都是正常的，到线上就出现这个问题。

起初完全没有入口定位，最初猜测是数据渲染问题，输入框组件中加载表情包的逻辑代码在组件没有渲染之前就执行了，然后给这段逻辑代码加了定时器延时。

仍然无效。

这个bug停滞了几天，感觉自己的思维力不够，不知道怎么去定位这个bug，花时间去看了《思维力》这本书，然后再来看这个bug。

首先界定问题：

这里适合思维力里面说的界定问题中的第三条，探究问题本质。

问题本质是什么呢？本地是可以的，线上的不可以，那么就应该对比一下线上和本地有什么不同。线上的数据扒下来在本地运行一下，也不行，和线上表现一致；那么对比一下线上的数据和本地有什么不同，发现线上的和本地的字段格式不同在于多了一个id字段；已经找到了问题的苗头，利用思维力中的5w来探究问题的根本，为什么这个id字段会导致群聊和私聊的表情包显示有差异？公用的组件中拿这个id字段有做什么逻辑处理？去看下组件，发现给组件用id绑定了key。去掉key，问题解决了！！解决这个问题的关键其实是发现当从私聊切换到群聊时，表情包中的内容元素不见了，display为none，让我意识到有一种在代码中添加了控制元素显示与隐藏的逻辑，所以是代码中有写什么影响元素显示的逻辑。如果掌握了找问题的方法论，完全可以不依靠经验去找问题本质。

回到问题本身：

vue中为了快速渲染元素会复用已有元素，复用就意味着会保留上一次的状态，如果不希望元素复用，可以给元素绑定一个唯一的key。

那为什么这里给聊天框中的子组件——输入框组件绑定了一个key，会导致群聊窗口表情包不能正常渲染呢？

这个问题涉及到 Vue的虚拟DOM算法，这里就不总结了。

总结：

这个问题虽然是自己给自己挖了一个坑，但是在解决这个问题的过程中，我真正的意识到真正解决问题的高手，不是在于他有多了解这个问题，对这个问题相关的知识积累了多少经验（就像《思维力》这本书中说的一样），而在于他具备解决问题的模式，利用解决问题的逻辑去推断出问题的本质原因。

当我最后用理性的逻辑推出这个问题的根本的时候，我真的感受到了一阵成就感，这种把一个自己当初完全没办法解决的问题，最后靠逻辑解决的成就感真的太让人兴奋了。希望2019年能有更多这样的体验。