Vue实现数据双向绑定的两种方式-蒲公英云

Vue实现数据双向绑定的两种方式

第一种是———————》数据劫持（Object.defineProperty）
第二种是———————》代理（proxy）

面试前准备（ps：被问过一次了）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>$Title$</title>
</head>
<body>
ES5：Object.defineProperty
<div style="width: 100%;height: 1px;background-color:red;margin-top: 10px"></div>
<br/>
输入框:<span id="sp"></span>
<br/>
<input type="text" id="ipt" autocomplete="off">
<script>
    let obj = {
        name: ''
    }
    let newObj = {
        ...obj
    }
    Object.defineProperty(obj, 'name', {
        get() {
            return newObj.name
        },
        set(v) {
            newObj.name = v
            observe()
        }
    })
    function observe() {
        sp.innerHTML = newObj.name
    }
    ipt.oninput = function () {
        obj.name = this.value
    }
</script>
<br/><br/>
ES6：Proxy
<br/>
<div style="width: 100%;height: 1px;background-color:red;margin-top: 10px"></div>
<br/>
输入框:<span id="sp1"></span>
<br/>
<input type="text" id="ipt1">
<script>
    let obj2 = {
        name: ''
    }
    obj2 = new Proxy(obj2, {
        get(target, p) {
            return target[p]
        },
        set(target, p, value) {
            target[p] = value
            observe2()
        }
    })
    function observe2() {
        sp1.innerHTML = obj2.name
    }
    ipt1.oninput = function () {
        obj2.name = this.value
    }
</script>
</body>
</html>