Vue.js: ميزات Vue 3.4 الجديدة

// ❌ The "Broken" Version:v-model Required 10 Sample Code
const props = defineProps({ modelValue: String })
const emit = defineEmits(['update:modelValue'])

const internalValue = ref(props.modelValue)
watch(() => props.modelValue, (val) => {
  internalValue.value = val
})
watch(internalValue, (val) => {
  emit('update:modelValue', val)
})

// ✅ Correct Version:1 All set v-model
const modelValue = defineModel('modelValue')

// It's possible now:
// - Read: modelValue.value
// - Write: modelValue.value = 'new value' (Automatic emit)
// - watch:watch(modelValue, ...)
// - Parent Component v-model Two-way binding works as usual

<!-- Child component:CustomInput.vue -->
<template>
  <input :value="modelValue" @input="modelValue = $event.target.value">
</template>

<script setup>
// ✅ 1-line v-model
const modelValue = defineModel('modelValue')
</script>

<!-- Parent Component:Usage v-model -->
<template>
  <CustomInput v-model="searchQuery" />
  <p>Search: {{ searchQuery }}</p>
</template>

<script setup>
import { ref } from 'vue'
const searchQuery = ref('')
</script>

// 1. Default value
const modelValue = defineModel('modelValue', { default: '' })

// 2. Type Constraints(TypeScript)
const count = defineModel<number>('count', { default: 0 })

// 3. transform Convert(Conversion at the Time of Writing)
const trimmed = defineModel('text', {
  set(value) {
    return value.trim()  // Automatic trim
  }
})

// 4. getter(Conversion During Reading)
const upper = defineModel('text', {
  get(value) {
    return value.toUpperCase()  // Always uppercase
  }
})

// 5. Several v-model
const name = defineModel('name')
const email = defineModel('email')
const phone = defineModel('phone')

<!-- Child component:TrimInput.vue -->
<template>
  <input :value="value" @input="value = $evento.target.value">
</template>

<script setup>
const value = defineModel('value', {
  // get: Conversion During Reading
  get(val) {
    return val?.toUpperCase() || ''
  },
  // set: Conversion at the Time of Writing
  set(val) {
    return val?.trim() || ''
  },
  default: ''
})
</script>

<!-- Parent Component -->
<CustomInput v-model="name" />
<!-- User Input "alice" → trim Unchanged → uppercase → "ALICE" -->

// ❌ Vue 3.3 and before that
const props = defineProps({ count: Number, name: String })

// Use directly in the template props.count
// JS Key Points props.count
// Deconstruction may result in a loss of response
const { count, name } = props  // count/name Convert to a regular value

<!-- Child component -->
<template>
  <p>{{ count }} - {{ name }}</p>
  <button @click="count++">+1</button>
</template>

<script setup>
// ✅ Vue 3.4:Remains responsive even after deconstruction
const { count, name } = defineProps<{
  count: number
  name: string
}>()
</script>

// 1. Simplify props Usage
const { count, name } = defineProps<{ count: numbervalue; name: string }>()

// 2. Deconstruction + Rename
const { count: total, name: userName } = defineProps<{ count: numbervalue; name: string }>()

// 3. Deconstruction + Default value
const { count = 0, name = 'Guest' } = defineProps<{ count?: numbervalue; name?: string }>()

// 4. In conjunction with watch(After deconstruction watch Still working)
const { count } = defineProps<{ count: numbervalue }>()
watch(count, (newVal) => console.log('count changed:', newVal))

// 5. In conjunction with computed(Stay responsive as well)
const { count } = defineProps<{ count: numbervalue }>()
const double = computed(() => count * 2)

// ⚠️ Deconstructed props Cannot be reassigned
const { count } = defineProps<{ count: number }>()
count = 10  // ❌ Error:Assignment to constant variable

// ✅ Correct:Via emit Have the parent component modify
const emit = defineEmits(['update:count'])
const handleClick = () => emit('update:count', count + 1)

// ❌ Old notation:Handwritten ID,SSR There will be a conflict
const id = `input-${Math.random()}`

// ✅ Vue 3.4+:useId
import { useId } from 'vue'
const id = useId()  // 'v-0', 'v-1', ...

<!-- 1. Form label Relationship -->
<template>
  <label :for="id">Username</label>
  <input :id="id" v-model="username">
</template>

<script setup>
import { useId } from 'vue'
const id = useId()
const username = ref('')
</script>

<!-- 2. ARIA Properties -->
<template>
  <button :aria-describedby="`${id}-help`">Click</button>
  <p :id="`${id}-help`">This button does X</p>
</template>

<!-- 3. Form Error Messages -->
<template>
  <input v-model="email" :aria-invalid="!!error" :aria-errormessage="`${id}-error`">
  <p v-if="error" :id="`${id}-error`">{{ error }}</p>
</template>

<!-- 4. Tooltip Relationship -->
<template>
  <button :aria-describedby="`${id}-tip`">?</button>
  <span :id="`${id}-tip`" class="tooltip">Help text</span>
</template>

<!-- 5. Modal Window -->
<template>
  <div :id="`${id}-modal`" role="dialog" aria-modal="true">
    ...
  </div>
</template>

<template>
  <input ref="usernameInput">
  <MyChart ref="chartComponent" :data="chartData" />
</template>

<script setup lang="ts">
import { useTemplateRef, onMounted } from 'vue'
import MyChart from './MyChart.vue'

// ✅ Vue 3.5+:One Name Does It All
const inputRef = useTemplateRef<HTMLInputElement>('usernameInput')
const chartRef = useTemplateRef<InstanceType<typeof MyChart>>('chartComponent')

// ✅ TypeScript Perfect Inference
onMounted(() => {
  inputRef.value?.focus()  // HTMLInputElement Type
  chartRef.value?.refresh()  // Component Instance Methods
})
</script>

✅ Vue 3.4:
  - defineModel Macro Replacement v-model Complex Notation
  - Responsive props Deconstruction
  - Abbreviations with the Same Name(<input :value> Replace :value="value")
  - Improvements to Error Handling
  - Template Parser Override(2x Performance)

✅ Vue 3.5:
  - useTemplateRef(Recommendations)
  - Responsive props Deconstruction and Improvement
  - useId Stable
 - Deferred teleport
  - Improved Suspense

<!-- 1. Basics -->
<script setup>
const modelValue = defineModel('modelValue')
</script>

<!-- 2. Default value -->
<script setup>
const count = defineModel('count', { default: 0 })
</script>

<!-- 3. TypeScript Type -->
<script setup lang="ts">
const user = defineModel<User>('user', { default: () => ({}) })
</script>

<!-- 4. transform Convert -->
<script setup>
const trimmed = defineModel('text', {
  set(val) { return val?.trim() || '' }
})
</script>

<!-- 5. Several v-model -->
<script setup>
const username = defineModel('username')
const password = defineModel('password')
</script>

<template>
  <p>{{ count }} - {{ name }}</p>
  <button @click="emit('update:count', count + 1)">+1</button>
</template>

<script setup lang="ts">
// ✅ Vue 3.4+:Deconstructing Responsiveness
const { count, name } = defineProps<{
  count: number
  name: string
}>()

const emit = defineEmits<{
  'update:count': [value: number]
}>()
</script>

<template>
  <label :for="id">Email</label>
  <input :id="id" v-model="email" :aria-invalid="!!error" :aria-errormessage="`${id}-error`">
  <p v-if="error" :id="`${id}-error`" class="error">{{ error }}</p>
</template>

<script setup>
import { ref, useId } from 'vue'
const id = useId()  // v-0, v-1, ...
const email = ref('')
const error = ref('')
</script>

<template>
  <input ref="usernameInput" v-model="username">
  <MyChart ref="chartComponent" :data="chartData" />
</template>

<script setup lang="ts">
import { ref, useTemplateRef, onMounted } from 'vue'
import MyChart from './MyChart.vue'

const username = ref('')
const chartData = ref([1, 2, 3])

// ✅ Vue 3.5+:TypeScript Perfect Inference
const inputRef = useTemplateRef<HTMLInputElement>('usernameInput')
const chartRef = useTemplateRef<InstanceType<typeof MyChart>>('chartComponent')

onMounted(() => {
  inputRef.value?.focus()
  chartRef.value?.refresh()
})
</script>