vue2.0 和 Vue 3.0 的响应式原理-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45836841/article/details/132194082

本文详细介绍了Vue2.0通过`data.defineProperty()`实现响应式（数据劫持）的方法，以及在处理新增、删除属性时的局限性。对比之下，Vue3.0利用Proxy和Reflect进行更深层次的属性拦截，提供了更为全面的响应式功能。

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

vue2.0 的响应式

实现原理：
- 对象类型：通过 object.defineProperty() 对属性的读取、修改进行拦截（数据劫持）。
- 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）

Object.defineProperty(data,'count',{
  get(){},
  set(){}
})

存在的问题

新增属性、删除属性，界面不会更新。

这样解决
this.$set(this.Person,'sex','女')

Vue.set(this.Person,'sex','女')

直接通过下标修改数组，界面不会更新。

这样解决
this.$set(this.Person.hobby,0,'逛街')

this.Person.hobby.splice(0,1,'逛街')

vue3.0 的响应式

实现原理：

通过Proxy（代理）：拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除等。

     //模拟，模拟，只是助攻理解，人家可不是这么整的，别让我的笔记误人子弟


        let person = {
            name:'相柳',
            age:6
        }
        // 模拟Vue3中实现响应式
        const p = new Proxy(person,{
            // target是传进来的person ， propName要获取的属性
            get(target,propName){
                console.log(`有人读取了p身上的${propName}属性`)
                return target[propName]
               
            },
            // set既可以修改也可以新增
            set(target,propName,value){
                console.log(`有人修改了p身上的${propName}属性`)
                target[propName] = value
            },
            deleteProperty(target,propName){
                console.log(`有人删除了p身上的${propName}属性`)
                return delete target[propName]
            }
        })

通过 Reflect（反射）：对被代理对象（源对象）的属性进行操作。

接近于vue3的 雏形

 let person = {
            name:'相柳',
            age:6
        }
   const p = new Proxy(person,{
            // target是传进来的person ， propName要获取的属性
            get(target,propName){
                console.log(`有人读取了p身上的${propName}属性`)
                return Reflect.get(target,propName)
               
            },
            // set既可以修改也可以新增
            set(target,propName,value){
                console.log(`有人修改了p身上的${propName}属性`)
                Reflect.set(target,propName,value)
            },
            deleteProperty(target,propName){
                console.log(`有人删除了p身上的${propName}属性`)
                return Reflect.deleteProperty(target,propName)
            }
        })