实现vue数据绑定

Vue 数据绑定的实现方式

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

双向绑定（v-model）

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

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

单向绑定（插值表达式）

<p>{{ text }}</p>

属性绑定（v-bind）

<a v-bind:href="url">链接</a>

计算属性（computed）

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

自定义实现简单数据绑定

通过 Object.defineProperty 实现基础响应式：

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      return val
    },
    set(newVal) {
      val = newVal
      console.log(`属性 ${key} 已更新`)
    }
  })
}

const data = {}
defineReactive(data, 'text', '初始值')
data.text = '新值'  // 触发setter

Vue 3 的 Proxy 实现

Vue 3 改用 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)
      console.log(`属性 ${key} 已更新`)
      return true
    }
  })
}

const state = reactive({ count: 0 })
state.count = 1  // 触发set陷阱

注意事项

• 数组变异方法需要特殊处理（如 push/pop 等）
• 对象新增属性需要使用 Vue.set 或 this.$set
• 深度监听会带来性能开销