浅谈vue3.0之Proxy

目录

vue3.0数据响应式的原理对象方式数组方式

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}