前端开发攻略---从源码角度分析Vue3的Propy比Vue2的defineproperty到底好在哪里。一篇文章让你彻底弄懂响应式原理。

bbamx.

于 2024-04-16 11:41:37 发布

阅读量940

点赞数 30

CC 4.0 BY-SA版权

分类专栏：前端开发攻略文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/nibabaoo/article/details/137817478

本文比较了Vue2和Vue3在响应式编程中的差异，介绍了Vue2通过Object.defineProperty监听属性，而Vue3采用Proxy代理整个对象，提高了性能和灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、思考

Vue的响应式到底要干什么？

无非就是要知道当你读取对象的时候，要知道它读了。要做一些别的事情

无非就是要知道当你修改对象的时候，要知道它改了。要做一些别的事情

所以要想一个办法，把读取和修改的动作变成一个函数，读取和修改的时候分别调用对应的函数

在ES6之前，只能通过Object.defineproperty 给它变成一个get和set函数。当读取这个属性的时候运行get，修改这个属性的时候运行set

在ES6之后，就能通过Porxy去代理整个对象

2、Vue2的做法

针对某个对象中某个属性的做法

通过Object.defineProperty去针对某个对象的属性去进行监听

const obj = {
  a: 1,
  b: 2,
  c: {
    d: 3,
    e: 4,
  },
}

// 保存初始值
let v = obj.a

Object.defineProperty(obj, 'a', {
  get() {
    console.log('a', '读取')
    return v
  },
  set(val) {
    // 当原来的值与重新赋值的值不一样的时候才进行修改
    if (val !== v) {
      console.log('a