【小白成长记】使用watch优化获取不同tab下数据的代码逻辑

场景：页面有一个 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})