vue2响应式原理及缺点和vue3响应式原理实现

vue2响应式原理：

对象类型：通过Object.defineProperty() 对属性读取、修改进行拦截（数据劫持）

数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）

vue2 响应式实现

let person = {
  name: '张三'，
  age: 18        
}
let p = {}
Object.defineProperty( p, 'name', {
    get(){ // 有人读取name时调用
      return person.name
    },
    set( value ){ // 有人修改name时调用
      person.name = value
    } 
})
Object.defineProperty( p, 'age', {
    get(){ // 有人读取age时调用
      return person.age
    },
    set( value ){ // 有人修改age时调用
      person.age = value
    } 
})

 

vue2 响应式缺点

this.$set( this.objName, 'key', 'value' )  //vue2 对象添加属性
this.$delete( this.objName, 'key' )  // 对象删除属性
this.$set( this.arrayName, 0, 'value' )  // 修改数组索引0的value
或者 this.arrayName.splice( 0, 1, 'value )

vue3的响应式原理：

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

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

详见MDN文档

vue3响应式实现

let p = new Proxy(person, {

      get(target, propName) {

        // return target[propName]   js是单线程 用Object.defineProperty一旦报错就挂掉了

        return Reflect.get(target, propName) // 通过Reflect (反射对象) 它身上的defineProperty 去操作 即使出错也不会挂掉

      },

      set(target, propName, value) {

        // target[propName] = value

        Reflect.set(target, propName, value)

      },

      deleteProperty(target, propName) {

        // return delete target[propName]

        return Reflect.deleteProperty(target, propName)

      }

    })