vue实现数据绑定

Vue 数据绑定实现方法

Vue.js 的核心特性之一是数据绑定，主要通过以下方式实现：

双向数据绑定（v-model）

使用 v-model 指令在表单元素上创建双向数据绑定，自动同步输入值与 Vue 实例数据。

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

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

插值表达式（Mustache）

双大括号语法用于文本插值，自动将数据绑定到 DOM 内容。

<span>{{ msg }}</span>

属性绑定（v-bind）

v-bind 指令动态绑定 HTML 属性到 Vue 实例数据，可简写为 :。

<img v-bind:src="imageSrc">
<!-- 简写 -->
<img :src="imageSrc">

计算属性

对于复杂逻辑，使用计算属性进行数据绑定，具有缓存特性。

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

侦听器（watch）

通过 watch 选项观察数据变化并执行响应操作。

watch: {
  message(newVal, oldVal) {
    console.log('Message changed from', oldVal, 'to', newVal)
  }
}

条件渲染（v-if/v-show）

根据数据状态动态显示/隐藏元素。

<p v-if="isVisible">显示内容</p>
<p v-show="hasData">条件显示</p>

列表渲染（v-for）

基于数据源循环渲染元素。

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

自定义组件绑定

在组件上使用 v-model 实现自定义双向绑定。

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

// 子组件
props: ['modelValue'],
emits: ['update:modelValue']

响应式原理

Vue 使用 ES5 的 Object.defineProperty (Vue 2) 或 Proxy (Vue 3) 实现数据响应式，自动追踪依赖并在数据变化时更新视图。