问题原因:
有多个tab切换页面,因为内容一致,写了一个公共组件,这个组件我每次监听当前tab点击的index值,因为有3个tab,就会监听三次,所以每个tab里对应的接口就会相应的调用3次接口,造成渲染变慢影响性能。
各种调试:
试了各种方法,监听时不调用,监听后再调用;加实例销毁钩子函数;各种判断……发现每次监听时打印出来的对比值都是三个,因为有三个tab,说明就是一次tab点击,会对比三次,每次对比都会触发相应的接口。问题定位清晰了就很好解决啦。
解决方案1:
不在组件里进行监听,在组件里只接收父组件传值。
要在父组件每次切换tab时直接调用相应的接口,把值传递给子组件,即可解决此问题。
解决方案2:
使用vuex进行存储,但如果不是大型项目,用vuex纯属为了用而用,代码就会变得不轻量,冗余。