实现vue数据绑定

Vue数据绑定的实现方式

Vue.js通过数据劫持和发布-订阅模式实现数据绑定，核心是响应式系统。以下是主要实现方法：

双向数据绑定（v-model）

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

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

v-model是语法糖，相当于同时绑定value属性和input事件。

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

<span>{{ title }}</span>

数据变化时自动更新DOM，但DOM变化不会影响数据。

计算属性

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

基于依赖缓存，只有相关响应式依赖变化时才会重新计算。

侦听器

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

适合执行异步或开销较大的操作。

对象属性绑定

data() {
  return {
    user: {
      name: 'John',
      age: 30
    }
  }
}

Vue会自动递归转换对象属性为响应式。

数组变更检测

Vue重写了数组的变更方法（push/pop/shift/unshift/splice/sort/reverse），能触发视图更新。直接通过索引设置项或修改长度需要使用Vue.set或数组的splice方法。

响应式原理

Vue使用Object.defineProperty（Vue 2）或Proxy（Vue 3）劫持数据属性的getter/setter，在属性被访问和修改时通知依赖进行更新。每个组件实例都有对应的watcher实例，在组件渲染过程中接触过的依赖会被记录，当依赖项的setter触发时，会通知watcher重新计算并更新组件。

手动强制更新

this.$forceUpdate()

应尽量避免使用，通常表明存在未被Vue追踪的响应式依赖。