全面剖析Vue3 全新特性 defineModel
更新時(shí)間：2025年08月19日 09:43:49 作者：第七種黃昏
defineModel是Vue3.4引入的一個(gè)編譯器宏,用于簡化組件雙向數(shù)據(jù)綁定的實(shí)現(xiàn),它是對(duì)v-model指令在組件上使用的語法糖,本文給大家介紹Vue3全新特性defineModel的相關(guān)知識(shí),感興趣的朋友一起看看吧
一、defineModel 是什么？
defineModel 是 Vue 3.4 引入的一個(gè)編譯器宏，用于簡化組件雙向數(shù)據(jù)綁定的實(shí)現(xiàn)。它是對(duì) v-model 指令在組件上使用的語法糖，讓開發(fā)者可以更簡潔地實(shí)現(xiàn)父子組件之間的雙向數(shù)據(jù)同步。
二、核心優(yōu)勢
- 代碼簡化：減少樣板代碼，不再需要手動(dòng)定義
props和emit - 類型安全：完美支持 TypeScript 類型推斷
- 功能強(qiáng)大：內(nèi)置支持修飾符處理
- 開發(fā)體驗(yàn)：更直觀的雙向綁定實(shí)現(xiàn)方式
三、基礎(chǔ)用法
3.1 基本實(shí)現(xiàn)
子組件實(shí)現(xiàn)：
<template>
<div>
<input
type="text"
:vaule="modelValue"
@input="e => modelValue = e.target.value"
>
</div>
</template>
<script setup>
import { defineModel } from 'vue';
const modelValue = defineModel()
</script>父組件使用：
<script setup >
import myinput from '@/components/my-input.vue';
import { ref } from 'vue'
const txt = ref('123456')
</script>
<template>
<div>
<myinput v-model="txt"></myinput>
{{ txt }}
</div>
</template>3.2 等效的傳統(tǒng)實(shí)現(xiàn)
在沒有 defineModel 時(shí)，我們需要這樣寫：
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>
<template>
<input
type="text"
:value="props.modelValue"
@input="emit('update:modelValue', $event.target.value)"
>
</template>四、高級(jí)特性
4.1 多 v-model 支持
子組件：
<script setup>
const firstName = defineModel('firstName')
const lastName = defineModel('lastName')
</script>
<template>
<input v-model="firstName">
<input v-model="lastName">
</template>父組件：
<UserForm v-model:first-name="firstName" v-model:last-name="lastName" />
4.2 類型定義
<script setup lang="ts">
// 帶類型的 defineModel
const count = defineModel<number>('count', { default: 0 })
// 復(fù)雜類型
interface User {
name: string
age: number
}
const user = defineModel<User>('user')
</script>4.3 修飾符處理
父組件使用修飾符：
<MyInput v-model.trim="text" />
子組件處理修飾符：
<script setup>
const [modelValue, modifiers] = defineModel({
// setter 中可以訪問 modifiers
set(value) {
if (modifiers.trim) {
return value.trim()
}
return value
}
})
</script>五、實(shí)現(xiàn)原理
defineModel 在編譯階段會(huì)被轉(zhuǎn)換為：
- 一個(gè)
modelValueprop - 一個(gè)
update:modelValue事件 - 一個(gè)計(jì)算屬性，提供 getter 和 setter
編譯后的代碼類似于：
const props = defineProps({
modelValue: { type: String }
})
const emit = defineEmits(['update:modelValue'])
const modelValue = computed({
get() {
return props.modelValue
},
set(value) {
emit('update:modelValue', value)
}
})六、最佳實(shí)踐
命名規(guī)范：
單一模型使用 defineModel()
多個(gè)模型使用 defineModel('name')
默認(rèn)值設(shè)置：
const value = defineModel({
default: ''
})復(fù)雜驗(yàn)證：
const age = defineModel({
type: Number,
validator: (v) => v >= 0
})與原生輸入組件結(jié)合：
<input :value="modelValue" @input="modelValue = $event.target.value" >
七、對(duì)比傳統(tǒng)方式
| 特性 | defineModel | 傳統(tǒng)方式 |
|---|---|---|
| 代碼量 | 1行聲明 | 需要props + emit |
| 類型支持 | 自動(dòng)推斷 | 需要手動(dòng)定義 |
| 多模型支持 | 參數(shù)指定名稱 | 需多個(gè)props/emit |
| 修飾符處理 | 內(nèi)置支持 | 需要手動(dòng)實(shí)現(xiàn) |
| 兼容性 | Vue 3.4+ | 所有Vue3版本 |
八、實(shí)際案例
自定義計(jì)數(shù)器組件
Counter.vue：
<script setup>
const count = defineModel<number>({ default: 0 })
</script>
<template>
<button @click="count--">-</button>
<span>{{ count }}</span>
<button @click="count++">+</button>
</template>父組件使用：
<template>
<Counter v-model="quantity" />
<p>當(dāng)前數(shù)量：{{ quantity }}</p>
</template>
<script setup>
const quantity = ref(1)
</script>九、注意事項(xiàng)
- 版本要求：必須使用 Vue 3.4 或更高版本
- 單向數(shù)據(jù)流：雖然看起來像雙向綁定，但仍然是單向數(shù)據(jù)流
- 復(fù)雜邏輯：對(duì)于復(fù)雜場景，仍然可以使用傳統(tǒng)方式
- Ref解包：在模板中會(huì)自動(dòng)解包，無需
.value
defineModel 是 Vue 3.4 中非常實(shí)用的新特性，它大幅簡化了組件雙向綁定的實(shí)現(xiàn)代碼，同時(shí)保持了類型安全和靈活性。對(duì)于新項(xiàng)目，強(qiáng)烈推薦使用這種方式來實(shí)現(xiàn) v-model 功能。
到此這篇關(guān)于全面剖析Vue3 全新特性 defineModel 的文章就介紹到這了,更多相關(guān)vue defineModel 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
項(xiàng)目中需要用到大量的數(shù)字輸入框限制,為了可以以后能又更多的拓展性,下面這篇文章主要給大家介紹了關(guān)于Vue中輸入框僅支持?jǐn)?shù)字輸入的四種方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-08-08
本文主要介紹了Vue操作數(shù)組的幾種常用方法小結(jié),主要包括map、filter、forEach、find 和 findIndex 、some 和 every、includes、Array.from這幾種方法,感興趣的可以了解一下2023-09-09
vue利用openlayers實(shí)現(xiàn)動(dòng)態(tài)軌跡
這篇文章主要為大家介紹了vue利用openlayers實(shí)現(xiàn)動(dòng)態(tài)軌跡，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
Vue3優(yōu)雅的實(shí)現(xiàn)跨組件通信的常用方法總結(jié)
開發(fā)中經(jīng)常會(huì)遇到跨組件通信的場景,props?逐層傳遞的方法實(shí)在是太不優(yōu)雅了,所以今天總結(jié)下可以更加簡單的跨組件通信的一些方法,文中通過代碼實(shí)例講解的非常詳細(xì),需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue項(xiàng)目中使用postcss-px2rem的方法總結(jié),在項(xiàng)目中為了屏幕適配，經(jīng)常會(huì)用到rem，postcss-px2rem就是為了讓我們直接在將代碼中px自動(dòng)轉(zhuǎn)化成對(duì)應(yīng)的rem的一個(gè)插件，需要的朋友可以參考下2022-05-05
vue element table 表格請求后臺(tái)排序的方法
今天小編就為大家分享一篇vue element table 表格請求后臺(tái)排序的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue 計(jì)數(shù)器的實(shí)現(xiàn)
這篇文章主要介紹了Vue 計(jì)數(shù)器的實(shí)現(xiàn)，主要利用HTML實(shí)現(xiàn)步驟現(xiàn)在頁面上簡單實(shí)現(xiàn)一個(gè)計(jì)數(shù)器，內(nèi)容簡單且詳細(xì),需要的朋友可以參考一下2021-10-10
vue如何判斷數(shù)組中的對(duì)象是否包含某個(gè)值
這篇文章主要介紹了vue如何判斷數(shù)組中的對(duì)象是否包含某個(gè)值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue+element樹組件 實(shí)現(xiàn)樹懶加載的過程詳解
這篇文章主要介紹了vue+element樹組件 實(shí)現(xiàn)樹懶加載的過程，本文通過圖文實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10
vue+vue-validator 表單驗(yàn)證功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue+vue-validator 表單驗(yàn)證功能的實(shí)現(xiàn)代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-11-11