vue2.0与vue3.0的响应式原理

首先发布vue2.0中的响应式原理，主要是利用了 Object.defineProperty中的set和get方法来实现响应式。

 let p = {}
          Object.defineProperty(p, 'name', {
              // 有人读取name时调用
              get() {
                  return person.name
              },
              // 有人修改name时调用
              set() {
                  console.log('有人修改了name属性')
                  person.name = this.name
              }
          })

这里书写我所认为的响应式，主要输数据劫持和数据代理。通过set和get可以实现通过页面上的内容可以修改原数据中的内容。从而实现响应式。
在vue 2.0中主要通过get和set，但是get和set有只是可以查询和修改的时候进行调用，但是更新和删除的时没有办法。没有put或者delete这种方法。所以vue2.0中有很大的限制。
在vue3.0针对这种限制进行创新：

const p = new Proxy(person, {

            // 有人读取p的某个属性时调用
            get(target, proName) {
                console.log(`有人读取了${proName}属性`)
                return Reflect.get(target, proName)
            },

            // 有人修改p的某个属性时调用或给p追加某个属性时调用
            set(target, proName, value) {
                console.log(`有人修改了${proName}属性`)
                return Reflect.set(target, proName, value)

            },
            // 有人删除p的某个属性时调用
            deleteProperty(target, proName) {
                console.log(`有人删除了${proName}属性`)
                return Reflect.deleteProperty(target, proName)

            }

在这里就通过ES6中的proxy和reflect，（没有学习过ES6的可以去学习一下）这里就通过这里的get来读取数据，set在修改和追加的时候被调用，而delete就是在delete的时候去调用，这种刚好去满足了所有的要求。随着技术的进步，vue也做的更加完美。

具体的细节的理解，大家可以留言在下面，大家一起学习，一起进步。

标签：set,name,get,proName,调用,响应,vue3.0,vue2.0,target
来源： https://blog.csdn.net/qq_52599851/article/details/122084692