Vue3和Vue2的响应式（个人学习）_html中如何写vue3的响应式-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_15034541/article/details/126486970

本文解析了Vue2中利用`defineProperty`实现的响应式原理，并对比Vue3中Proxy和Reflect如何实现更全面的劫持。通过实例演示了Proxy在属性增删改查中的应用，展示了从旧版本到新版响应式核心的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue2的响应式

核心:

对象: 通过defineProperty对对象的已有属性值的读取和修改进行劫持(监视/拦截)
数组: 通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持

Object.defineProperty(data, 'count', {
    get () {}, 
    set () {}
})

问题

对象直接新添加的属性或删除已有属性, 界面不会自动更新
直接通过下标替换元素或更新length, 界面不会自动更新 arr[1] = {}

vue3的响应式

核心:

通过Proxy(代理): 拦截对data任意属性的任意(13种)操作, 包括属性值的读写, 属性的添加, 属性的删除等…
通过 Reflect(反射): 动态对被代理对象的相应属性进行特定的操作
proxy接受两个参数第一个是根目标就是要被代理成响应式数据的对象，第二个是监视这个对象的方法。

在这里插入图片描述

Reflect
Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法。这些方法与proxy handlers (en-US)的方法相同。Reflect不是一个函数对象，因此它是不可构造的。

描述
与大多数全局对象不同Reflect并非一个构造函数，所以不能通过new 运算符对其进行调用，或者将Reflect对象作为一个函数来调用。Reflect的所有属性和方法都是静态的（就像Math对象）。
在这里插入图片描述

通过这些方法就可以实现vue3简单的响应式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue3响应式</title>
</head>

<body>
    <script>
        const obj = {
            name: "小明",
            age: 20,
            join: "跑步"
        }
        const proxy_ject = new Proxy(obj, {
            set(target, prop, val) {
                console.log('执行了set', prop, val);
                return Reflect.set(target, prop, val)
            },
            get(target, prop) {
                console.log('执行了get', prop);
                return Reflect.get(target, prop)
            },
            deleteProperty(target, prop) {
                console.log('执行了删除');
                return Reflect.deleteProperty(target, prop)
            }
        })
        proxy_ject.name
        console.log(proxy_ject);
        proxy_ject.name = "小红"
        console.log(obj);
        proxy_ject.array = [0, 1, 2]
        console.log(proxy_ject);
        proxy_ject.array[3] = '新增'
        console.log(proxy_ject);
        delete proxy_ject.age
        console.log(proxy_ject);
    </script>
</body>

</html>