详解Vue响应式的部分实现

//实现一个简单的双向绑定
const data = {}
const name = 'xiaowanzi'
Object.defineProperty(data, 'name', {
  get: function () {
    console.log('get')
    return name
  },
  set: function (newVal) {
    console.log('set')
    name = newVal
  }
})
//测试
console.log(data.name)//get xiaowanzi
data.name = 'list'//set

//实现Vue响应式原理
let obj = {
  name: 'aaa',
  age: 18
}
//获取obj对象的所有key
const keys = Object.keys(obj)//Object.keys()返回一个由一个给定对象的资深可枚举属性组成的数组，数组中的属性名的排列顺序和正常循环遍历该对象时返回的顺序一致
//遍历Key数组，对obj对象的每一个属性进行处理
keys.forEach(key => {
  //使用value变量保存key对应的属性值
  let value = obj[key]
  //使用Object.defineProperty
  Object.defineProperty(obj, key, {
    get() {//当获取属性时，回来到这里
      console.log(`${key}属性被获取`)
      return value
    },
    set(newValue) {//当修改属性时，会来到这里，并且设置的值会传给newValue
      console.log(`${key}属性被修改`)
      //这里不能写成obj[key]=newValue
      //如果这样写相当于又对该属性进行修改值，又会进入set，就死循环了
      value = newValue
    }
  })
})
​
//现在我们已经可以实现监听obj对象的读取与修改了
console.log(obj.name)//在打印'aaa'之前会先打印'name被获取'，也就是说监听到属性的获取。
obj.name = 'bbb'//打印name属性被修改，也就是说监听到了属性的改变
​
//实现Vue响应式原理
let obj={
  name:'aaa',
  age:18
}
//获取obj对象的所有key
const keys=object.keys(obj)//Object.keys()返回一个由一个给定对象的资深可枚举属性组成的数组，数组中的属性名的排列顺序和正常循环遍历该对象时返回的顺序一致
//遍历Key数组，对obj对象的每一个属性进行处理
keys.forEach(key=>{
  //使用value变量保存key对应的属性值
  let value = obj[key]
  //使用Object.defineProperty
  Object.defineProperty(obj,key,{
      get(){//当获取属性时，回来到这里
        console.log(`${key}属性被获取`)
        return value
      },
      set(newValue){//当修改属性时，会来到这里，并且设置的值会传给newValue
        console.log(`${key}属性被修改`)
        //这里不能写成obj[key]=newValue
        //如果这样写相当于又对该属性进行修改值，又会进入set，就死循环了
        value=newValue
      }
  })
})
​
//现在我们已经可以实现监听obj对象的读取与修改了
console.log(obj.name)//在打印'aaa'之前会先打印'name被获取'，也就是说监听到属性的获取。
obj.name='bbb'//打印name属性被修改，也就是说监听到了属性的改变

const student = {
  age: 23
}
const handler = {
  get(target, prop) {
    console.log("读值：", key, value);
    target[key] = value;
    return target[prop]
  },
  set(target, key, value) {
    console.log("设置值", key, value);
    target[key] = value;
    return true
  }
}
const proxy = new Proxy(studengt, handler)
console.log(proxy.age)//23
//proxy.age=32   //32

//Proxy+Reflect
let obj = {
  name: 'aaa',
  age: 18
}
//第一个参数为要代理的对象，第二个参数位hander
const proxy = new Proxy(obj, {
  //当访问第一个属性的时候会得到getter
  //同时会传递三个参数
  //target要进行代理对象，这里就是obj
  //key被访问的属性
  //receiver用来绑定this
  get(target, key, receiver) {
    console.log(`${key}属性被访问`)
    return Reflect.get(target, key, receiver)
  },
  //当某一属性修改的时，回来到Setter
  // 同时会传递四个参数
  // target要进行代理的对象，这里就是obj
  // 可以被访问的属性
  // newValue新修改的值
  // receiver用来绑定this
  set(target, key, newValue, receiver) {
    console.log(`${key}属性修改`)
    return Reflect.set(target, key, newValue, receiver)
  }
})
// 以上代码执行完，得到的就是proxy对象就是obj对象的代理
// 我们只需要修改代理对象的就可以做到修改原型对象的效果
// 而且我们对代理对象的修改使我们能够监听到的
console.log(proxy.name)
proxy.name = 'bbb'