vue怎么实现数据绑定

Vue 数据绑定的实现方式

Vue 的数据绑定主要通过指令和响应式系统实现，以下是核心方法：

双向数据绑定（v-model）

v-model 指令用于表单元素与数据的双向绑定：

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

data() {
  return {
    message: '初始值'
  }
}

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

使用 {{ }} 语法实现单向数据渲染：

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

属性绑定（v-bind）

通过 v-bind 或简写 : 动态绑定 HTML 属性：

<img :src="imageUrl" />

响应式原理

Vue 使用 Object.defineProperty（Vue 2）或 Proxy（Vue 3）实现数据响应式：

// Vue 2 响应式示例
const data = { value: 'test' };
Object.defineProperty(data, 'value', {
  get() { return val },
  set(newVal) {
    val = newVal;
    // 触发视图更新
  }
});

计算属性（computed）

派生状态通过计算属性自动更新：

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

监听器（watch）

监听数据变化执行自定义逻辑：

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

条件绑定（v-if/v-show）

<div v-if="isVisible">条件渲染</div>
<div v-show="isShow">显示/隐藏</div>

列表渲染（v-for）

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

注意事项

1. 数组变更需使用 Vue 的变异方法（如 push, splice）
2. 对象新增属性需使用 Vue.set() 或 this.$set()
3. 避免在模板中使用复杂表达式，推荐使用计算属性