vue3.3正式发布

  简单记录一下，昨天，也就是2023年5月11号，尤雨溪官宣了vue3.3的正式发布：

https://blog.vuejs.org/posts/vue-3-3

  我看了一些vue3.3主要增加的是关于TypeScript 的 SFC <script setup> 用法。

  下面我就记录一下几个我影响深刻的变化把：

vue3.3 正式发布

  在 vue3 官网的官方博客中，官方发布了相关文章：

  Announcing Vue 3.3

此版本侧重于开发人员体验改进 - 特别是 TypeScript 的 SFC <script setup> 用法。

  下面的<script setup>笔记将以对比的方式进行：

1、defineProps 和 defineEmits

  上接 setup 参数部分，在<script setup>中得这样写：

<script setup>
const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])
// setup 代码
</script>

  同时，我们还可以结合 typescript 使用：

官方文档也说了：现在还不支持复杂的类型和从其他文件进行类型导入，但我们有计划在将来支持。

const props = defineProps<{
  foo: string
  bar?: number
}>()

const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()

优化

  好消息是，上面的 vue3.3 对上面提到的问题进行部分解决：

• defineProps

支持宏中的导入类型和复杂类型

<script setup lang="ts">
import type { Props } from './foo'

// imported + intersection type
defineProps<Props & { extraProp?: string }>()
</script>

• defineEmits

新增 defineEmits 自定义事件写法（更加简洁、优雅）

const emit = defineEmits<{
  foo: [id: number]
  bar: [name: string, ...rest: any[]]
}>()

2、泛型组件

  在 vue3.3 版本开始，还可以在 <script setup> 的组件中通过 generic 属性接受泛型类型参数

<script setup lang="ts" generic="T">
defineProps<{
  items: T[]
  selected: T
}>()
</script>

<script setup lang="ts" generic="T extends string | number, U extends Item">
import type { Item } from './types'
defineProps<{
  id: T
  list: U[]
}>()
</script>

3、defineModel

  关于双向绑定的内容，可以先看看：

vue3 组件 v-model

  如果在组件标签上中使用了 v-model，则在该组件中的双向绑定写法在 vue3.3 中可以简化：

• 原来

<!-- BEFORE -->
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
console.log(props.modelValue)

function onInput(e) {
  emit('update:modelValue', e.target.value)
}
</script>

<template>
  <input :value="modelValue" @input="onInput" />
</template>

• 现在

<!-- AFTER -->
<script setup>
const modelValue = defineModel()
console.log(modelValue.value)
</script>

<template>
  <input v-model="modelValue" />
</template>