Vue3 v-bind 和 v-model 对比

news2025/1/30 23:39:28

1. 基本概念

1.1 v-bind

单向数据绑定
从父组件向子组件传递数据
简写形式为 :

1.2 v-model

双向数据绑定
父子组件数据同步
本质是 v-bind 和 v-on 的语法糖

2. 基础用法对比

2.1 表单元素绑定

<!-- v-bind 示例 -->
<template>
  <input :value="text" @input="text = $event.target.value" />
</template>

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

<!-- v-model 示例 -->
<template>
  <input v-model="text" />
</template>

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

2.2 组件属性绑定

<!-- v-bind 方式 -->
<template>
  <CustomInput
    :value="searchText"
    @input="searchText = $event"
  />
</template>

<!-- v-model 方式 -->
<template>
  <CustomInput v-model="searchText" />
</template>

3. 主要区别

3.1 数据流向

<!-- v-bind: 单向数据流 -->
<ChildComponent
  :title="pageTitle"  <!-- 数据只能从父组件流向子组件 -->
/>

<!-- v-model: 双向数据流 -->
<ChildComponent
  v-model="pageTitle"  <!-- 数据可以双向同步 -->
/>

3.2 实现原理

<!-- v-bind 原理 -->
<ChildComponent :value="value" />

<!-- v-model 原理（等价于） -->
<ChildComponent
  :modelValue="value"
  @update:modelValue="value = $event"
/>

3.3 自定义组件实现对比

<!-- 使用 v-bind 的组件 -->
<template>
  <div>
    <input
      :value="value"
      @input="$emit('input', $event.target.value)"
    />
  </div>
</template>

<script setup>
defineProps(['value'])
defineEmits(['input'])
</script>

<!-- 使用 v-model 的组件 -->
<template>
  <div>
    <input
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)"
    />
  </div>
</template>

<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

4. 使用场景对比

4.1 适合使用 v-bind 的场景

<!-- 1. 纯展示数据 -->
<template>
  <div :class="className">
    <h1 :title="headerTitle">{{ title }}</h1>
    <img :src="imageUrl" :alt="imageAlt" />
  </div>
</template>

<!-- 2. 传递回调函数 -->
<template>
  <button :onClick="handleClick">点击</button>
</template>

<!-- 3. 动态属性 -->
<template>
  <div :[dynamicProp]="value"></div>
</template>

4.2 适合使用 v-model 的场景

<!-- 1. 表单控件 -->
<template>
  <input v-model="username" />
  <textarea v-model="description"></textarea>
  <select v-model="selected">
    <option value="">请选择</option>
  </select>
</template>

<!-- 2. 自定义组件的数据同步 -->
<template>
  <CustomInput v-model="searchText" />
  <ColorPicker v-model="themeColor" />
  <DatePicker v-model="selectedDate" />
</template>

<!-- 3. 多个数据的双向绑定 -->
<template>
  <UserForm
    v-model:firstName="user.firstName"
    v-model:lastName="user.lastName"
  />
</template>