浅谈vue3.0之Proxy

vue3.0数据响应式的原理

• 原理：使用Proxy来实现响应式数据

• 需求：把obj中的属性转化为响应式属性

对象方式

let obj = {
  name: "ppp",
  age: 20
}

//参数1：需要包装的对象，参数2：如何监听的获取和赋值
let state = new Proxy(obj, {
  get(obj, key) { // 获取的话，一般都是使用 对象的属性拿到的值，因此直接返回一个属性值即可！
    // console.log(obj, key) //{name: "ppp", age: 20} "name"
    return obj[key]
  },
  set(obj, key, newValue) {
    console.log(obj, key, newValue); //{name: "ppp", age: 20} "name" "pink"
    obj[key] = newValue
  }
})


// console.log("state", state.name); //state ppp
state.name = "pink"
console.log("state", state, state.name); //state Proxy {name: "pink", age: 20} pink

数组方式

//数组的方式

let arr = [1, 3, 5]

//参数1：需要包装的对象，参数2：如何监听的获取和赋值
let state = new Proxy(arr, {
  get(obj, key) { // 获取的话，一般都是使用 对象的属性拿到的值，因此直接返回一个属性值即可！
    // console.log(obj, key); // [1, 3, 5] "1"
    return obj[key]
  },
  set(obj, key, newValue) {
    console.log(obj, key, newValue); //[1, 3, 5, 7] "length" 4
    obj[key] = newValue
    return true; //上一次的操作成功了，可以执行下一步了
  }
})

// console.log("arr", state, state[1]); //arr Proxy {0: 1, 1: 3, 2: 5} 3
state.push(7)
console.log("arr", state); //arr Proxy {0: 1, 1: 3, 2: 5, 3: 7}