vue 数据绑定实现

Vue 数据绑定的实现方式

Vue 的数据绑定主要通过响应式系统实现，核心是 Object.defineProperty（Vue 2）或 Proxy（Vue 3）。以下是具体实现方法：

双向数据绑定（v-model）

Vue 通过 v-model 指令实现表单元素与数据的双向绑定：

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

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

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

使用 {{ }} 插值表达式实现单向数据绑定：

<div>{{ text }}</div>

对象属性绑定

Vue 会自动递归地将对象属性转为响应式：

data() {
  return {
    user: {
      name: 'John',
      age: 30
    }
  }
}

数组变更检测

Vue 重写了数组的变异方法（如 push/pop/shift 等）以实现响应式：

data() {
  return {
    items: ['a', 'b', 'c']
  }
}

计算属性（computed）

对于复杂逻辑，使用计算属性实现数据绑定：

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

监听器（watch）

通过监听器响应数据变化：

watch: {
  message(newVal, oldVal) {
    console.log('Message changed')
  }
}

响应式原理（Vue 2）

Vue 2 使用 Object.defineProperty 实现响应式：

function defineReactive(obj, key) {
  let value = obj[key]
  Object.defineProperty(obj, key, {
    get() {
      console.log('get', key)
      return value
    },
    set(newVal) {
      if (newVal !== value) {
        console.log('set', key)
        value = newVal
      }
    }
  })
}

响应式原理（Vue 3）

Vue 3 改用 Proxy 实现响应式：

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      console.log('get', key)
      return Reflect.get(target, key)
    },
    set(target, key, value) {
      console.log('set', key)
      return Reflect.set(target, key, value)
    }
  })
}