在 Vue 3 中,使用 `Proxy` 来实现数据的响应式。`Proxy` 可以拦截对目标对象的各种操作,例如读取属性、设置属性等,并在这些操作发生时执行自定义的逻辑。 以下是一个简单的示例,展示了如何使用 `Proxy` 来监听对象属性的读取和设置:

   

const obj = {
  name: 'alice',
  age: 30
};

const proxyObj = new Proxy(obj, {
  get(target, propKey) {
    console.log(`读取属性: ${propKey}`);
    return target[propKey];
  },
  set(target, propKey, value) {
    console.log(`设置属性: ${propKey} 为 ${value}`);
    if (propKey === 'age' && value > 100) {
      throw new TypeError('年龄不能超过 100');
    }
    target[propKey] = value;
    return true; 
  }
});

proxyObj.name = 'bob'; 
console.log(proxyObj.age); 
proxyObj.age = 150; // 抛出错误:TypeError: 年龄不能超过 100

在上述示例中: - `new Proxy(obj, {...})` 创建了 `obj` 对象的代理`proxyObj`

- `get` 方法用于拦截属性的读取操作,当读取 `proxyObj` 的属性时,会执行这里的逻辑,并输出相关信息,然后返回原始对象中对应的属性值。

- `set` 方法用于拦截属性的设置操作。在这个例子中,当设置 `age` 属性且值大于 100 时,会抛出一个错误,否则直接在原始对象上设置属性值并返回 `true`。

set(target, propKey, receiver) 是 ES6 中 Proxy 对象的一个方法,用于拦截对象属性的读取操作。

其中的参数含义如下:

  • target:要拦截的目标对象。
  • propKey:被读取的属性名。  prop的翻译就是属性
  • receiver(可选):操作行为所针对的对象,通常是实例化的 Proxy 对象本身。

在使用 Proxy 进行代理时,当通过代理对象读取目标对象的属性时,set 方法会被触发。你可以在 get 方法中自定义对属性读取的处理逻辑。例如,可以在读取属性时进行额外的操作、返回特定的值,或者根据条件进行不同的处理等。

    通过使用 `Proxy`,可以更灵活地控制对象属性的访问和修改,实现更复杂的数据响应式逻辑。在 Vue 3 的实际应用中,它被用于监听组件的状态数据,当数据发生变化时,自动触发相关的视图更新等操作,而无需开发者手动去管理数据的变化和视图的更新这就是响应式, 另外,在 Vue 3 的开发中,`vue.config.js` 中的 `devServer.proxy` 配置也使用了 `Proxy` 来实现开发服务器的代理功能,用于解决跨域请求问题。

例如: 

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://e.dxy.net', 
        changeOrigin: true 
      }
    }
  }
};

     ` 在上述配置中,当发送以 `/api` 开头的请求时,会被代理到 `http://e.dxy.net` 这个目标地址,从而解决跨域问题,方便在开发过程中与后端接口进行交互。这里的代理实现也是基于 `Node.js` 中的 `http-proxy-middleware` 等库,利用了 `Proxy` 的原理来拦截和转发请求。

代理说白了就是,你找领导吗,领导比较忙,你找秘书就行了

       在 Java 中也有proxy,java的Proxy(代理模式)的作用是为其他对象提供一种代理以控制对这个对象的访问。代理模式一般涉及到的角色有抽象角色、代理角色和真实角色:

- **抽象角色**:声明真实对象和代理对象的共同接口

- **代理角色**:代理对象角色内部含有对真实对象的引用,从而可以操作真实对象,同时代理对象提供与真实对象相同的接口以便在任何时刻都能代替真实对象。同时,代理对象可以在执行真实对象操作时,附加其他的操作,相当于对真实对象进行封装。

- **真实角色**:代理角色所代表的真实对象,是最终要引用的对象。

而在 Vue3 中,Proxy 的主要用于在 JavaScript 中处理对象的读写操作,它就像一个中介,帮助管理对象的行为。在 Vue3 中,Proxy 主要用于优化性能,让开发者更有效地控制数据的流动,避免不必要的渲染和计算。 因此,虽然 Vue3 中的 Proxy 和 Java 中的 Proxy 在设计目的和实现方式上有所不同,但它们都提供了一种机制,用于在访问对象时进行额外的处理或控制。

GitHub 加速计划 / vu / vue
207.55 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:3 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 5 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐