简单实现 Vue3 中 Proxy 对数据的劫持

最新推荐文章于 2024-09-18 09:26:46 发布

Jade-beads

最新推荐文章于 2024-09-18 09:26:46 发布

阅读量1.9k

点赞数 1

文章标签： vue.js javascript es6

本文链接：https://blog.csdn.net/m0_57188429/article/details/116979325

版权

Vue3.0采用Proxy替代了Object.defineProperty()，通过compositionAPI的reactive()生成响应式对象。本文深入探讨如何简单实现shallowReactive、reactiv、shallowRef和ref，理解Vue3中数据监听的灵活性，以提高性能和优化项目开发。

摘要由CSDN通过智能技术生成

vue3.0 使用Proxy代替了vue2.0版本中的Object.defineProperty()，首先利用compositionAPI中的 reactive() 函数返回一个Proxy对象，使得数据可监测。
Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写
本篇将简单实现 shallowReactive 与 reactiv 、shallowRef与 ref，看Vue3中如何实现数据劫持

shallowReactive 与 reactiv

首先定义一个Proxy的处理器对象

// 定义一个Proxy处理器对象
const reactiveHandler = {
   
  get(target, prop) {
   
    console.log('进行的数据读取操作', prop)
    const result = Reflect.get(target, prop)
    return result
  },
  set(target, prop, value) {
   
    console.log('进行了修改数据的操作', prop, value)
    const result = Reflect.set(target, prop, value)