Vue.js 中的双向数据绑定实现原理

Vue.js 是一款流行的前端框架，它提供了一种双向数据绑定的机制，使得开发者可以更加方便地管理数据和 UI。本文将会介绍 Vue.js 中双向数据绑定的实现原理，包括数据劫持、观察者模式等相关概念。

数据劫持

Vue.js 中的双向数据绑定实现依赖于数据劫持，数据劫持是指在数据被访问或者修改时，拦截这个操作并执行相应的操作。在 Vue.js 中，数据劫持是通过对数据对象的属性进行劫持来实现的。当数据对象的属性被访问或者修改时，会触发相应的 get 和 set 函数。

例如，有一个对象 obj：

let obj = {
  name: 'Tom',
  age: 18
}

我们可以通过以下方式来为 obj 的属性添加 get 和 set 函数：

// www.javascriptcn.com code example
let obj = {
  name: 'Tom',
  age: 18
}

Object.defineProperty(obj, 'name', {
  get: function() {
    console.log('get name')
    return this._name
  },
  set: function(value) {
    console.log('set name')
    this._name = value
  }
})

Object.defineProperty(obj, 'age', {
  get: function() {
    console.log('get age')
    return this._age
  },
  set: function(value) {
    console.log('set age')
    this._age = value
  }
})

当我们访问 obj 的属性时，会触发相应的 get 函数：

console.log(obj.name) // get name Tom
console.log(obj.age) // get age 18

当我们修改 obj 的属性时，会触发相应的 set 函数：

obj.name = 'Jerry' // set name
obj.age = 20 // set age

数据劫持是 Vue.js 中双向数据绑定的基础，它通过拦截数据属性的访问和修改，实现了数据的响应式更新。

观察者模式

Vue.js 中的双向数据绑定还依赖于观察者模式，观察者模式是一种对象间的一对多的依赖关系，当一个对象的状态发生改变时，所有依赖它的对象都会得到通知并自动更新。

在 Vue.js 中，数据对象的每个属性都对应一个观察者对象，它的作用是监听数据的变化并通知所有的订阅者对象。当数据对象的属性发生变化时，观察者对象会自动通知所有订阅者对象进行更新。

例如，有一个观察者对象 Watcher：

// www.javascriptcn.com code example
function Watcher(vm, exp, cb) {
  this.vm = vm
  this.exp = exp
  this.cb = cb
  this.value = this.get()
}

Watcher.prototype = {
  update: function() {
    let value = this.get()
    let oldVal = this.value
    if (value !== oldVal) {
      this.value = value
      this.cb.call(this.vm, value, oldVal)
    }
  },
  get: function() {
    Dep.target = this
    let value = this.vm[this.exp]
    Dep.target = null
    return value
  }
}

在 Watcher 的构造函数中，我们将 Vue.js 实例、表达式和回调函数作为参数传入，并通过 this.get() 方法获取表达式的值。当表达式的值发生变化时，我们会调用 this.cb.call(this.vm, value, oldVal) 方法来执行回调函数。

在 get 方法中，我们将当前的 Watcher 对象设置为全局变量 Dep.target，然后获取表达式的值，并在获取之后将 Dep.target 设置为 null。这样做的目的是为了在获取表达式的值时，将当前的 Watcher 对象和数据对象的属性建立关联，当数据对象的属性发生变化时，可以自动通知所有订阅者对象。

观察者模式是 Vue.js 中双向数据绑定的重要实现方式，它通过将数据对象的属性和观察者对象建立关联，实现了数据的响应式更新。

双向数据绑定实现原理

在 Vue.js 中，双向数据绑定是通过将数据对象的属性和 UI 元素的值进行绑定来实现的。当数据对象的属性发生变化时，UI 元素的值会自动更新，当 UI 元素的值发生变化时，数据对象的属性也会自动更新。

例如，有一个数据对象 data 和一个 UI 元素 input：

let data = {
  name: 'Tom',
  age: 18
}

let input = document.querySelector('input')

我们可以通过以下方式将数据对象的属性和 UI 元素的值进行绑定：

input.value = data.name

input.addEventListener('input', function() {
  data.name = input.value
})

当数据对象的属性发生变化时，UI 元素的值会自动更新：

data.name = 'Jerry'
console.log(input.value) // Jerry

当 UI 元素的值发生变化时，数据对象的属性也会自动更新：

input.value = 'Lucy'
console.log(data.name) // Lucy

在 Vue.js 中，双向数据绑定是通过将数据对象的属性和 UI 元素的值进行绑定，并通过数据劫持和观察者模式实现的。当数据对象的属性发生变化时，观察者对象会自动通知所有订阅者对象进行更新，UI 元素的值也会自动更新；当 UI 元素的值发生变化时，会触发相应的事件并将新的值赋给数据对象的属性，数据对象的属性也会自动更新。

示例代码

下面是一个简单的示例代码，演示了 Vue.js 中双向数据绑定的实现原理：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>Vue.js 双向数据绑定实现原理</title>
</head>
<body>
  <div id="app">
    <input type="text" v-model="name">
    <p>Hello, {{ name }}!</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        name: 'Tom'
      }
    })
  </script>
</body>
</html>

在上面的示例代码中，我们使用了 Vue.js 提供的 v-model 指令将数据对象的属性 name 和 UI 元素 <input> 的值进行了双向绑定。当我们修改 <input> 的值时，数据对象的属性 name 也会自动更新，当数据对象的属性 name 发生变化时，UI 元素 <input> 的值也会自动更新。这就是 Vue.js 中双向数据绑定的实现原理。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d57d97a941bf7134a48560