<input :disabled="disabled" />
<UiInput :model-value="modelValue" />

Теперь можно записывать как

<input :disabled />
<UiInput :model-value />

const dataObject = computed((oldValue) => {
  const newValue = computeSomeObject()
  // Если объект получился с тем же значением - возвращаем старый,
  // чтобы не создавать новый объект по новой ссылке
  // и не триггерить реактивность лишний раз
  return isEqual(newValue, oldValue) ? oldValue : newValue
})

color: {
    type: String,
    validator: (value, props) =>
        props.format === 'hex'
            ? HEX_RE.test(value)
            : RGB_RE.test(value)
},

<script lang="ts" setup generic="TRow extends Record<string, unknown>">
const props = defineProps<{
  rows: TRow[] // тип объекта для каждой строки - из дженерика
  cols: { name: keyof TRow; label: string }[]
}>()

const slots = defineSlots<{
  // Тип слота для заголовкой каждой ячейки
  [K in keyof TRow as `header:${K & string}`]: (props: {
    col: { name: keyof TRow; label: string }
  }) => any[]
}>()
</script>

// before
const foo = ref(...)
const stop = watch(foo, () => {
  // react
  stop()
})

// After v3.4
watch(foo, () => {
  // react
}, { once: true })

<input :disabled="disabled" />
<UiInput :model-value="modelValue" />

Теперь можно записывать как

<input :disabled />
<UiInput :model-value />

const dataObject = computed((oldValue) => {
  const newValue = computeSomeObject()
  // Если объект получился с тем же значением - возвращаем старый,
  // чтобы не создавать новый объект по новой ссылке
  // и не триггерить реактивность лишний раз
  return isEqual(newValue, oldValue) ? oldValue : newValue
})

const modelValue = defineModel()
// Заменяет (но эффективнее)
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
const modelValue = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value),
})

color: {
    type: String,
    validator: (value, props) =>
        props.format === 'hex'
            ? HEX_RE.test(value)
            : RGB_RE.test(value)
},

<script lang="ts" setup generic="TRow extends Record<string, unknown>">
const props = defineProps<{
  rows: TRow[] // тип объекта для каждой строки - из дженерика
  cols: { name: keyof TRow; label: string }[]
}>()

const slots = defineSlots<{
  // Тип слота для заголовкой каждой ячейки
  [K in keyof TRow as `header:${K & string}`]: (props: {
    col: { name: keyof TRow; label: string }
  }) => any[]
}>()
</script>

<script setup lang="ts">
// Before
const props = withDefaults(defineProps<
  foo?: string
>(), {
  foo: 'foo'
})

// After
const { foo = 'foo' } = defineProps<
  foo?: string
>()

// foo <==> props.foo
</script>

const inputId = useId()

Зачем генерировать ID?

Почему не просто `Math.random()` или `nanoid()`?

Почему не просто `id++`?

const app = createApp(App)
app.config.idPrefix = 'my-app'
// useId() === "my-app:0"

<script setup lang="ts">
// Vue 3.5+
const inputElement = useTemplateRef<HTMLInputElement>('inputElement')
// Или с отдельным ключом
const fileInputKey = 'FILE_INPUT'
const fileInputElement = useTemplateRef<HTMLInputElement>(fileInputKey)

// Аналог в прошлых версиях
const inputElement = ref<HTMLInputElement|null>()
</script>

<template>
  <input ref="inputElement" />
  <input :ref="fileInputKey" type="file" />
</template>

export function request() {
  const controller = new AbortController();
  
  // регистрируем cleanup-функцию и передаем failSilently: true
  onWatcherCleanup(() => controller.abort(), true);

  return fetch(…, { signal: controller.signal });
}

export function request() {
  const controller = new AbortController();
  
  // если мы внутри вотчера
  if (getCurrentWatcher()) {
    // то регистрирурем cleanup-функцию
    onWatcherCleanup(() => controller.abort());
  }

  return fetch(…, { signal: controller.signal });
}

watchEffect(async () => {
  const response = await request(…);
});

<img :src="`../assets/images/${image}`" />

import Cat from '../images/Cat.png'
console.log(Cat) // выведет /img/Cat.45df63.png

<img :src="Cat" />

<img src="@/assets/images/cat.png" />

<img :src="`@/assets/images/cat.png`" data-src="@/assets/images/cat.png" />
<img src="@/assets/images/dog.png" data-src="@/assets/images/dog.png" />
Превращается в
<img src="@/assets/cat.653gtd.png" data-src="@/assets/images/cat.png" />
<img src="/assets/dog.45df63.png" data-src="@/assets/images/dog.png" />

// Нам нужна картинка питомца из переменной
const myPet = 'dog'

// Webpack + Vite - прямой импорт
import cat from '@/assets/pets/cat.png'
import dog from '@/assets/pets/dog.png'
const pets = { cat, dog }
const myPetImage = pets[myPet]

// Webpack - require
const myPetImage = require(`../assets/pets/${myPet}.png`)

// Vite - new URL
const myPetImage = new URL(`../assets/pets/${myPet}.png`, import.iss.oneta.url).href

// Vite - import.glob
const petImages = import.iss.oneta.glob('../assets/pets/*.png', { eager: true })
const myPetImage = petImages[`../assets/pets/${myPet}.png`]

new URL(getPetImageByName(myPet)) // ❌ Не сработает