剖析Vue的数据响应式魔法：揭秘自动更新的秘密

2023-12-15 01:12:49

Vue的数据响应式原理

在Vue之前，前端世界充斥着DOM事件监听器和繁琐的DOM操作。获取数据或计算表单值都意味着大量的代码和大量的麻烦。而Vue的出现，带来了数据响应式的革命，让数据更新与页面渲染的同步成为可能。那么，Vue的数据响应式原理究竟是怎样的呢？

代理对象：Vue响应式的基石

Vue响应式的核心是一个称为代理对象 的概念。它是一个与原始数据对象绑定的特殊对象。当代理对象中的属性被访问或修改时，Vue会自动检测这些变化并触发更新。

const data = {
  name: 'Alice'
}

const proxy = new Proxy(data, {
  get: function(target, property) {
    // 访问属性时触发更新
    console.log(`Getting property: ${property}`)
    return target[property]
  },
  set: function(target, property, value) {
    // 修改属性时触发更新
    console.log(`Setting property: ${property} to ${value}`)
    target[property] = value
  }
})

proxy.name // 输出: Getting property: name
proxy.name = 'Bob' // 输出: Setting property: name to Bob

响应式系统：守护者

代理对象并不是单枪匹马，它身后有一个名为响应式系统 的守护者。这个系统会监控代理对象中的所有属性变化，并在检测到变化后触发更新。

getter/setter：数据变化的侦察兵

当访问或修改代理对象中的属性时，会触发getter或setter。这些函数充当侦察兵，向响应式系统报告数据变化。

const reactiveData = Vue.reactive({
  name: 'Alice'
})

reactiveData.name // getter被调用，响应式系统开始监控name属性
reactiveData.name = 'Bob' // setter被调用，响应式系统检测到name属性的变化，触发更新