Vue2 & Vue3 响应式实现原理

Vue2 和 Vue3 的响应式实现原理有所不同。

1. Vue2 响应式实现原理：

Vue2 使用 Object.defineProperty() 方法来实现数据劫持，从而实现数据的响应式更新。具体步骤如下：

• 首先，在初始化阶段，遍历 data 对象的所有属性，为每个属性创建一个对应的 watcher 对象（观察者对象）。
• 然后，通过 Object.defineProperty() 方法，将 data 对象的每个属性设置为 getter/setter，这样当 data 对象的属性发生变化时，可以通知对应的 watcher 对象进行更新。
• 最后，当 data 对象的属性发生变化时，会触发对应的 watcher 对象的 update() 方法，从而更新视图。

以下是一个简单的 Vue2 响应式实现示例：

// 引入依赖
import { observe, reactive } from 'vue'

// 定义一个响应式对象
const state = reactive({
  count: 0
})

// 使用 observe() 函数，将 state 对象转换为响应式对象
observe(state)

// 监听 count 属性的变化
new Watcher(state, 'count', (newValue, oldValue) => {
  console.log('count changed from', oldValue, 'to', newValue)
})

// 修改 count 属性的值
state.count++

2. Vue3 响应式实现原理：

Vue3 使用 Proxy() 方法来实现数据劫持，从而实现数据的响应式更新。具体步骤如下：

• 首先，在初始化阶段，遍历 data 对象的所有属性，为每个属性创建一个对应的 effect（副作用）函数。
• 然后，通过 Proxy() 方法，将 data 对象的每个属性设置为 getter/setter，这样当 data 对象的属性发生变化时，可以通知对应的 effect 函数进行更新。
• 最后，当 data 对象的属性发生变化时，会触发对应的 effect 函数的运行，从而更新视图。

以下是一个简单的 Vue3 响应式实现示例：

// 引入依赖
import { reactive, effect } from 'vue'

// 定义一个响应式对象
const state = reactive({
  count: 0
})

// 监听 count 属性的变化
effect(() => {
  console.log('count changed to', state.count)
})

// 修改 count 属性的值
state.count++