前端面试题整理——VUE双向绑定原理 / 开普饭

VUE2.0和3.0数据双向绑定的原理，并说出其区别。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue2.0/3.0双向数据绑定原理</title>
</head>
<body>
姓名：<span id="name"></span>
<br>
<input type="text" id="inputText" oninput="changeTxt2()">
<hr>
姓名：<span id="name2"></span>
<br>
<input type="text" id="inputText2" oninput="changeTxt2()">

<script>
    // 2.0
    // ES5：Object.defineProperty 数据劫持实现
    let obj = {name: ''};
    let newObj = JSON.parse(JSON.stringify(obj))
    Object.defineProperty(obj, 'name', {
        get() {
            return newObj.name
        },
        set(value) {
            if (value === newObj.name) return;
            newObj.name = value;
            observer();
        }
    })

    function observer() {
        document.getElementById('name').innerHTML = document.getElementById('inputText').value = obj.name;
    }

    function changeTxt() {
        obj.name = document.getElementById('inputText').value;
    }

    /*
    * 弊端：
    * 1、需要将原来的对象克隆一份
    * 2、需要分别给对象中指定每一个属性设置监听
    * */

    // 3.0
    // ES6：Proxy 委托代理
    let obj2 = {};
    obj2 = new Proxy(obj2, {
        get(target, prop) {
            // target，代理的对象
            // prop，代理对象的属性
            return target[prop]
        },
        set(target, prop, value) {
            target[prop] = value
            observer2()
        }
    })
    // 不需要克隆，只需要整个对象进行代理
    function observer2() {
        document.getElementById('name2').innerHTML = document.getElementById('inputText2').value = obj2.name;
    }
    function changeTxt2() {
        obj2.name = document.getElementById('inputText2').value;
    }
</script>
</body>
</html>
前端面试题整理——VUE双向绑定原理

相关推荐
