vue如何实现数据绑定

Vue 数据绑定的实现方式

Vue 的数据绑定主要通过双向绑定（v-model）和单向绑定（{{ }}插值或 v-bind）实现，核心基于响应式系统。以下是具体实现方法：

插值绑定（单向）

使用双大括号语法将数据绑定到 DOM 文本内容：

<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

属性绑定（单向）

通过 v-bind 指令将数据绑定到 HTML 属性：

<template>
  <img v-bind:src="imageSrc" alt="Vue Logo">
  <!-- 简写 -->
  <img :src="imageSrc" alt="Vue Logo">
</template>
<script>
export default {
  data() {
    return {
      imageSrc: 'path/to/logo.png'
    }
  }
}
</script>

双向数据绑定

使用 v-model 在表单输入和应用状态间建立双向绑定：

<template>
  <input v-model="inputText" placeholder="Type something">
  <p>You typed: {{ inputText }}</p>
</template>
<script>
export default {
  data() {
    return {
      inputText: ''
    }
  }
}
</script>

响应式原理

Vue 2 使用 Object.defineProperty 实现数据劫持，Vue 3 改用 Proxy：

// Vue 2 响应式简化示例
function observe(data) {
  Object.keys(data).forEach(key => {
    let value = data[key]
    Object.defineProperty(data, key, {
      get() {
        return value
      },
      set(newVal) {
        value = newVal
        console.log(`属性 ${key} 更新为 ${newVal}`)
      }
    })
  })
}

计算属性

通过 computed 实现依赖追踪的派生状态：

<template>
  <p>Reversed message: {{ reversedMessage }}</p>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

侦听器

使用 watch 监听数据变化并执行副作用：

export default {
  data() {
    return {
      question: ''
    }
  },
  watch: {
    question(newVal) {
      console.log(`问题变更为: ${newVal}`)
    }
  }
}