深入浅出，层层剖析 Vue 响应式原理

前端

2023-10-31 06:53:52

Vue.js 响应式系统，将 JavaScript 对象转变成响应式的，当对象状态发生改变时，界面会自动更新。这一机制正是 Vue.js 如此流行和强大的关键之一。

让我们来探秘 Vue 响应式原理，一探究竟！

响应式原理核心：Object.defineProperty() 方法

Vue.js 通过 JavaScript 原生的 Object.defineProperty() 方法来实现响应式数据。该方法可以拦截对对象属性的读写操作，并触发相应的侦听器函数。

具体来说，Vue.js 将每个响应式对象包裹一层代理对象，当读取或设置代理对象的属性时，会触发 Object.defineProperty() 方法中的侦听器函数。

如何创建响应式数据？

Vue.js 提供了多种方法来创建响应式数据，最常见的方式是使用 Vue.set() 方法。Vue.set() 方法可以将一个属性添加到响应式对象中，并将其标记为响应式。

const app = new Vue({
  data: {
    message: 'Hello Vue!'
  }
})

app.message = 'New message' // 视图更新

侦听数据变化

Vue.js 使用 Watcher 对象来侦听数据变化。Watcher 对象包含一个回调函数，当数据发生变化时，该回调函数将被调用。

const app = new Vue({
  data: {
    message: 'Hello Vue!'
  },
  watch: {
    message: function (newVal, oldVal) {
      console.log('Message changed from', oldVal, 'to', newVal)
    }
  }
})

app.message = 'New message' // 控制台输出：Message changed from Hello Vue! to New message