6-16 vue3用Proxy 实现响应式
// 创建响应式 function reactive(target = {}) { if (typeof target !== 'object' || target == null) { // 不是对象或数组,则返回 return target } // 代理配置 const proxyConf = { get(target, key, receiver) { // 只处理本身(非原型的)属性 const ownKeys = Reflect.ownKeys(target) if (ownKeys.includes(key)) { console.log('get', key) // 监听 } const result = Reflect.get(target, key, receiver) // 深度监听 // 性能如何提升的? return reactive(result) }, set(target, key, val, receiver) { // 重复的数据,不处理 if (val === target[key]) { return true } const ownKeys = Reflect.ownKeys(target) if (ownKeys.includes(key)) { console.log('已有的 key', key) } else { console.log('新增的 key', key) } const result = Reflect.set(target, key, val, receiver) console.log('set', key, val) // console.log('result', result) // true return result // 是否设置成功 }, deleteProperty(target, key) { const result = Reflect.deleteProperty(target, key) console.log('delete property', key) // console.log('result', result) // true return result // 是否删除成功 } } // 生成代理对象 const observed = new Proxy(target, proxyConf) return observed } // 测试数据 const data = { name: 'zhangsan', age: 20, info: { city: 'beijing', a: { b: { c: { d: { e: 100 } } } } } } const proxyData = reactive(data)
谢谢老师,讲的非常细致,很容易懂。这一节学的是vue3用Proxy 实现响应式,为以后的学习打下了基础。
原来vue3能有这么多种性质,以及对vue3有了新的认识,期待后边的学习