vue 数据绑定实现

Vue 数据绑定的实现方式

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

双向数据绑定（v-model）

通过 v-model 指令实现表单元素与数据的双向绑定，自动同步数据与视图。

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

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

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

使用 {{ }} 插值语法将数据绑定到 DOM 文本内容，数据变化时视图自动更新。

<p>{{ title }}</p>

属性绑定（v-bind）

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

<img :src="imageUrl" :alt="imageAlt">

响应式原理

Vue 2 使用 Object.defineProperty 对数据对象进行劫持，Vue 3 改用 Proxy 实现响应式。当数据变化时，依赖的视图会自动重新渲染。

计算属性（computed）

基于依赖的响应式数据缓存计算结果，适合复杂逻辑。

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

侦听器（watch）

监听数据变化执行自定义逻辑，适合异步或开销较大的操作。

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

条件与列表渲染

通过 v-if 和 v-for 实现动态 DOM 控制。

<div v-if="showContent">可见内容</div>
<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>