vue2.0与vue3.0 双向数据绑定原理区别

Z时代
2024-01-10
分类：综合

vue

用过vue的人都知道 vue2.x实现双向数据绑定的原理是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。

在MDN上对该方法的说明是：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。

它接收三个参数，要操作的对象，要定义或修改的对象属性名，属性描述符。重点就是最后的属性描述符。

属性描述符是一个对象，主要有两种形式：数据描述符和存取描述符。

这两种对象只能选择一种使用，不能混合两种描述符的属性同时使用。上面说的get和s et就是属于存取描述符对象的属性。

然后我们可以通过在存取描述符中的get和set方法内写入自定义的逻辑来实现对象获取属性和设置属性时的行为。

用代码演示vue2.x的原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <input type="text" >
        <span ></span>
    </div>
</body>
</html>
<script>
    var obj = {};
    Object.defineProperty(obj, 'prop', {
        get: function () {
            return val;
        },
        set: function (newVal) {
            val = newVal;
            document.getElementById('text').innerHTML = val;
        }
    });
    document.addEventListener('keyup', function (e) {
        obj.prop = e.target.value;
    });
</script>

　　浏览器展示

Vue3.x是用ES6的语法 Proxy对象来实现的，这个玩意儿也可以实现数据的劫持

用代码演示vue3.x的原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <input type="text" >
        <span ></span>
    </div>
</body>
</html>
<script>
    var obj = {};
    var obj1 = new Proxy(obj, {
        // target就是第一个参数obj, receive就是返回的obj(返回的proxy对象)
        get: function (target, key, receive) {
            // 返回该属性值
            return target[key];
        },
        set: function (target, key, newVal, receive) {
            // 执行赋值操作
            target[key] = newVal;
            document.getElementById('text').innerHTML = target[key];
        }
    })
    document.addEventListener('keyup', function (e) {
        obj1[0] = e.target.value;
    });
</script>