vue2.0与vue3的响应式

布满荆棘的人生 2022-09-04 08:57 184阅读 0赞

## vue2的响应式 ##

核心：

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

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

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

所以，这在使用过程中，使用的是$set设置数据，在数据未及时更新的情况下。

## Vue3的响应式 ##

*  核心:
    
     *  通过Proxy(代理): 拦截对data任意属性的任意(13种)操作, 包括属性值的读写, 属性的添加, 属性的删除等...
     *  通过 Reflect(反射): 动态对被代理对象的相应属性进行特定的操作
     *  文档:
        
         *  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global\_Objects/Proxy
         *  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global\_Objects/Reflect

通过html文件进行查看：

<!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>Document</title>
    </head>
    
    <body>
        <script type="text/JavaScript">
            // 目标对象
            const user = {
                name: '123',
                age:20,
                wife: {
                    name: '434',
                    age:19
                }
            }
    
            // 把目标对象变为代理对象
            // 参数1: user : target目标对象
            // 参数2: handler : 处理器对象,用来监视数据及数据的操作
            const proxyUser = new Proxy(user, {
                // 获取目标对象的某个属性值
                get(target,prop){
                    return Reflect.get(target, prop);
                },
                // 修改目标对象的属性值/为目标对象添加新的属性值
                set(target, prop, val){
                    console.log('set方法调用了');
                    return Reflect.set(target, prop, val);
                },
                // 删除目标对象的某个属性
                deleteProperty(target, prop){
                    return Reflect.deleteProperty(target, prop);
                }
            })
            // 通过代理对象获取目标对象中的某个属性值
            console.log(proxyUser.name);
            // 通过代理对象更新目标对象上的某个属性值
            proxyUser.name = '456'
            console.log(user);
            // 通过代理对象向目标对象中添加一个新的属性值
            proxyUser.gender = 'male'
            console.log(user);
            delete proxyUser.name
            console.log(user);
            // 更新目标对象中的某个属性对象中的属性值
            proxyUser.wife.name = '789'
            console.log(user);
        </script>
    </body>
    
    </html>

在vue3中是通过Proxy和和Reflect实现响应式数据的，比vue2更加强大，效率更高

因为vue2中的是循环遍历得到属性，当在属性较多的情况下，效率会很低，通过Object.defineProperty()为每个属性添加get和set方法

vue3：直接通过一个代理（Proxy）对象和Reflect对象，而且数据对象是深层次的一个解释，即可以直接修改更深层次的数据