vue3中的proxy

最新推荐文章于 2023-12-31 22:35:08 发布

我胡为喜呀

最新推荐文章于 2023-12-31 22:35:08 发布

阅读量1k

点赞数 24

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/xu1912715645/article/details/135307401

版权

文章目录

vue3中的proxy是什么？

在 Vue 3 中，Proxy 主要用于实现响应式系统，实现对象代理的机制。它是 JavaScript 的一个内置对象，允许你拦截并自定义对象的行为。在 Vue 3 中，Proxy 可以在对象上设置拦截器，被用于监听对象的变化，对对象的访问进行自定义操作，从而实现响应式。

解决了什么问题？

在 Vue 2 中，Vue 使用了 Object.defineProperty 来实现响应式。这种方式存在一些限制，例如无法监听数组的变化，需要在初始化时就定义好对象的结构，以及性能开销较大。

Proxy 提供了更灵活和强大的拦截能力，能够监听对象的读取、赋值、删除等操作，也可以轻松地实现对数组的监听。因此，Vue 3 中使用 Proxy 来解决了 Vue 2 中的一些响应式系统的限制和性能问题。

使用方法

面是一个简单的示例，演示了如何使用 Proxy 创建一个响应式对象：

// 创建一个普通对象
const obj = { name: 'Vue', framework: true };

// 使用 Proxy 创建响应式对象
const reactiveObj = new Proxy(obj, {
  get(target, key, receiver) {
    // 在读取属性时进行拦截
    console.log(`读取属性 ${key}`);
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    // 在设置属性时进行拦截
    console.log(`设置属性 ${key} 为 ${value}`);
    return Reflect.set(target, key, value, receiver);
  },
});

// 通过 reactiveObj 读取属性
console.log(reactiveObj.name); // 会触发 get 拦截

// 通过 reactiveObj 设置属性
reactiveObj.version = 3; // 会触发 set 拦截

在上面的例子中，我们通过 Proxy 创建了一个响应式对象 reactiveObj。当读取和设置属性时，会触发 get 和 set 拦截器。这使得我们能够在这些操作发生时执行一些自定义逻辑，例如通知视图更新。

在 Vue 3 中，整个响应式系统都是基于 Proxy 来实现的，它为 Vue 提供了更强大和灵活的响应式能力。在平时的 Vue 3 开发中，大部分情况下我们无需直接与 Proxy 打交道，因为 Vue 3 提供了简洁而易用的 Composition API 和响应式函数。

Composition API 是 Vue 3 中引入的一组函数，允许你以逻辑组织代码，而不是按照选项的方式。相较于 Vue 2 的选项 API，Composition API 更加灵活，并且使组件逻辑更容易复用和测试。

Composition API 的核心函数有以下几个：

reactive: 将对象转换为响应式对象，基于 Proxy 实现。
ref: 创建一个包含响应式数据的对象，用于包装基本数据类型。
computed: 创建计算属性，可以基于其他响应式数据进行计算。
watch: 监听响应式数据的变化，类似于 Vue 2 中的 $watch。

用reactive函数举一个小小的例子
reactive 函数：
reactive 函数是 Composition API 提供的一个核心函数，它用于创建一个响应式对象。与 Vue 2 中的 data 选项相比，reactive 函数更加灵活，可以在组件的任何地方使用。
下面是一个简单的使用示例：

import { reactive, watch } from 'vue';

export default {
  setup() {
    // 使用 reactive 函数创建响应式对象
    const state = reactive({
      count: 0,
      message: 'Hello, Vue 3!',
    });

    // 使用 watch 监听 state.count 的变化
    watch(() => {
      console.log(`Count changed: ${state.count}`); 
    });

    // 返回响应式对象，以便在组件中使用
    return { state };
  },
};