踩坑一

情况描述：在我使用<component/>标签像动态的绑定标签的时候，由于标签是个数组，所以需要用到v-for,但是由于我希望标签的内容是根据是否被selected决定的，也就是说需要依据props的selected决定标签的显示情况

方案1. 一开始我选择了v-if 示例：<component class="evua-tabs-content-item" v-for="c in defaults" v-if="c.props.title===selected" :is="c" />

这时候提示c是没有定义的，经过查看vue3,可以得知，在vue3中，v-if的优先级大于v-for，所以v-if是无法进入v-for的变量的

同时值得注意的是，这个是vue3的一个break

方案2 选择用计算属性计算当前的title和selected相等，然后返回只需要显示的标签，绑定在:is上面，但是后面我又遇到了另一个问题就是一开始的时候我并没有绑定:key在component标签上，导致内容无法更改，后面经查阅发现，需要绑定一个动态的key值

<component :is="current" :key="current.props.title"/>

setup(){
const current = computed(()=>{return defaults.find(t=>t.props.title===props.selected)})

}

方案3 动态绑定class值，并在css中结合diasplay:block和display:none来控制显示和隐藏

<component class="evua-tabs-content-item" v-for="c in defaults" :class="{selected:c.props.title===selected}" :is="c" />

//css
.evua-tabs-content-item {
        display: none;
        &.selected {
            display: block;
        }
    }

踩坑二

在做代码优化的时候，发现watchEffect可以实现从标签挂载到更新实时监测，所以一开始用onMounted和onUpdated挂载标签，后面发现可以用watchEffect实现,所以最初使用的是watchEffect(getValue)，后面运行的时候发现watchEffect()在标签挂载之前已经开始监测了，所以导致数据一开始读到的是null，经过查阅文档发现，可以传入第二个参数flush，保证推迟到组件渲染完成后读取数据

 			const selectedItem = ref<HTMLDivElement>(null);
            const indicator =ref<HTMLDivElement>(null);
            const container = ref<HTMLDivElement>(null);
            const getValue=()=>{
                const {width} = selectedItem.value.getBoundingClientRect()
                indicator.value.style.width = width+'px'
                const {left:left1} = selectedItem.value.getBoundingClientRect()
                const {left:left2} = container.value.getBoundingClientRect()
                const left = left1 -left2
                indicator.value.style.left = left +'px'
        };
 			
            onMounted(getValue);
            onUpdated(getValue);
            ----------------------
            watchEffect(getValue,
                {
                    flush: 'post'
                });