vue 数据绑定实现

Vue 数据绑定的实现方式

Vue.js 提供了多种数据绑定方式，主要通过指令和插值表达式实现双向或单向数据绑定。

插值表达式（文本绑定）

使用双大括号 {{ }} 将数据绑定到 DOM 文本节点：

<div>{{ message }}</div>

在组件中定义数据：

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

v-bind 指令（属性绑定）

动态绑定 HTML 属性到 Vue 实例的数据：

<img v-bind:src="imageSrc">

简写形式：

<img :src="imageSrc">

v-model 指令（双向绑定）

实现表单输入和应用状态的双向绑定：

<input v-model="message">

相当于以下语法糖：

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

计算属性

对于需要复杂逻辑的数据绑定，可以使用计算属性：

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

模板中使用：

<p>{{ reversedMessage }}</p>

条件绑定

使用 v-if、v-else 等指令进行条件渲染：

<div v-if="showMessage">{{ message }}</div>
<div v-else>No message</div>

列表渲染

使用 v-for 指令渲染数组或对象：

<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</ul>

样式和类绑定

动态绑定 class 和 style：

<div :class="{ active: isActive }"></div>
<div :style="{ color: activeColor }"></div>

自定义组件的数据绑定

在组件上使用 v-model：

<custom-input v-model="searchText"></custom-input>

组件内部实现：

props: ['modelValue'],
emits: ['update:modelValue'],
template: `
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  >
`

这些绑定方式共同构成了 Vue 的响应式系统，当数据变化时会自动更新 DOM，而用户输入也会自动更新数据状态。