vue如何实现绑定

Vue 中的数据绑定实现

Vue 通过数据劫持和发布-订阅模式实现数据绑定，核心是响应式系统。以下是具体实现方式：

双向绑定（v-model）

<input v-model="message">
<p>{{ message }}</p>

data() {
  return {
    message: ''
  }
}

v-model 是语法糖，相当于同时绑定 value 属性和 input 事件。

单向绑定（插值表达式）

<p>{{ message }}</p>

数据变化会自动更新 DOM，但 DOM 变化不会影响数据。

属性绑定（v-bind）

<img v-bind:src="imageSrc">

简写形式：

<img :src="imageSrc">

样式绑定

对象语法：

<div :class="{ active: isActive }"></div>

数组语法：

<div :class="[activeClass, errorClass]"></div>

响应式原理

1. 通过 Object.defineProperty 或 Proxy 拦截数据操作
2. 每个组件实例对应一个 watcher 实例
3. 数据变化时触发 setter，通知 watcher 重新渲染

自定义组件绑定

<custom-component v-model="value"></custom-component>

组件内部需要实现：

props: ['value'],
emits: ['update:value']

修饰符

.lazy：

<input v-model.lazy="msg">

.number：

<input v-model.number="age">

.trim：

<input v-model.trim="msg">

注意事项

• 对象新增属性需要使用 Vue.set 或 this.$set
• 数组变异方法能被检测，但直接赋值索引需要特殊处理
• v-model 在自定义组件上默认使用 modelValue 属性和 update:modelValue 事件