在自制 Tab 组件中写会动的下划线遇到了 watchEffect 的坑， anyway最后还是成功解决了。在此做个学习记录
如何实现会动的下划线
- 创建 3 个 ref 的div节点，分别为选中的 div,外包的 div 和下划线 div
- 下划线的长度要等于选中的 div 长度
- 下划线的 left 等于 选中的 div的 left - 外包的 div的 left
代码执行的时机
- 由于创建的几个 div 变量初始化为空报错，所以应该在第一次渲染就执行
- 使用 onMounted
- 但是在 Tab 切换不滑动出现 bug ，所以得在每一次更新再次执行
- 使用 onUpdated 考虑到代码优化 ，使用了 watchEffect
- 代替 onMounted 和 onUpdated。
- 每一次变化都执行。
- 但是在挂载之前就会运行，因此考虑将 watchEffect 放在了onMounted 里面
功能应该是能实现的，但是还是出现了 bug
watchEffect bug ?
vue 3 正式版与 rc 版的 watchEffect 有更新。
文档里的 BREAKING CHANGES
watch APIs now default to use flush: 'pre' instead of flush: 'post'
- flush ：watchEffect 的第二个参数
- post ：页面渲染之后执行。更新到 pre ：页面渲染之前执行
- 我使用的是正式版，当 watchEffect 不传第二个参数默认是 flush:'pre'
- 由于在页面渲染前 watchEffect 会执行
- 但是变量是在页面渲染的过程中变化的，watchEffect 却早已执行了，他认为变量还是原来的值
- 每次 watchEffect 都是上一次的变量
- 因此出现了 bug，少执行了一次即下划线少了一次划动
解决： 给 watchEffect 第二个参数指定 post 即可 {flush:'post'}
