由于新工作需要用vue，所以最近接触最多的也是vue，因为之前一直在用react，所以对于vue上手还是很快的。
我也尽量找一些他们两个的异同点，除了多了一些辅助用的方法以外，最大的不同应该是对于组件间的通信，不仅有props，还有一种事件监听，也是可以通过组件间传递的。
但是，在vue2.+中，vue引入了diff算法和虚拟dom来提升效率。我们知道这些事为了处理频繁更新dom元素所提出的一种优化方案，可频繁变动更新以及事件监听的初始化之间是否会有矛盾，当组件需要变动时，有没有对注册过的事件进行解绑？ 我们来写一些简单的代码印证一下。
我们写两个div做的按钮，一个是写的html代码，一个是通过组件的形式插入，两个按钮完全一样，但我们加一个disabled的属性在外层，并通过if-else来判断disabled从而显示不同的按钮（当然正常场景下我们不会这么去写代码，这里只是通过这种方式模拟一种特殊场景，我们自行考虑在我们的业务中是否存在这种场景）。
<template> <div> <div v-if="disabled" @click="handleClick">可点击</div> <div v-else >不可点击</div> <Button v-if="disabled" @clickTest="handleClick">可点击</Button> <Button v-else>不可点击</Button> </div> </template> <script> import Button from './Button' export default { data () { return { disabled: true } }, methods: { handleClick() { alert('可点击') } }, components: { Button, }, mounted() { setTimeout(() => { this.disabled = false }, 1000) } } </script> <style> .btn{ margin: 100px auto; width: 200px; line-height: 50px; border: 1px solid #42b983; border-radius: 5px; color: #42b983; } </style>
我们加一点样式，让他尽量好看一点，看着很简单，两个按钮，可点击时为他绑定一个点击事件，不可点击时不为他绑定。不同点是一个是直接写的html代码，一个是组件。组件的代码如下：
<template> <div @click="handleClick"><slot></slot></div> </template> <script> export default { methods: { handleClick() { this.$emit('clickTest') } } } </script>
然后在mounted周期里加一个1秒的settimeout将disabled变为false，然后我们测试一下
当disabled还是true得时候，两个按钮点击都会弹出可点击的alert。但当disebled变为false的时候，上面用html写的不会再弹框，可下面用组件写的就还是会弹窗。
这种问题出现时是非常不好定位的，因为代码上很显然不会去调取这个clicktest事件，而在页面上，我们也能确定按钮已经变为不可点击的那一个了。那为什么这个事件还是会被调取呢？
这先要从diff算法说起，传统的diff tree算法的算法复杂度是O(n^3),而react在引入diff算法时，抛除了跨级移动的情况，即只比对同一级的节点异同，让算法复杂度降低到了O(n)，让我们可以肆无忌惮（当然也要适可而止）的频繁刷新整个页面。
（呵呵，没图）
diff有一条策略是拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构。所以它的比对顺序就是
1）tree diff
2）component diff
3）element diff
回到我们的代码上，我们在进行component diff时，认为他们是相同的组件，然后进行element diff，即进行新增 删除和移动所以问题就是发生在了这里，在实例化组件的时候我们初始化了事件监听，但在替换相同组件里的dom时，vue并没有对已添加到组件上的事件监听做删除。
我们看一下vue的代码，
Vue.prototype.$emit = function (event: string): Component { const vm: Component = this if (process.env.NODE_ENV !== 'production') { const lowerCaseEvent = event.toLowerCase() if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) { tip( `Event "${lowerCaseEvent}" is emitted in component ` + `${formatComponentName(vm)} but the handler is registered for "${event}". ` + `Note that HTML attributes are case-insensitive and you cannot use ` + `v-on to listen to camelCase events when using in-DOM templates. ` + `You should probably use "${hyphenate(event)}" instead of "${event}".` ) } } let cbs = vm._events[event] if (cbs) { cbs = cbs.length > 1 ? toArray(cbs) : cbs const args = toArray(arguments, 1) for (let i = 0, l = cbs.length; i < l; i++) { try { cbs[i].apply(vm, args) } catch (e) { handleError(e, vm, `event handler for "${event}"`) } } } return vm }
vue是通过vdom里的_events属性下确定是否有绑定事件的。我们看一下不可点击的按钮的_events
: clickTest : Array(1) 0 : ƒ invoker() length :
发现clicktest还在。这就是问题所在了。
那么我们该如何去回避这样的问题呢，还是应从diff的比对方式来解决问题，还是看代码。