vue怎么实现数据绑定

Vue 数据绑定的实现方式

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

双向数据绑定（v-model）

v-model 是语法糖，结合 v-bind 和 v-on 实现双向绑定：

<input v-model="message">
<!-- 等价于 -->
<input :value="message" @input="message = $event.target.value">

单向数据绑定（插值表达式）

使用双大括号语法绑定文本内容：

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

属性绑定（v-bind）

动态绑定 HTML 属性：

<img v-bind:src="imageSrc">
<!-- 简写 -->
<img :src="imageSrc">

响应式原理

Vue 2.x 使用 Object.defineProperty 实现数据劫持：

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      return val
    },
    set(newVal) {
      val = newVal
      // 触发更新
    }
  })
}

Vue 3.x 改用 Proxy 实现：

const reactive = (target) => {
  return new Proxy(target, {
    get(target, key) {
      return Reflect.get(target, key)
    },
    set(target, key, value) {
      Reflect.set(target, key, value)
      // 触发更新
      return true
    }
  })
}

计算属性（computed）

基于依赖缓存的计算结果：

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('')
  }
}

监听器（watch）

响应数据变化执行异步操作：

watch: {
  message(newVal, oldVal) {
    console.log('值变化了', newVal, oldVal)
  }
}

注意事项

• 对象新增属性需要使用 Vue.set() 或 this.$set() 使其响应式
• 数组变异方法（push/pop/shift/unshift/splice/sort/reverse）会被 Vue 拦截
• Vue 3 的 Composition API 提供 ref 和 reactive 创建响应式数据