Vue双向绑定背后强大的原理

2023-09-26 10:59:27

在Vue.js中，数据绑定是通过Object.defineProperty方法来实现的。Object.defineProperty方法允许我们给一个对象添加新的属性或修改现有属性，并定义这些属性的行为。

在Vue.js中，双向绑定是如何实现的呢？Vue.js内部通过Object.defineProperty方法属性拦截的方式，把data对象里每个数据的读写转化成getter/setter，当数据变化时通知视图更新。虽然一句话把大概原理概括了，但是其内部的实现方式还是值得深究的，本文就以从简入繁的形式，逐步探究Vue.js双向绑定的实现原理。

第一步，创建一个简单的Vue组件。

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

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>

在这个组件中，我们有一个输入框和一个段落。输入框的值由data对象中的message属性绑定。当用户更改输入框的值时，段落中的值也会自动更新。

Vue.js是如何做到这一点的呢？它通过Object.defineProperty方法在data对象上创建了一个名为message的属性。这个属性的getter函数返回当前message属性的值，setter函数则更新message属性的值并通知视图更新。

Object.defineProperty(data, 'message', {
  get: function() {
    return this.message
  },
  set: function(newValue) {
    this.message = newValue
    this.$emit('update:message', newValue)
  }
})