vue数据劫持和双向绑定原理

主要是用了Object.defineProperty重新定义了一下属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document33</title>
</head>
<body>
    <p>name: <input type="text" id='name'/></p>
    <p>age: <input type="text" id='age'/></p>
    <div id='show'></div>
    <script>
        var oDiv = document.getElementById('show');
        var nameO = document.getElementById('name');
        var age = document.getElementById('age');
        console.log('name:',name)
        console.log('age:',age)
        var oData = {
            //valueObj: {
              //  value: '你陈哥',
              // name: 'haha'
            //},
             name: '你陈哥',
             age: 10,
             value: ''
        };
        // 循环绑定数据
        nameO.oninput = function () {
            console.log('nameO',this.value)
            oData.value = this.value;
            //oData.valueObj.value = this.value;
        };
        age.oninput = function () {
            console.log('age',this.value)
            oData.value = this.value;
            //oData.valueObj.value = this.value;
        };
        function upDate () {
            oDiv.innerText = oData.value;
            //oDiv.innerText = oData.valueObj.value;
        }
         // 监控对象的某个属性是否发生改变
        function Observer (data) {
            if (!data || typeof data != 'object') {
                return data;
            };
            // for (var prop in data) {

            // }
            Object.keys(data).forEach(function (key) {
                definedRective(data, key, data[key]);
            });
        }

        function definedRective (data, key, val) {
            // AO
            //Observer(val);
            Object.defineProperty(data, key, {
                get () {
                    // console.log('get');
                    return val;
                },
                set (newValue) {
                    if (newValue == val) return;
                    console.log('old-',val)
                    val = newValue;
                    console.log('new-',val)
                    // 修改值之后，负责更新页面
                    upDate();
                }
            })
        };

        Observer(oData);

        </script>
    </body>
</html>
来源：CSDN
作者：yuanyi正
链接：https://blog.csdn.net/yuan_618859/article/details/104813268
标签
data
vue