今天用vue3+ts+setup语法糖实现一个无限嵌套的tree组件，先看一下实现的效果，样式没有做过多的修饰。
本篇文章是很基础的内容，本人主要也是刚接触
vue3这一套。最近也开始练手将公司开发时的一些vue2的组件用vue3来实现一套，也希望看到的人能有所获。
Vue3的setup语法糖
vue3中的setup的加入，使得vue可以从Options API转变为Composition API。Options API会导致data, methods, computed等必须分开到不同的对象中实现，使得逻辑过于分散。而Componsitions API可以将同一个功能写在setup中同一个代码块中，而不需要分开来写。有些同学可能觉得一个组件所有功能写在一起，会导致所有代码都在一坨，反而容易导致逻辑混乱，其实完全不必担心，vue3可以像react hook一样，把一段逻辑抽离，一个逻辑就是一个代码块，再在组件里面引入，这样逻辑清晰，同时方便复用，也取代了vue2中mixin的写法。看下面这张图就明白了：
在setup语法糖中，我们不需要使用return返回响应式变量，函数，组件，只需要在组件顶层声明即可，然后可以在html模板中直接使用，看下面一段代码：
const {dataList, levelPadL, selectIds} = defineProps({
// 数据源列表
dataList: {
type: Array as PropType<BaseOptons[]>,
required: true
},
// 层级缩减，默认10px
levelPadL: {
type: Number,
default: 10
},
// 已选中的id集合
selectIds: {
type: Array,
default: []
}
})
上面的dataList,levelPadL,selectIds三个props是不用再return的，我们是可以直接在模板中使用。另外setup语法糖和setup勾子函数的区别是不能接受props和context参数，但是多了一些全局变量，这里主要用到defineProps,defineEmits。前者用来声明组件需要接受的props，后者用来接受来自父组件的事件，这里我们的tree组件需要接受一个更新选中的事件，这里的想法是能实现props的双向绑定，所以props selectIds采用了vue3的新语法v-model:selectIds来实现的，看下面的代码：
const emits = defineEmits(['update:selectIds'])
// some change
emits('update:selectIds', selectIds)
Ts的运用及Vue3中的ts
首先我们为了props能有类型提醒，我们需要定义我们的props类型，这里主要是tree组件接受到的一个dataList的类型，是一个无限嵌套的的数组：
export interface BaseOptions {
label: string,
value: string | number,
children?: BaseOptions[]
}
// 引用该类型并使用
const dataList = reactive<BaseOptions[]>([{
label: '周一不开心',
value: '1',
children: [
{label: '不开心1', value: '1-1', children: [{label: '不开心1-1', value: '1-1-1'}]},
{label: '不开心2', value: '1-2', children: [{label: '不开心2-1', value: '1-2-1'}]},
{label: '开心3', value: '1-3', children: [{label: '开心1-3-1', value: '1-3-1', children: [{label: '开心1-3-2', value: '1-3-2'}]}]}
]
}])
// 接受该类型props并标记类型
defineProps({
// 数据源列表
dataList: {
type: Array as PropType<BaseOptions[]>,
required: true
}
})
可以看到，vue3中定义reactive中需要使用ts的泛型才能标记类型。而如果props的类型如果采用运行时声明的方式，当props的类型为Object或者Array时，则需要使用Array as PropType<BaseOptions[]>来标记类型，相比常规ts的用法，还是麻烦不少。
组件其他部件
组件使用到了一个双向绑定的props selectIds,与vue2相比略有区别：v-model:selectIds="selectIds"，这样可以更灵活一些。子组件修改该props同样是通过emits(update:propsName)。
模板部分
<ul class="treeList" :style="{'padding-left': `${levelPadL}px`}">
<li v-for="item in dataList" class="item" :key="item.value" :class="{'hasChild': item?.children?.length}">
<div class="label" :class="{'is-open': isOpen(item.value)}" @click="toggleItem(item)">
<span>{{item.label}}</span>
<span class="icon" v-if="item?.children?.length"></span>
</div>
<collapseTransition>
<template v-if="isOpen(item.value)">
<treeList v-bind="$props" :data-list="item.children"></treeList>
</template>
</collapseTransition>
</li>
</ul>
可以看到vue3的模板中，终于可以使用.?可选链新语法了，实在太爽了，不会因为对象或数组的空指针导致整个dom不渲染了。collapseTransition动画组件是基于vue2实现了，看来是完全兼容的。
组件方法
// 展开收起方法
const toggleItem = (item: BaseOptions) => {
const {value, children = []} = item
if (children.length) {
const findIndex = selectIds.findIndex(id => value === id)
if (findIndex > -1) {
selectIds.splice(findIndex, 1)
} else {
selectIds.push(value)
}
emits('update:selectIds', selectIds)
}
}
// 判断是否展开
const isOpen = (id: Number | String) => {
return !!selectIds.find(item => id === item)
}
总结
整个组件还是蛮简单的，也是我们常常要用到的，这里主要是基于vue3+setup+TS来实现熟悉一下语法和新特性，大家也可以用来练练手，体验体验vue3，看它是否是真香，卷起来吧！！！
