Vue.js: Vue 3.4 新特性

// ❌ 翻车版：v-model 需要 10 行样板代码
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)
})

// ✅ 正确版：1 行搞定 v-model
const modelValue = defineModel('modelValue')

// 现在可以：
// - 读：modelValue.value
// - 写：modelValue.value = 'new value'（自动 emit）
// - watch：watch(modelValue, ...)
// - 父组件 v-model 双向绑定照常工作

<!-- 子组件：CustomInput.vue -->
<template>
  <input :value="modelValue" @input="modelValue = $event.target.value">
</template>

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

<!-- 父组件：使用 v-model -->
<template>
  <CustomInput v-model="searchQuery" />
  <p>Search: {{ searchQuery }}</p>
</template>

<script setup>
const { ref } = Vue
const searchQuery = ref('')
</script>

// 1. 默认值
const modelValue = defineModel('modelValue', { default: '' })

// 2. 类型约束（TypeScript）
const count = defineModel<number>('count', { default: 0 })

// 3. transform 转换（写时转换）
const trimmed = defineModel('text', {
  set(value) {
    return value.trim()  // 自动 trim
  }
})

// 4. getter（读时转换）
const upper = defineModel('text', {
  get(value) {
    return value.toUpperCase()  // 总是大写
  }
})

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

<!-- 子组件：TrimInput.vue -->
<template>
  <input :value="value" @input="value = $event.target.value">
</template>

<script setup>
const value = defineModel('value', {
  // get: 读时转换
  get(val) {
    return val?.toUpperCase() || ''
  },
  // set: 写时转换
  set(val) {
    return val?.trim() || ''
  },
  default: ''
})
</script>

<!-- 父组件 -->
<CustomInput v-model="name" />
<!-- 用户输入 "alice" → trim 不变 → uppercase → "ALICE" -->

// ❌ Vue 3.3 及之前
const props = defineProps({ count: Number, name: String })

// 模板中直接用 props.count
// JS 中要 props.count
// 解构会丢失响应
const { count, name } = props  // count/name 变普通值

<!-- 子组件 -->
<template>
  <p>{{ count }} - {{ name }}</p>
  <button @click="count++">+1</button>
</template>

<script setup>
// ✅ Vue 3.4：解构后仍是响应式
const { count, name } = defineProps<{
  count: number
  name: string
}>()
</script>

// 1. 简化 props 使用
const { count, name } = defineProps<{ count: number; name: string }>()

// 2. 解构 + 重命名
const { count: total, name: userName } = defineProps<{ count: number; name: string }>()

// 3. 解构 + 默认值
const { count = 0, name = 'Guest' } = defineProps<{ count?: number; name?: string }>()

// 4. 配合 watch（解构后 watch 仍工作）
const { count } = defineProps<{ count: number }>()
watch(count, (newVal) => console.log('count changed:', newVal))

// 5. 配合 computed（同样保持响应）
const { count } = defineProps<{ count: number }>()
const double = computed(() => count * 2)

// ⚠️ 解构的 props 不能再赋值
const { count } = defineProps<{ count: number }>()
count = 10  // ❌ 错误：Assignment to constant variable

// ✅ 正确：通过 emit 让父组件改
const emit = defineEmits(['update:count'])
const handleClick = () => emit('update:count', count + 1)

// ❌ 旧写法：手写 ID，SSR 会冲突
const id = `input-${Math.random()}`

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

<!-- 1. 表单 label 关联 -->
<template>
  <label :for="id">Username</label>
  <input :id="id" v-model="username">
</template>

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

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

<!-- 3. 表单错误信息 -->
<template>
  <input v-model="email" :aria-invalid="!!error" :aria-errormessage="`${id}-error`">
  <p v-if="error" :id="`${id}-error`">{{ error }}</p>
</template>

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

<!-- 5. 模态框 -->
<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">
const { useTemplateRef, onMounted } = Vue
import MyChart from './MyChart.vue'

// ✅ Vue 3.5+：一个名字搞定
const inputRef = useTemplateRef<HTMLInputElement>('usernameInput')
const chartRef = useTemplateRef<InstanceType<typeof MyChart>>('chartComponent')

// ✅ TypeScript 完美推断
onMounted(() => {
  inputRef.value?.focus()  // HTMLInputElement 类型
  chartRef.value?.refresh()  // 组件实例方法
})
</script>

✅ Vue 3.4：
  - defineModel 宏替代 v-model 复杂写法
  - 响应式 props 解构
  - 同名简写（<input :value> 替代 :value="value"）
  - 错误处理改进
  - 模板解析器重写（2x 性能）

✅ Vue 3.5：
  - useTemplateRef（推荐）
  - 响应式 props 解构改进
  - useId 稳定
  - 延迟 teleport
  - 改进的 Suspense

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<style>
input { padding: 6px; border: 1px solid #ddd; border-radius: 4px; margin: 4px; }
.btn { padding: 6px 12px; background: #42b883; color: white; border: none; border-radius: 4px; cursor: pointer; }
</style>

<div id="app">
  <h4>1. v-model 双向绑定（CDN Vue 3.5）</h4>
  <input v-model="text" placeholder="输入文本">
  <p>实时显示: {{ text || '(空)' }}</p>

  <h4>2. 表单验证 + 错误提示</h4>
  <input v-model="email" placeholder="Email">
  <p v-if="error" style="color: #ef4444;">{{ error }}</p>
  <button class="btn" @click="validate">验证</button>
</div>

<script>
const { createApp, ref, computed } = Vue

const App = {
  setup() {
    const text = ref('')
    const email = ref('')
    const error = ref('')

    function validate() {
      if (!email.value || !email.value.includes('@')) {
        error.value = '❌ 邮箱格式错误'
      } else {
        error.value = ''
        alert('✅ 邮箱有效')
      }
    }

    return { text, email, error, validate }
  }
}

createApp(App).mount('#app')
</script>

<!-- ⚠️ 需 Vite 项目，纯展示 -->

<!-- 1. defineModel 宏（替代 v-model 复杂写法） -->
<script setup>
// 1 行替代 10 行：props.modelValue + emit('update:modelValue')
const text = defineModel('text', { default: '' })
</script>
<template>
  <input v-model="text">
</template>

<!-- 2. 响应式 props 解构（Vue 3.4+） -->
<script setup>
// ✅ 解构后仍响应（默认深响应）
const { count, name } = defineProps<{
  count: number
  name: string
}>()
// 直接用 count, name，无需 props.count, props.name
</script>

<!-- 3. useId（SSR 安全的唯一 ID） -->
<script setup>
const { useId } = Vue
const id = useId()   // 自动生成 v-0, v-1, ...
</script>
<template>
  <label :for="id">Email</label>
  <input :id="id" type="email">
</template>

<!-- 4. useTemplateRef（Vue 3.5+ 强类型） -->
<script setup lang="ts">
const { useTemplateRef, onMounted } = Vue

// TypeScript 自动推断为 HTMLInputElement | null
const inputRef = useTemplateRef<HTMLInputElement>('usernameInput')

onMounted(() => {
  inputRef.value?.focus()
})
</script>
<template>
  <input ref="usernameInput" type="text">
</template>