子组件因多次监听导致重复调用接口问题

问题原因：

有多个tab切换页面，因为内容一致，写了一个公共组件，这个组件我每次监听当前tab点击的index值，因为有3个tab，就会监听三次，所以每个tab里对应的接口就会相应的调用3次接口，造成渲染变慢影响性能。

各种调试：

试了各种方法，监听时不调用，监听后再调用；加实例销毁钩子函数；各种判断……发现每次监听时打印出来的对比值都是三个，因为有三个tab，说明就是一次tab点击，会对比三次，每次对比都会触发相应的接口。问题定位清晰了就很好解决啦。

解决方案1：

不在组件里进行监听，在组件里只接收父组件传值。
要在父组件每次切换tab时直接调用相应的接口，把值传递给子组件，即可解决此问题。

解决方案2：

使用vuex进行存储，但如果不是大型项目，用vuex纯属为了用而用，代码就会变得不轻量，冗余。