背景
在需求开发过程中，需要用到element-resize-detector来监控组件尺寸变化。 使用方式如下：
import elResize from 'element-resize-detector';
const er = elResize();
er.listenTo(this.$refs.item, (e) => {
this.update(e);
});
但是控制台会报错，并且页面上的其他组件也无法正常使用了：
查看报错详细信息可看出是引用的element-resize-detector中的listenTo出了问题。
报错上说，至少需要一个元素存在。那么经过代码排查发现我在组件中使用了v-if。改为v-show就好了。
那么就涉及到了v-if和v-show的区别。
v-if和v-show
v-if：为true时内容被渲染，为false时元素不存在于文档中；
v-show：内容总会被渲染，true/false只是基于css的样式切换，元素始终存在于文档中。
此时才感觉以前没有真正理解其意义，现在回过头来看使用场景的选择，才发现，嗷～原来如此。
1.
v-if在条件切换时，会对标签进行适当的创建和销毁，而v-show则仅在初始化时加载一次，因此v-if的开销相对来说会比v-show大。
2.v-if是惰性的，只有当条件为真时才会真正渲染标签；如果初始条件不为真，则v-if不会去渲染标签。v-show则无论初始条件是否成立，都会渲染标签，它仅仅做的只是简单的CSS切换。
