reactive 对比ref

• reactive 实现原理：
  • 通过Proxy(代理)：拦截对象中任意属性的变化，包括属性值的读写，属性的添加，属性的删除等
  • 通过reflect(反射)：对被代理对象的属性进行操作

  let person = {name:'jerry',age:15}
  let p = new Proxy(person,{
  //拦截设置属性或添加新属性
  set(target,prop,value){
     Reflect.set(target,prop,value)
  },
  //拦截读取属性
  get(target,prop){
     	console.info(`有人读取了p身上的${prop}属性`)
        console.dir(target)
        return Reflect.set(target,prop)
                 },
  //拦截删除属性
  deleteProperty(target,propsName){
     return Reflect.deleteProperty(target,propsName)
     }
  

reactive 对比ref

• 从定义数据角度对比：
  - ref用来定义：基本数据类型
  - reactive用来定义：对象（或数组）类型数据
  - 备注：ref也可以用来定义对象（或数组）的类型数据，它内部会自动通过reactive转为代理对象
• 从原理角度对比：
  - ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）
  - reactive 通过使用Proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部的数据
• 从使用角度对比：
  - ref 定义的数据：操作数据需要.value,读取数据时模板中直接读取不需要.value
  - reactive 定义的数据：操作数据与读取数据，均不需要.value