场景:页面有一个 el-tab,共两个tab:Tab1 与 Tab2。需求要求进入页面默认active第二个tab即Tab2。
开始代码写成如下:
<el-tabs v-model="tabActiveName" type="card" @before-leave="handleTabsClick"><!-- Tab1 --><el-tab-pane label="Tab1" name="first">...</el-tab-pane><!-- Tab2 --><el-tab-pane name="second" :lazy="true">...</el-tab-pane>
</el-tabs>
import { onMounted } from 'vue'const tabActiveName = ref('second')
onMounted(() => {getSecondTabData()
})// 切换 Tab1 与 Tab2
const handleTabsClick= (newTab) => {if (newTab === 'first') {getFirstTabFunc()} else {getSecondTabData()}
}// 获取 Tab1 下数据的方法
const getFirstTabFunc = () =>{}// 获取 Tab2 下数据的方法
const getSecondTabData = () =>{}
分析:Tab1 与 Tab2 下的数据是在点击tab时通过给el-tab绑定before-leave事件中进行处理获取的, 同时进入页面 onMounted 时获取了第二个tab的数据(因为按产品需求默认展示第二个tab)。这样写代码会有一个问题:如果后续需求改为初始展示Tab1,则需要修改进入页面 onMounted 时需改为获取Tab1的数据。代码兼容性差。
优化为:使用watch监测tab 的 active变化且设置 immediate 为 true ,这样就不再需要进入页面获取某个tab数据的逻辑了。直接在watch中监测到tab active变化,则调用对应tab下的数据接口。这样无论初始展示哪个tab,代码都可以兼容,只需要修改设置tab active值,无需修改其它逻辑。
优化后的代码为:
<!-- el-tab 中 不再需要绑定 @before-leave="handleTabsClick" -->
<el-tabs v-model="tabActiveName" type="card">...
</el-tabs>
const tabActiveName = ref('second')// 获取 Tab1 下数据的方法
const getFirstTabFunc = () =>{}// 获取 Tab2 下数据的方法
const getSecondTabData = () =>{}/* 注意这里 watch 的逻辑需要写在 getFirstTabFunc 与 getSecondTabData 这两个方法后面。
如果写在前面会报错:getSecondTabData is not a function。
因为watch设置了immediate:true,代码执行到这里会立即执行一次watch回调函数里的内容,
调用getSecondTabData时这个方法尚未定义,所以会报错。 */
watch(infoActiveName,(newValue)=>{if (newValue === 'first') {getFirstTabFunc()} else {getSecondTabData()}
},{immediate:true})