距离vue3.3发布已经过了一年多(2023.5.11),vue3.3提高开发体验的新特性你用了吗?
组件内部导入复杂类型
3.3之前想在组件内部导入复杂类型做props类型是不支持的。
html
<script setup lang="ts">
import type { People } from '@/types';
withDefaults(defineProps<People>(), {
name: '张三',
age: 18,
});
</script>
<template>
<div>{{ name }}{{ age }}</div>
</template>
Generic Components
如果组件定义时你不确定使用者需要传入什么样的属性类型,可以根据使用者传入属性值来定组件自定义属性类型,那么Generic Components 必定适合你!!!
- 组件定义
html
<script setup lang="ts" generic="T">
defineProps<{
people: T;
}>();
</script>
<template>
<div>{{ people }}</div>
</template>
- 组件使用
html
<script setup lang="ts">
import GenericComponents from '@/components/GenericComponents.vue';
</script>
<template>
<GenericComponents :people="{ name: 'wgh', age: '18' }"></GenericComponents>
<GenericComponents
:people="{ name: 'wgh', age: '18', class: '超级一班' }"
></GenericComponents>
</template>
defineEmits简写
3.3可以吧defineEmits写成键值对形式,看起来很简洁清晰。
ts
// BEFORE
const emit = defineEmits<{
(e: 'foo', id: number): void
(e: 'bar', name: string, ...rest: any[]): void
}>()
// AFTER
const emit = defineEmits<{
foo: [id: number]
bar: [name: string, ...rest: any[]]
}>()
- example
html
<script setup lang="ts">
const emits = defineEmits<{
change: [num: string];
update: [num: number, ...reset: any[]];
}>();
</script>
<template>
<div @click="emits('change', 'change')">change</div>
<div @click="emits('update', 123, 666, 888, 77, 111)">update</div>
</template>
- 组件使用
html
<script setup lang="ts">
import DefineEmits from '@/components/DefineEmits.vue';
const fn = (res, ...reset) => {
console.log(res, reset);
};
</script>
<template>
<define-emits @change="fn" @update="fn" />
</template>
defineModel组件定义双向数据api
给组件添加双向数据绑定可以增加组件易用性,之前组件双向数据绑定都是定义emit事件来实现的。有了这个api就可以不写emit啦,哈哈哈。
html
<script setup lang="ts">
// before
const props = defineProps<{
cont: number;
}>();
const emits = defineEmits<{
'update:cont': [cont: number];
}>();
// const add = () => {
// emits('update:cont', props.cont + 1);
// };
// after
const num = defineModel('num', {
required: true,
default: 2,
});
const add = () => {
emits('update:cont', props.cont + 1);
num.value++;
};
</script>
<template>
<div>cont:{{ cont }} | num:{{ num }}</div>
<button @click="add">++</button>
</template>
是不是写起来方便多了。
vue3.4新特性(组件使用时变量属性同名简写)
vue3.4发布时间是23年12月28,对于开发者来说,主要是defineModel 双向数据绑定api稳定和变量属性同名简写。
- component
html
<script setup lang="ts">
defineProps<{
name: string;
age: number;
}>();
</script>
<template>
<h1>同名简写</h1>
<div>{{ name }}--{{ age }}</div>
</template>
- use
html
<script setup lang="ts">
import { ref } from 'vue';
import SameNameShorthand from '@/components/Same-nameShorthand.vue';
const name = ref('渣渣辉');
const age = ref(18);
</script>
<template>
<DefineModel v-model:value="name"></DefineModel>
</template>