v-for与 :ref
<template>
<div class="hamburger-tabs-nav-item" v-for="(title,index) in titles" :key="index"
:class="{selected: title === selected}"
:ref="el=>{if(title === selected) selectedNavItem = el}"
@click="()=>select(title)">
{{title}}
</div>
</template>
v-for
使用v-for对 titles 数组进行遍历并渲染。使用alias in expression 为元素（第一个参数）、索引（第二个参数，在对象中为键名）指定别名。
因为v-for涉及DOM元素的更新，所以必须搭配 key使用。
在没有 key 的情况下，Vue 将使用一种最小化元素移动的算法，并尽可能地就地更新/复用相同类型的元素。如果传了 key，则将根据 key 的变化顺序来重新排列元素，并且将始终移除/销毁 key 已经不存在的元素。
同一个父元素下的子元素必须具有唯一的 key。重复的 key 将会导致渲染异常。
当 key变化时，元素会被替换而不是更新。
参见列表渲染
:ref模板引用
ref允许我们在DOM元素或者组件实例挂载后获取其引用。
在 v-for中获取模板引用时我们获得的是一个对应的数组。
另外，ref 还可以使用函数模板引用，也就是说使用 :ref可以将 refattribute 绑定为一个函数，每次组件更新时都被调用。该函数会收到元素引用作为其第一个参数：
<input :ref="(el) => { /* 将 el 赋值给一个数据属性或 ref 变量 */ }">
在绑定的元素被卸载时，函数也会被调用一次，此时的 el参数会是 null。
<component>
所有的<Tab>组件是作为 children 类似插槽一齐传入 <Tabs> 的，但导航栏的内容需要与选中的导航对应进行显示，如何做到？
这时应该使用动态挂载组件。
<template>
<div class="hamburger-tabs-content">
<component :is="current" :key="current.props.title"></component>
</div>
</div>
</template>
<script lang="ts">
import Tab from './Tab.vue';
import {computed, onMounted, ref, watchEffect} from 'vue';
export default {
name:'Tabs',
components: {Tab},
props:{
selected:{
type:String,
default:'导航一'
}
},
setup(props,context){
const selectedNavItem = ref<HTMLDivElement>(null)
const indicator = ref<HTMLDivElement>(null)
const container = ref<HTMLDivElement>(null)
const defaults = context.slots.default();
defaults.forEach(item => {if(!(item.type.name === 'Tab')){throw new Error('Tabs只接受Tab')}} )
const titles = defaults.map(item=>item.props.title)
const current = computed(()=> defaults.filter(item=>item.props.title === props.selected)[0])
const select= (title)=>{
context.emit('update:selected',title)
}
}
</script>
首先使用 setup的第二个参数 context，它包含了三个属性：attrs、emit、slots。分别相当于组件实例的 $attrs、$emit 和 $slots这几个属性。其中slots表示父组件传入插槽的对象。每一个插槽都在 this.$slots 上暴露为一个函数，返回一个 vnode 数组，同时 key 名对应着插槽名。默认插槽暴露为 this.$slots.default。
使用计算属性 computed筛选出于选中 title 对应的子组件 current，在模板中搭配 <component>进行动态渲染。
<component>，一个用于渲染动态组件或元素的“元组件”。
要渲染的实际组件由isprop 决定。
- 当
is是字符串，它既可以是 HTML 标签名也可以是组件的注册名。 - 或者，
is也可以直接绑定到组件的定义。
此时需要<component>做的渲染是一个动态的切换，涉及到DOM的更新，因此需要一个添加一个独特的 key，保证渲染不出错。
ref操作DOM元素
onMounted(()=>watchEffect(()=>{
const {width,left:left1} = selectedNavItem.value.getBoundingClientRect()
const {left:left2} = container.value.getBoundingClientRect()
//使用.getBoundingClientRect获取DOM元素的宽度以及left
const left = left1 - left2
indicator.value.style.width = width + 'px'
indicator.value.style.left = left + 'px'
//使用xxx.style改变DOM的样式
},{flush:'post'}))//watchEffect的第二个参数flush，精确设置执行时机，post意为在模板渲染后执行钩子
//使用onMounted是因为用ref获取模板中的DOM元素引用值需在组件挂载之后
