【无标题】

lodash-es是什么？

是lodash库的es版本，提供了很多常用的功能函数，比如说map，filter，cloneDeep,omit用ts方式简单展示一下

import {map,filter} from 'lodash-es'
const number =[1,2,3,4,5]
const arr1=map(number,e=>e*2)//[2, 4, 6, 8, 10]
consr arr2=filter(number,e=>e>3)//[4, 5]
const getValue = () => {
    return cloneDeep(demo.value);//深拷贝
  };

//omit 通常用于从对象中排除指定的属性，返回一个新对象，新对象中不包含被排除的属性
// 示例对象
const person = {
  name: 'Alice',
  age: 30,
  city: 'New York',
  country: 'USA'
};

// 要排除的属性
const keysToOmit = ['city', 'country'];

// 使用omit函数排除指定的属性
const newPerson = omit(person, keysToOmit);

console.log(newPerson); // 输出: { name: 'Alice', age: 30 }

{ [key: string]: FormItemProps} 是什么意思？

export type FormItemProps = {
  /** antd组件名称 */
  componentName: string;
  /** 表单项名称 */
  label?: string;
  /** antd组件属性 */
  bind?: any;
  formBind?: any;
  span?: number;
  rules?: Rule[];
  hidden?: boolean;
};
export type FormDataProps = {
  [key: string]: FormItemProps;
};

FormDataProps 它是一个对象类型，每个属性都是都是一个键值对，其中键是字符串类型，值是FormItemProps类型

动态组件 

<script setup>
import Foo from './Foo.vue'
</script>
<template>
<component :is='Foo'/>
</template>

由于组件是通过变量引用 而不是基于字符串组件名注册的，在<script setup>中要使用动态组件的时候 应该用动态 ：is

defineProps和defineEmits Api 在setup中可用

<script steup>
const props=defineProps({
   foo:String
})
const emit=defineEmits(['change','delete'])
</script>

不足之处在于 defineProps没有给props提供默认值，可以如下：withDefaults

const props = withDefaults(defineProps<Props>(), {
  msg: 'hello',
  labels: () => ['one', 'two']
})

defineOptions

可以单独声明组件选项 这是个宏定义，选项将会被提升到模块作用域中，无法访问 ？（后面补充）

<script> 只在组件被首次引入的时候执行一次不同，<script setup> 中的代码会在每次组件实例被创建的时候执行

<script setup>

</script>

<script>
export default {
  name: 'ComponentName'
}
</script>

<template>
  <div>这是之前的写法 需要导入</div>
</template>

<script setup>
defineOptions({
  name: 'ComponentName'
})
</script>

<template>
  <div>宏定义 无需导入</div>
</template>

如果不希望子组件继承，可以在组件的选项中设置 inheritAttrs：false；$attrs为组件中没有在组件中声明的的属性

useSlots() 和 useAttrs()

使用比较罕见，可以通过$slots 和$attrs来访问它们，与setupContext.attrs 等价

<script setup>
import { useSlots, useAttrs } from 'vue'

const slots = useSlots()
const attrs = useAttrs()
</script>

css 的使用

且支持 JavaScript 表达式 (需要用引号包裹起来)：

<script setup>
const theme = {
  color: 'red'
}
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  color: v-bind('theme.color');
}
</style>