【vue3】vue3.3新特性真香

距离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>
相关推荐
万少7 分钟前
我的HarmonyOS百宝箱
前端
江城开朗的豌豆14 分钟前
uni-app弹层遮罩难题?看我如何见招拆招!
前端·javascript·微信小程序
江城开朗的豌豆18 分钟前
小程序生命周期漫游指南:从诞生到落幕的完整旅程
前端·javascript·微信小程序
亿元程序员22 分钟前
100个Cocos实例之双摇杆(57/100)
前端
Mike_jia24 分钟前
Kaniko:无特权容器镜像构建的革命者
前端
欧阳码农26 分钟前
忍了一年多,我做了一个工具将文章一键发布到多个平台
前端·人工智能·后端
Hy行者勇哥27 分钟前
软件开发中前端页面、后台管理页面、后端、数据中台的关系与开发流程
前端
江城开朗的豌豆31 分钟前
跨平台开发实战:我的小程序双端(iOS、安卓)开发指南
前端·javascript·微信小程序
IT_陈寒41 分钟前
Python性能优化:5个让你的代码提速300%的NumPy高级技巧
前端·人工智能·后端
艾小码1 小时前
前端路由的秘密:手写一个迷你路由,看懂Hash和History的较量
前端·javascript