Vue的软肋

最近我在用Vue，用着用着发现一个很强大的框架我却用着无比不顺，可能对于某些特殊的应用Vue的强项反而成了他的弱点，而我写的就是那种特殊的应用。

首先，如果我写了一个computed property然而这个computed property并不绑定到任何html元素，那么Vue会把这个computed property彻底的优化掉，就好像这东西根本不存在一样。

写一个computed property并不绑定到任何元素，这种情况是可能的，比如在播放视频的时候我想静音，此时虽然可以不通过Vuex store直接操作dom属性把视频设置成静音，但是如果我播放下一个视频，那么静音效果就没有了。因此如果把静音看成一个状态存在Vuex store里，那么就需要写一个computed property来get是否静音。

为了让computed property不被优化掉，此时就只能靠再建一个watch去watch这个computed property。但这样代码看起来就多了一个层级了。

第二，Vue更新dom的时候自带很多优化，比如如果计算出来的computed property的结果和上一次的完全一样的话，那么组件根本不会被更新，v-bind根本不会发生。

这种也是有可能发生的，试想有两位同学同时点了2首同样的卡拉ok，你放完第一个歌之后要放第二个，然而2首歌的url是完全一样的，如果你的computed property就是url的话，那么你会发现虽然store里已经切到第二首歌了，但第二首歌根本不会从头开始重新放。

在这种情况下，我曾想过把computed property去监听url这个级别的上一个级别的object，然后去bind object.url，这样至少可以保证这个object变化的话computed property肯定会被重新计算，然而事实证明我把computed property自带cache的问题和这个dom更新的问题弄混了，即便bind的是object.url，但因为object.url又是每次都是一样的值，所以还是不work的。

最后也只能通过强制让组件更新来解决这个问题，而强制更新组件，主要是靠的这篇文章，Vue在这方面做的实在有点奇怪的。

http://michaelnthiessen.com/force-re-render/

第三，computed property自带cache，如果它依赖的reactive variable没有变化的话，computed property是根本不会重新被compute的。

这就造成了一些问题，比如我是一个显示字幕的component，我依赖于store里的一个isPlaying reactive variable，如果isPlaying，那我就显示字幕。此时另一个component开始播放视频，它把isPlaying设为true此时我就开始播放字幕了，但当它播放完第一个视频的时候，马上又自动播放了第二个视频，isPlay虽然被再次设置了但还是为true，此时我的computed property根本不会被trigger，所以我永远显示的是第一个视频的字幕。

当然这可以有很多方法解决，比如我可以监听现在到第几个视频了，还可以把computed property的cache属性设置为false。但这些方案要么把我的监听逻辑变复杂了，要么引入了不一致性比如cache的true/false实际上相当于引入了一层if else，不够优雅，有些confuse，还要去了解computed property的内部机理，用起来麻烦。

最后我认为，造成这些问题的原因一个在于dom渲染优化和computed property内在逻辑的自然conflict，其实这些conflict自然就会有，比如以PM视角来design一个产品的时候，你会发现一个产品的内在逻辑在某些点上会互相打架。另一个原因在于绑定策略假设的是dom变化绑定到变量上。然而对于音频视频来说，它的dom并没有变化，但是它拥有播放的状态，尽管dom根本没变化，但是它在播放所以其实在第四维时间上对用户展现的是有变化的。因此绑定策略无法detect到时间线上的变化。而Vue我感受到它是以绑定为最终目的的哲学来设计的api，在绑定之外提供的自由api不多，所以可能单独出一个多媒体操控api应该会好很多。

当然，我也不是很懂，文中必有很多错误之处，还请不吝赐教。