vue中數據雙向綁定的實現原理

時間 2019-11-11

標籤 vue 數據雙向綁定實現原理简体版

原文原文鏈接

vue中最多見的屬v-model這個數據雙向綁定了，很好奇它是如何實現的呢？嘗試着用原生的JS去實現一下。vue

首先大體學習瞭解下Object.defineProperty()這個東東吧！json

* Object.defineProperty()
        *   對對象的屬性進行 定義/修改
        * */

        let obj = {x:10}
        // 這兩種方式都相對來講比較簡單，直接，可是有些時候咱們須要對對象的屬性的修改和增長進行必要的干預
//        obj.y = 20;
//        obj.x = 100;
//        obj.x = 'abc';
//
//        let arr = [1,2,3];
//        arr.length = 'abc';//不可更改
//        console.log(arr);

//        console.log(obj.x);
//        delete obj.x;
//        console.log(obj);

        Object.defineProperty(obj, 'y', {
            configurable: false,    //設置是否可刪除  false爲不可刪除
            value: 100
        });

        console.log(obj);
        delete obj.y;//刪除
        console.log(obj);
        //設置對象某個屬性值的時候，順便設置它的屬性。enumerable 可枚舉 configurable 能夠刪除否 writable 可改值否
        Object.defineProperty(obj, 'z', {//enumerable  可枚舉(沒有則新添加) 
            enumerable: true,//爲false時，for..in object.keys  json.stringfy 不能取到該z屬性
            value: 10000
        });

        for (var attr in obj) {
            console.log(attr);
        }

        Object.defineProperty(obj, 'm', {
            writable: false,//可更改
            value: 9
        });

        console.log(obj);
        obj.m = 100;
        console.log(obj);

以上總結了對象的defineProperty四個屬性：configurable，enumerable，value，writable學習

接下來再深刻認識下它的另外兩個方法：set 以及getthis

注意：get和set不能與configurable，enumerable，value，writable同時存在spa

let obj = {x:10}

        let y = 100;
        Object.defineProperty(obj, 'y', {
            get() {
                //當obj的y屬性被調用的時候觸發，該方法的返回值將做爲獲取的結果
                console.log('get');
                return y;
            },
            set(value) {
                //當obj的y屬性被設置的時候觸發
                console.log('set', value);
                y = value;
            }
        })

        console.log(obj.y);
        obj.y = 1;
        console.log(obj.y);

介紹完defineProperty了，最後咱們一塊兒看看如何簡單的實現數據雙向綁定吧！雙向綁定

<body>

    <input type="text" id="age">
    <h1></h1>

    <script>

        var ageElement = document.querySelector('#age');
        var h1Element = document.querySelector('h1');

        let obj = {};

        Object.defineProperty(obj, 'age', {
            get() {

            },
            set(value) {
                ageElement.value = value;
                h1Element.innerHTML = value;
            }
        })

        obj.age = 10;

        ageElement.oninput = function() {
            obj.age = this.value;
        }
       
    </script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。