【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>
相关推荐
careybobo1 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
TDengine (老段)2 小时前
TDengine 中的关联查询
大数据·javascript·网络·物联网·时序数据库·tdengine·iotdb
杉之3 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端3 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡3 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木4 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!4 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷5 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript
还是鼠鼠5 小时前
Node.js全局生效的中间件
javascript·vscode·中间件·node.js·json·express
自动花钱机5 小时前
WebUI问题总结
前端·javascript·bootstrap·css3·html5