当前位置：首页 > VUE

vue实现双向

2026-03-07 08:52:16VUE

Vue 双向绑定的实现方式

Vue 的双向绑定主要通过 v-model 指令实现，它结合了属性绑定和事件监听，常用于表单元素。以下是几种常见的实现方式：

使用 `v-model` 指令

v-model 是 Vue 提供的语法糖，用于简化表单元素的双向绑定。它会根据不同的输入元素自动选择合适的方式更新数据。

vue实现双向

<template>
  <input v-model="message" placeholder="Edit me">
  <p>Message is: {{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

自定义组件实现双向绑定

在自定义组件中，可以通过 model 选项和 $emit 事件实现双向绑定。

<template>
  <custom-input v-model="message"></custom-input>
  <p>Message is: {{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  components: {
    'custom-input': {
      props: ['value'],
      template: `
        <input 
          :value="value"
          @input="$emit('input', $event.target.value)"
        >
      `
    }
  }
}
</script>

使用 `.sync` 修饰符

.sync 修饰符是另一种实现双向绑定的方式，适用于需要多个双向绑定的场景。

vue实现双向

<template>
  <custom-input :value.sync="message"></custom-input>
  <p>Message is: {{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  components: {
    'custom-input': {
      props: ['value'],
      template: `
        <input 
          :value="value"
          @input="$emit('update:value', $event.target.value)"
        >
      `
    }
  }
}
</script>

手动实现双向绑定

如果不使用 v-model，可以通过手动绑定 value 属性和监听 input 事件实现双向绑定。

<template>
  <input 
    :value="message" 
    @input="message = $event.target.value"
    placeholder="Edit me"
  >
  <p>Message is: {{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

双向绑定的底层原理

Vue 的双向绑定基于数据劫持和发布-订阅模式实现。通过 Object.defineProperty 或 Proxy 监听数据变化，结合观察者模式更新视图。

使用 `Object.defineProperty`

let data = { message: '' };
let input = document.querySelector('input');
let p = document.querySelector('p');

Object.defineProperty(data, 'message', {
  get() {
    return this._message;
  },
  set(newValue) {
    this._message = newValue;
    input.value = newValue;
    p.textContent = newValue;
  }
});

input.addEventListener('input', function(e) {
  data.message = e.target.value;
});

使用 `Proxy`

let data = new Proxy({ message: '' }, {
  set(target, key, value) {
    target[key] = value;
    input.value = value;
    p.textContent = value;
    return true;
  }
});

input.addEventListener('input', function(e) {
  data.message = e.target.value;
});