---
title: "Vue.js 中的 v-model 和 model-value 响应式区别 - 一纸忘忧"
description: "Vue.js 中的 v-model 和 model-value 都是用于实现表单数据的双向绑定的指令。"
canonical_url: "https://www.ikxin.com/article/vue-model-reactivity"
last_updated: "2026-09-16T09:59:27.259Z"
locale: zh-cn
meta:
  "og:description": "Vue.js 中的 v-model 和 model-value 都是用于实现表单数据的双向绑定的指令。"
  "og:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~VnVlLmpzIOS4reeahCB2LW1vZGVsIOWSjCBtb2RlbC12YWx1ZSDlk43lupTlvI~ljLrliKsgLSDkuIDnurjlv5jlv6c%2Cc_Article%2Ctitle_~VnVlLmpzIOS4reeahCB2LW1vZGVsIOWSjCBtb2RlbC12YWx1ZSDlk43lupTlvI~ljLrliKs%2Cdescription_~VnVlLmpzIOS4reeahCB2LW1vZGVsIOWSjCBtb2RlbC12YWx1ZSDpg73mmK~nlKjkuo7lrp7njrDooajljZXmlbDmja7nmoTlj4zlkJHnu5HlrprnmoTmjIfku6TjgII%2CsiteName_~5LiA57q45b-Y5b-n%2CsiteHost_www.ikxin.com%2Cp_Ii9hcnRpY2xlL3Z1ZS1tb2RlbC1yZWFjdGl2aXR5Ig%2Cs_PZm2hNNQtH-tr5jg.png"
  "og:image:alt": "Vue.js 中的 v-model 和 model-value 响应式区别 - 一纸忘忧"
  "og:image:height": "630"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "Vue.js 中的 v-model 和 model-value 响应式区别"
  "twitter:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~VnVlLmpzIOS4reeahCB2LW1vZGVsIOWSjCBtb2RlbC12YWx1ZSDlk43lupTlvI~ljLrliKsgLSDkuIDnurjlv5jlv6c%2Cc_Article%2Ctitle_~VnVlLmpzIOS4reeahCB2LW1vZGVsIOWSjCBtb2RlbC12YWx1ZSDlk43lupTlvI~ljLrliKs%2Cdescription_~VnVlLmpzIOS4reeahCB2LW1vZGVsIOWSjCBtb2RlbC12YWx1ZSDpg73mmK~nlKjkuo7lrp7njrDooajljZXmlbDmja7nmoTlj4zlkJHnu5HlrprnmoTmjIfku6TjgII%2CsiteName_~5LiA57q45b-Y5b-n%2CsiteHost_www.ikxin.com%2Cp_Ii9hcnRpY2xlL3Z1ZS1tb2RlbC1yZWFjdGl2aXR5Ig%2Cs_PZm2hNNQtH-tr5jg.png"
  "twitter:image:alt": "Vue.js 中的 v-model 和 model-value 响应式区别 - 一纸忘忧"
---

> Index of every page on this site: [llms.txt](https://www.ikxin.com/llms.txt)

# **Vue.js 中的 v-model 和 model-value 响应式区别**

2023.03.28 5,255  0

Vue.js 中的 `v-model` 和 `model-value` 都是用于实现表单数据的双向绑定的指令。

`v-model` 是 Vue.js 提供的一个语法糖，可以让开发者在模板中更方便地实现表单数据的双向绑定。当在一个表单元素上使用 `v-model` 时，它会自动监听元素的 `input` 或 `change` 事件，并将表单元素的值同步到相应的 Vue 组件数据中，反之亦然。例如：

 HTML

```
<input v-model="message" />
```

这会将表单元素的值和 Vue 实例中的 `message` 数据双向绑定。如果用户在表单元素中输入了值，那么 `message` 数据会自动更新；如果 `message` 数据发生了变化，表单元素中的值也会自动更新。

`model-value` 是在 Vue 3 中新增的一个属性，用于在自定义组件中实现表单数据的双向绑定。与 `v-model` 不同的是，`model-value` 不是一个指令，而是一个属性，需要在自定义组件的选项中进行配置。例如：

 JavaScript

```
app.component('my-component', {
  props: {
    modelValue: String
  },
  emits: ['update:modelValue'],
  template: `
    <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
  `
})
```

这里定义了一个名为 `my-component` 的自定义组件，并在其 `props` 中定义了一个名为 `modelValue` 的属性。组件的模板中使用了这个属性来实现表单元素的值绑定，同时在表单元素的 `input` 事件中触发了一个名为 `update:modelValue` 的自定义事件，将输入的值作为参数传递给父组件。在使用这个自定义组件时，可以像下面这样使用 `v-model` 来实现表单数据的双向绑定：

 HTML

```
<my-component v-model="message" />
```

总的来说，`v-model` 是 Vue.js 中用于实现表单数据双向绑定的常用指令，而 `model-value` 是在自定义组件中实现表单数据双向绑定的一种新的方式。

## **评论**

(0)

暂无评论，来说两句吧

## **发布评论**

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://www.ikxin.com/#website","@type":"WebSite","description":"一纸忘忧的个人网站，关于技术探索与日常生活，记录 Web 开发、服务端与 DevOps 实践，分享软件工具、数码体验，以及代码之外的见闻与思考。","inLanguage":"zh-CN","name":"一纸忘忧","url":"https://www.ikxin.com/","workTranslation":[{"@id":"https://www.ikxin.com/zh-tw#website"},{"@id":"https://www.ikxin.com/ko#website"},{"@id":"https://www.ikxin.com/en#website"},{"@id":"https://www.ikxin.com/ja#website"}]},{"@id":"https://www.ikxin.com/article/vue-model-reactivity#webpage","@type":"WebPage","description":"Vue.js 中的 v-model 和 model-value 都是用于实现表单数据的双向绑定的指令。","name":"Vue.js 中的 v-model 和 model-value 响应式区别","url":"https://www.ikxin.com/article/vue-model-reactivity","isPartOf":{"@id":"https://www.ikxin.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/article/vue-model-reactivity"]}]}]}
```

## Sitemap

See the full [sitemap](https://www.ikxin.com/sitemap.md) for all pages.