【vue3】vue3.3新特性真香

距离vue3.3发布已经过了一年多(2023.5.11),vue3.3提高开发体验的新特性你用了吗？

组件内部导入复杂类型

3.3之前想在组件内部导入复杂类型做props类型是不支持的。

<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 必定适合你！！！

组件定义

<script setup lang="ts" generic="T">defineProps<{people: T;}>();
</script><template><div>{{ people }}</div>
</template>

组件使用

<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写成键值对形式，看起来很简洁清晰。

// 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

<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>

组件使用

<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啦,哈哈哈。

<script setup lang="ts">// beforeconst props = defineProps<{cont: number;}>();const emits = defineEmits<{'update:cont': [cont: number];}>();// const add = () => {//   emits('update:cont', props.cont + 1);// };// afterconst 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

<script setup lang="ts">defineProps<{name: string;age: number;}>();
</script><template><h1>同名简写</h1><div>{{ name }}--{{ age }}</div>
</template>

<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>