响应式原理：Proxy vs defineProperty

Vue的响应式系统是其核心特性之一，它允许我们声明式地将数据与DOM绑定，当数据发生变化时，DOM会自动更新。Vue 2和Vue 3在响应式系统的实现上有很大的不同，Vue 2使用Object.defineProperty，而Vue 3使用Proxy。在这一集中，我们将深入探讨这两种实现方式的原理、区别和优缺点。

1. 响应式系统的基本概念

1.1 什么是响应式

响应式是指当数据发生变化时，相关的依赖会自动更新，无需手动操作。在Vue中，响应式系统主要包括以下几个部分：

  • 数据劫持：监听数据的变化
  • 依赖收集：收集哪些组件或函数依赖于这些数据
  • 触发更新：当数据变化时，通知所有依赖进行更新

1.2 Vue 2与Vue 3的响应式实现

  • Vue 2：使用Object.defineProperty对数据的属性进行劫持
  • Vue 3：使用Proxy对整个对象进行劫持

2. Object.defineProperty原理

2.1 基本用法

Object.defineProperty是JavaScript的一个内置方法，用于定义对象的属性，并可以设置属性的描述符，包括get和set方法，从而实现对属性的劫持：

const obj = {}
let value = 'initial value'

Object.defineProperty(obj, 'name', {
  get() {
    console.log('获取name属性')
    return value
  },
  set(newValue) {
    console.log('设置name属性为', newValue)
    value = newValue
  },
  enumerable: true,
  configurable: true
})

// 使用
obj.name = '张三' // 输出：设置name属性为 张三
console.log(obj.name) // 输出：获取name属性 和 张三

2.2 Vue 2的响应式实现

Vue 2的响应式系统基于Object.defineProperty，主要包括以下几个步骤：

  1. 初始化：遍历数据对象的所有属性
  2. 数据劫持：使用Object.defineProperty为每个属性设置get和set方法
  3. 依赖收集：在get方法中收集依赖
  4. 触发更新：在set方法中通知依赖更新
// 简化的Vue 2响应式实现
class Observer {
  constructor(data) {
    this.walk(data)
  }

  walk(data) {
    // 遍历数据对象的所有属性
    Object.keys(data).forEach(key => {
      this.defineReactive(data, key, data[key])
    })
  }

  defineReactive(obj, key, value) {
    // 递归处理嵌套对象
    if (typeof value === 'object' && value !== null) {
      new Observer(value)
    }

    // 依赖收集器
    const dep = new Dep()

    Object.defineProperty(obj, key, {
      get() {
        // 收集依赖
        Dep.target && dep.addSub(Dep.target)
        return value
      },
      set(newValue) {
        if (newValue === value) return
        value = newValue
        // 递归处理新值
        if (typeof newValue === 'object' && newValue !== null) {
          new Observer(newValue)
        }
        // 通知依赖更新
        dep.notify()
      }
    })
  }
}

// 依赖收集器
class Dep {
  constructor() {
    this.subs = []
  }

  addSub(sub) {
    this.subs.push(sub)
  }

  notify() {
    this.subs.forEach(sub => sub.update())
  }
}

// 观察者
class Watcher {
  constructor(vm, expOrFn, cb) {
    this.vm = vm
    this.expOrFn = expOrFn
    this.cb = cb
    this.get()
  }

  get() {
    Dep.target = this
    // 触发getter，收集依赖
    this.value = this.getVMVal()
    Dep.target = null
  }

  getVMVal() {
    return this.expOrFn.call(this.vm)
  }

  update() {
    const oldValue = this.value
    this.value = this.getVMVal()
    // 执行回调
    this.cb.call(this.vm, this.value, oldValue)
  }
}

2.3 Object.defineProperty的局限性

虽然Object.defineProperty可以实现响应式，但它存在一些局限性：

  1. 只能劫持对象的属性，无法劫持整个对象
  2. 无法监听数组的变化，需要重写数组方法
  3. 新增属性或删除属性无法被监听，需要使用Vue.set或this.$set
  4. 嵌套对象需要递归处理，性能开销大
  5. 无法监听Map、Set等新的数据结构

3. Proxy原理

3.1 基本用法

Proxy是ES6引入的一个新特性，用于创建一个对象的代理，可以拦截对象的各种操作，包括属性的读取、设置、删除等：

const obj = {
  name: '张三',
  age: 25
}

const proxy = new Proxy(obj, {
  get(target, key, receiver) {
    console.log('获取', key, '属性')
    return Reflect.get(target, key, receiver)
  },
  set(target, key, value, receiver) {
    console.log('设置', key, '属性为', value)
    return Reflect.set(target, key, value, receiver)
  },
  deleteProperty(target, key) {
    console.log('删除', key, '属性')
    return Reflect.deleteProperty(target, key)
  }
})

// 使用
proxy.name = '李四' // 输出：设置 name 属性为 李四
console.log(proxy.name) // 输出：获取 name 属性 和 李四
delete proxy.age // 输出：删除 age 属性

3.2 Vue 3的响应式实现

Vue 3的响应式系统基于Proxy，主要包括以下几个步骤：

  1. 创建代理：使用Proxy为数据对象创建代理
  2. 拦截操作：拦截对象的各种操作，包括get、set、deleteProperty等
  3. 依赖收集：在get操作中收集依赖
  4. 触发更新：在set、deleteProperty等操作中通知依赖更新
// 简化的Vue 3响应式实现
function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      const result = Reflect.get(target, key, receiver)
      // 收集依赖
      track(target, key)
      // 递归处理嵌套对象
      if (typeof result === 'object' && result !== null) {
        return reactive(result)
      }
      return result
    },
    set(target, key, value, receiver) {
      const oldValue = Reflect.get(target, key, receiver)
      const result = Reflect.set(target, key, value, receiver)
      // 如果值发生变化，通知依赖更新
      if (oldValue !== value) {
        trigger(target, key, value, oldValue)
      }
      return result
    },
    deleteProperty(target, key) {
      const hadKey = Object.prototype.hasOwnProperty.call(target, key)
      const result = Reflect.deleteProperty(target, key)
      // 如果属性被删除，通知依赖更新
      if (hadKey && result) {
        trigger(target, key, undefined, target[key])
      }
      return result
    }
  })
}

// 依赖收集
function track(target, key) {
  // 收集依赖的逻辑
  console.log('收集', key, '的依赖')
}

// 触发更新
function trigger(target, key, newValue, oldValue) {
  // 通知依赖更新的逻辑
  console.log('触发', key, '的依赖更新')
}

// 使用
const user = reactive({
  name: '张三',
  age: 25
})

user.name = '李四' // 输出：触发 name 的依赖更新
console.log(user.name) // 输出：收集 name 的依赖 和 李四

3.3 Proxy的优势

相比Object.defineProperty，Proxy具有以下优势：

  1. 可以监听整个对象，而不仅仅是属性
  2. 可以监听数组的变化，无需重写数组方法
  3. 可以监听新增属性和删除属性
  4. 可以监听Map、Set等新的数据结构
  5. 嵌套对象的代理是惰性的，只有在访问时才会创建代理
  6. 支持13种拦截操作，功能更强大

4. Proxy vs Object.defineProperty

特性 Proxy Object.defineProperty
监听对象 ✅ 直接监听整个对象 ❌ 只能监听对象的属性
监听数组 ✅ 可以监听数组变化 ❌ 需要重写数组方法
新增属性 ✅ 可以监听新增属性 ❌ 需要使用Vue.set
删除属性 ✅ 可以监听删除属性 ❌ 需要使用Vue.delete
嵌套对象 ✅ 惰性代理，性能更好 ❌ 递归处理，性能开销大
新数据结构 ✅ 支持Map、Set等 ❌ 不支持
拦截操作 ✅ 支持13种拦截操作 ❌ 只支持get和set
浏览器支持 ✅ ES6+ ✅ ES5+
性能 ✅ 更好 ❌ 较差

5. Vue 3响应式系统的改进

5.1 更好的性能

  • 惰性代理：只有在访问嵌套对象时才会创建代理
  • 更少的递归：避免了Vue 2中对整个对象的递归遍历
  • 更高效的依赖收集：使用WeakMap和Map来存储依赖，提高查找效率

5.2 更完整的响应式

  • 支持新增属性：无需使用Vue.set
  • 支持删除属性：无需使用Vue.delete
  • 支持数组的所有操作：包括push、pop、shift、unshift、splice、sort、reverse等
  • 支持新的数据结构：Map、Set、WeakMap、WeakSet

5.3 更强大的API

Vue 3提供了一套更强大的响应式API，包括：

  • reactive：创建响应式对象
  • ref：创建响应式值
  • computed：创建计算属性
  • watch：监听响应式数据的变化
  • watchEffect：自动跟踪依赖的副作用

6. 响应式系统的实际应用

6.1 基本使用

<template>
  <div class="reactive-demo">
    <h2>Vue 3响应式系统示例</h2>
    
    <div class="user-info">
      <h3>用户信息</h3>
      <p>姓名：{{ user.name }}</p>
      <p>年龄：{{ user.age }}</p>
      <p>爱好：{{ user.hobbies.join(', ') }}</p>
      <p>地址：{{ user.address.city }}, {{ user.address.street }}</p>
    </div>
    
    <div class="actions">
      <button @click="updateName">更新姓名</button>
      <button @click="updateAge">更新年龄</button>
      <button @click="addHobby">添加爱好</button>
      <button @click="updateAddress">更新地址</button>
      <button @click="addProperty">添加属性</button>
      <button @click="deleteProperty">删除属性</button>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

// 创建响应式对象
const user = reactive({
  name: '张三',
  age: 25,
  hobbies: ['阅读', '运动', '音乐'],
  address: {
    city: '北京',
    street: '朝阳区'
  }
})

// 更新姓名
const updateName = () => {
  user.name = '李四'
}

// 更新年龄
const updateAge = () => {
  user.age++
}

// 添加爱好
const addHobby = () => {
  user.hobbies.push('旅行')
}

// 更新地址
const updateAddress = () => {
  user.address.street = '海淀区'
}

// 添加属性
const addProperty = () => {
  user.email = 'zhangsan@example.com'
}

// 删除属性
const deleteProperty = () => {
  delete user.age
}
</script>

<style scoped>
.reactive-demo {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.user-info {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

button {
  padding: 8px 16px;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #2563eb;
}
</style>

6.2 使用ref创建响应式值

对于基本类型的值，Vue 3提供了ref函数：

<template>
  <div class="ref-demo">
    <h2>ref示例</h2>
    <p>计数：{{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 创建响应式值
const count = ref(0)

// 递增计数
const increment = () => {
  count.value++
}
</script>

7. 响应式系统的内部实现

7.1 依赖收集

Vue 3使用WeakMap和Map来存储依赖：

  • WeakMap&lt;target, Map&lt;key, Set&lt;effect&gt;&gt;&gt;
  • target：响应式对象
  • key：对象的属性
  • effect：依赖函数

7.2 触发更新

当响应式对象的属性发生变化时，Vue 3会：

  1. 从依赖地图中获取该属性的所有依赖
  2. 执行所有依赖函数
  3. 更新DOM

7.3 响应式工具函数

Vue 3提供了一些响应式工具函数：

  • isReactive：检查一个对象是否是响应式的
  • isRef：检查一个值是否是ref
  • toRef：将对象的属性转换为ref
  • toRefs：将对象的所有属性转换为ref
  • unref：获取ref的值，如果不是ref则直接返回

8. 常见问题与解决方案

8.1 为什么Proxy比Object.defineProperty更好？

  • Proxy可以监听整个对象，而不仅仅是属性
  • Proxy可以监听数组的变化，无需重写数组方法
  • Proxy可以监听新增属性和删除属性
  • Proxy支持新的数据结构，如Map、Set等
  • Proxy的性能更好，尤其是对于大型对象

8.2 为什么Vue 3要使用Proxy？

  • 解决Vue 2响应式系统的局限性
  • 提高性能
  • 支持更完整的响应式
  • 支持新的数据结构
  • 提供更强大的API

8.3 Proxy的浏览器兼容性如何？

Proxy是ES6+的特性，支持所有现代浏览器，但不支持IE浏览器。Vue 3不再支持IE浏览器，这也是它能够使用Proxy的原因之一。

8.4 如何在Vue 3中处理非响应式数据？

如果需要处理非响应式数据，可以使用markRaw函数来标记一个对象，使其不会被转换为响应式对象：

import { reactive, markRaw } from 'vue'

const user = reactive({
  name: '张三',
  // 非响应式的配置对象
  config: markRaw({
    theme: 'light',
    size: 'medium'
  })
})

9. 总结

Vue 3的响应式系统基于ES6的Proxy，相比Vue 2的Object.defineProperty，具有以下优势：

  • 更完整的响应式：支持新增属性、删除属性、数组变化等
  • 更好的性能：惰性代理，更少的递归，更高效的依赖收集
  • 支持新的数据结构：Map、Set、WeakMap、WeakSet等
  • 更强大的API：提供了reactive、ref、computed、watch等API
  • 更好的开发体验：无需使用Vue.set和Vue.delete

通过深入了解Vue 3的响应式原理，我们可以更好地理解Vue的工作机制，写出更高效、更可靠的代码。同时，我们也可以看到Vue团队不断追求技术创新，利用最新的JavaScript特性来提高框架的性能和易用性。

10. 练习题

  1. 实现一个简单的响应式系统，使用Proxy来拦截对象的操作，并实现依赖收集和触发更新。

  2. 比较Proxy和Object.defineProperty的优缺点，并说明Vue 3为什么选择使用Proxy。

  3. 使用Vue 3的响应式API创建一个简单的待办事项应用，支持添加、删除和修改待办事项。

  4. 解释Vue 3中reactive和ref的区别，并说明在什么情况下应该使用哪个。

  5. 如何在Vue 3中处理非响应式数据？请举例说明。

通过这些练习，你将更加熟悉Vue 3的响应式系统，能够更好地理解和使用Vue 3的响应式API。

« 上一篇 异步组件与懒加载 下一篇 » ref与reactive的区别与选择
↑