vue实现数据绑定

Vue 数据绑定的实现方式

Vue 通过响应式系统和模板语法实现数据绑定，核心机制包括数据劫持、依赖收集和派发更新。

双向数据绑定 (v-model)

在表单元素上使用 v-model 指令可实现双向绑定：

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

data() {
  return {
    message: 'Hello Vue!'
  }
}

v-model 是 :value 和 @input 的语法糖，等价于：

<input 
  :value="message" 
  @input="message = $event.target.value"
>

单向数据绑定 (Mustache 语法)

使用双大括号插值实现单向绑定：

<span>{{ title }}</span>

计算属性可实现动态绑定：

computed: {
  reversedTitle() {
    return this.title.split('').reverse().join('')
  }
}

对象属性绑定

通过 v-bind 或简写 : 绑定对象属性：

<div v-bind:class="{ active: isActive }"></div>
<a :href="url">Link</a>

数组渲染 (v-for)

列表数据绑定使用 v-for：

<li v-for="(item, index) in items" :key="item.id">
  {{ index }} - {{ item.text }}
</li>

响应式原理

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

Object.defineProperty(obj, key, {
  get() {
    // 依赖收集
    return val
  },
  set(newVal) {
    // 触发更新
    val = newVal
  }
})

Vue 3.x 改用 Proxy 实现：

new Proxy(data, {
  get(target, key) {
    return Reflect.get(target, key)
  },
  set(target, key, value) {
    return Reflect.set(target, key, value)
  }
})

注意事项

1. 对象新增属性需用 Vue.set() 或 this.$set()
2. 数组变异方法如 push/pop 能被自动追踪
3. 避免在模板中使用复杂表达式，建议使用计算属性