Vue2 响应式原理详解，让你彻底理解 Reactivity 的奥秘！

2023-12-31 17:16:56

Vue.js，一个备受追捧的前端框架，以其简明、灵活的特点备受开发者喜爱。而它的响应式系统更是框架的核心之一，是其区别于其他框架的关键。本文将深入解析 Vue2 的响应式原理，帮助您彻底理解 Reactivity 的奥秘。

揭秘响应式原理

Vue2 的响应式本质上是一个依赖收集与派发系统。它首先通过 Object.defineProperty() 劫持数据对象的属性，将其转换为 getter/setter。当这些属性被访问时，getter 函数会收集依赖，而 setter 函数则会触发派发更新。

具体来说，Vue2 使用了 Dep 和 Watcher 这两个类来实现响应式。Dep 类负责收集依赖，而 Watcher 类则负责派发更新。当属性被访问时，Dep 类会将当前的 Watcher 实例添加到其依赖列表中。当属性值发生变化时，Dep 类会通知所有依赖的 Watcher 实例，后者会执行相应的更新操作。

深入浅出，示例解析

为了更好地理解响应式原理，我们不妨通过一个简单的示例来进一步探究。假设我们有一个名为 message 的数据对象，其属性为 text。当我们访问 message.text 时，Vue2 会自动收集依赖。

let message = {
  text: 'Hello, Vue!'
}

const vm = new Vue({
  data: {
    message
  }
})

vm.$watch('message.text', (newVal, oldVal) => {
  console.log(`message.text changed from ${oldVal} to ${newVal}`)
})

// 当我们修改 message.text 时，会触发派发更新
message.text = 'Hello, World!'