手写Vue2.X、Vue3.X源码系列（四）：数据响应式原理最全面解析

前端

2023-10-22 03:21:31

前言

大家好，我是[你的名字]，一名资深前端工程师。在前几篇文章中，我们共同探索了Vue.js的入门知识、组件化开发以及路由系统。在今天的文章中，我们将一起深入Vue.js的核心原理之一：数据响应式。

什么是数据响应式

数据响应式是一种编程技术，它允许我们轻松地追踪和响应数据状态的变化。在Vue.js中，数据响应式是指Vue.js能够自动追踪和响应数据状态的变化，并自动更新视图。

Vue2.X的数据响应式原理

Vue2.X的数据响应式原理主要基于发布订阅模式和观察者模式。

发布订阅模式

发布订阅模式是一种设计模式，它允许对象之间进行一对多通信。在Vue2.X中，当数据发生变化时，会发布一个消息，而所有订阅该消息的组件都会收到这个消息并做出相应的更新。

观察者模式

观察者模式是一种设计模式，它允许一个对象（观察目标）的状态改变时，通知所有依赖于它的对象（观察者）。在Vue2.X中，数据对象就是一个观察目标，而组件就是一个观察者。当数据对象发生变化时，它会通知所有依赖于它的组件，从而更新视图。

Vue3.X的数据响应式原理

Vue3.X的数据响应式原理与Vue2.X不同，它使用的是Proxy API。

Proxy API

Proxy API允许我们创建一个对象，当它的属性发生变化时，会自动触发一个回调函数。在Vue3.X中，Vue.js利用Proxy API来追踪数据对象的变化，从而实现数据响应式。

手写min-vue的数据响应式

为了更好地理解Vue.js的数据响应式原理，我们尝试自己实现一个简单的响应式数据系统——min-vue。

min-vue的实现

// 定义一个响应式数据对象
const data = {
  message: 'Hello, min-vue!'
}

// 创建一个Proxy对象，对data对象进行代理
const proxy = new Proxy(data, {
  get(target, prop) {
    // 当读取data对象的属性时触发
    console.log(`正在读取属性：${prop}`)
    return target[prop]
  },
  set(target, prop, value) {
    // 当设置data对象的属性时触发
    console.log(`正在设置属性：${prop}，值为：${value}`)
    target[prop] = value
    // 通知所有订阅者数据已更新
    subscribers.forEach(fn => fn())
    return true
  }
})

// 订阅数据变化的回调函数
const subscribers = []
const subscribe = (fn) => subscribers.push(fn)

// 使用代理对象proxy来访问和修改数据
proxy.message = 'Hello, Vue!'

// 打印日志
console.log(proxy.message) // 输出：Hello, Vue!