Vue2 和 Vue3 响应式原理：面试对决

2023-11-28 06:15:29

Vue2 的响应式原理

Vue2 的响应式系统是基于 Object.defineProperty 来实现的。当一个对象被声明为响应式对象时，Vue2 会使用 Object.defineProperty 来劫持该对象的属性。当属性的值发生变化时，Vue2 就会触发更新视图。

Object.defineProperty 允许我们拦截对对象的属性访问和修改。我们可以通过 Object.defineProperty 来重新定义属性的 getter 和 setter 方法。当我们访问属性时，getter 方法就会被调用。当我们修改属性时，setter 方法就会被调用。Vue2 利用这一点来实现对数据的监控。

比喻：

Vue2 的响应式系统就像一个警卫，当数据的某个值发生变化时，警卫就会发出警报，通知视图进行更新。

示例：

const app = new Vue({
  data: {
    count: 0
  }
})

app.count++ // 视图更新

Vue3 的响应式原理

Vue3 的响应式系统是基于 Proxy 来实现的。Proxy 是一个新标准，它允许我们拦截对象的属性访问和修改。与 Object.defineProperty 相比，Proxy 具有更强大的功能和更简洁的语法。

Vue3 利用 Proxy 来劫持对象的所有属性，当属性的值发生变化时，Vue3 就会触发更新视图。

比喻：

Vue3 的响应式系统就像一个更高效的警卫，它可以同时监控多个对象的属性，并及时通知视图进行更新。

示例：

const app = new Vue({
  data: {
    count: 0
  }
})

app.count++ // 视图更新

Vue2 和 Vue3 的响应式原理对比

特性	Vue2	Vue3
实现方式	Object.defineProperty	Proxy
劫持时机	属性被声明为响应式对象时	对象被创建时
劫持范围	所有响应式属性	所有属性
性能	较差	较好
兼容性	较好	较差