Vue中的v-model是如何實(shí)現(xiàn)雙向數(shù)據(jù)綁定的？

v-model 是 vue 中實(shí)現(xiàn)雙向數(shù)據(jù)綁定的語(yǔ)法糖，其核心機(jī)制是結(jié)合 value 屬性和 input 事件。1. 它通過(guò)將數(shù)據(jù)綁定到表單元素的 value 并監(jiān)聽 input 事件來(lái)更新數(shù)據(jù)，從而實(shí)現(xiàn)雙向同步；2. 在自定義組件中，默認(rèn)使用 value 和 input，但可通過(guò) model 選項(xiàng)自定義 prop 和事件名；3. vue 3 支持多個(gè) v-model，通過(guò)指定參數(shù)名實(shí)現(xiàn)多個(gè)值的雙向綁定；4. 使用時(shí)應(yīng)避免直接修改 props，而應(yīng)通過(guò)觸發(fā)事件通知父組件更新，以保持?jǐn)?shù)據(jù)流清晰。理解這些原理有助于正確高效地使用 v-model 進(jìn)行開發(fā)。

在 Vue 中，v-model 是實(shí)現(xiàn)雙向數(shù)據(jù)綁定的一種便捷方式。它本質(zhì)上是一個(gè)語(yǔ)法糖，結(jié)合了 value 屬性和 input 事件，用于在表單元素（如 input、textarea）與數(shù)據(jù)之間建立同步關(guān)系。

基本原理：綁定 value + 觸發(fā) input

當(dāng)你在一個(gè) 元素上使用 v-model=”message” 時(shí)，Vue 實(shí)際上做了兩件事：

• 把 message 的值作為 value 綁定到輸入框上；
• 監(jiān)聽輸入框的 input 事件，并在觸發(fā)時(shí)更新 message 的值。

也就是說(shuō)，下面這段代碼：

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

<input v-model="message">

等價(jià)于：

<input :value="message" @input="message = $event.target.value">

這樣就實(shí)現(xiàn)了“輸入變化更新數(shù)據(jù)”、“數(shù)據(jù)變化更新輸入”的雙向綁定效果。

在組件中使用 v-model：自定義組件如何支持

在開發(fā)自定義組件時(shí)，如果你想讓它也支持 v-model，需要注意以下幾點(diǎn)：

• 默認(rèn)情況下，v-model 會(huì)把 value 作為 prop 傳遞，并通過(guò) input 事件來(lái)更新父級(jí)數(shù)據(jù)；
• 如果你想用別的名字而不是 value 和 input，可以在組件中使用 model 選項(xiàng)來(lái)自定義。

舉個(gè)例子，如果你希望用 checked 和 change 來(lái)代替：

export default {   model: {     prop: 'checked',     event: 'change'   },   props: ['checked'] }

然后你就可以這樣使用：

<my-checkbox v-model="isChecked"></my-checkbox>

這相當(dāng)于：

<my-checkbox :checked="isChecked" @change="isChecked = $event"></my-checkbox>

多個(gè) v-model？Vue 2 vs Vue 3

在 Vue 2 中，一個(gè)組件只能有一個(gè) v-model，因?yàn)樗腔诠潭ǖ?value 和 input 實(shí)現(xiàn)的。

而在 Vue 3 中，你可以給 v-model 指定參數(shù)名，從而實(shí)現(xiàn)多個(gè)雙向綁定：

<my-component v-model:title="title" v-model:content="content">

這就相當(dāng)于同時(shí)綁定了兩個(gè)不同的值，并分別監(jiān)聽對(duì)應(yīng)的 update:title 和 update:content 事件。

注意事項(xiàng)：避免直接修改 props

在自定義組件中，如果你接收了一個(gè) value 或者自定義的 prop（比如 checked），不要直接修改這個(gè) prop，例如：

this.checked = false // ? 不推薦

正確的做法是觸發(fā)對(duì)應(yīng)的事件來(lái)通知父組件更新數(shù)據(jù)，保持?jǐn)?shù)據(jù)流清晰。比如：

this.$emit('change', false)

否則可能會(huì)導(dǎo)致狀態(tài)混亂，調(diào)試?yán)щy。

基本上就這些。理解 v-model 的本質(zhì)后，你會(huì)發(fā)現(xiàn)它并不復(fù)雜，但很容易在實(shí)際開發(fā)中忽略細(xì)節(jié)。