<option id="mwy0y"><strong id="mwy0y"></strong></option>
  • <ul id="mwy0y"><sup id="mwy0y"></sup></ul>
  • <ul id="mwy0y"></ul>
  • <del id="mwy0y"><dfn id="mwy0y"></dfn></del><ul id="mwy0y"><sup id="mwy0y"></sup></ul>
  • <abbr id="mwy0y"></abbr>

    千鋒教育-做有情懷、有良心、有品質的職業教育機構

    400-811-9990
    手機站
    千鋒教育

    千鋒學習站 | 隨時隨地免費學

    千鋒教育

    掃一掃進入千鋒手機站

    領取全套視頻
    千鋒教育

    關注千鋒學習站小程序
    隨時隨地免費學習課程

    上海
    • 北京
    • 鄭州
    • 武漢
    • 成都
    • 西安
    • 沈陽
    • 廣州
    • 南京
    • 深圳
    • 大連
    • 青島
    • 杭州
    • 重慶
    當前位置:長沙千鋒IT培訓  >  技術要點  >  千鋒長沙前端培訓:Vue的雙向數據綁定原理

    千鋒長沙前端培訓:Vue的雙向數據綁定原理

    來源:千鋒教育
    發布人:千鋒長沙
    時間: 2021-11-22 17:15:55

           vue.js 是采用數據劫持結合發布者-訂閱者模式的方式,通過Object.defineProperty()來劫持各個屬性的setter,getter,在數據變動時發布消息給訂閱者,觸發相應的監聽回調。下面千鋒長沙前端培訓給大家說說具體實現步驟,感興趣的可以看看:

    src=http___www.63716.com_upfile_201912_2019123041611953.jpg&refer=http___www.63716

           當把一個普通 Javascript 對象傳給 Vue 實例來作為它的 data 選項時,Vue 將遍歷它的屬性,用 Object.defineProperty 都加上 setter和getter 這樣的話,給這個對象的某個值賦值,就會觸發setter,那么就能監聽到了數據變化。

           compile解析模板指令,將模板中的變量替換成數據,然后初始化渲染頁面視圖,并將每個指令對應的節點綁定更新函數,添加監聽數據的訂閱者,一旦數據有變動,收到通知,更新視圖。

           Watcher訂閱者是Observer和Compile之間通信的橋梁,主要做的事情是:

           1、在自身實例化時往屬性訂閱器(dep)里面添加自己。

           2、自身必須有一個update()方法。

           3、待屬性變動dep.notice()通知時,能調用自身的update()方法,并觸發Compile中綁定的回調,則功成身退。

           MVVM作為數據綁定的入口,整合Observer、Compile和Watcher三者,通過Observer來監聽自己的model數據變化,通過Compile來解析編譯模板指令,最終利用Watcher搭起Observer和Compile之間的通信橋梁,達到數據變化 -> 視圖更新;視圖交互變化(input) -> 數據model變更的雙向綁定效果

           //vue實現數據雙向綁定的原理就是用Object.defineproperty()重新定義(set方法)對象設置屬性值和(get方法)獲取屬性值的操縱來實現的。

           //Object.property()方法的解釋:Object.property(參數1,參數2,參數3) 返回值為該對象obj

           //其中參數1為該對象(obj),參數2為要定義或修改的對象的屬性名,參數3為屬性描述符,屬性描述符是一個對象,主要有兩種形式:數據描述符和存取描述符。這兩種對象只能選擇一種使用,不能混合使用。而get和set屬于存取描述符對象的屬性。

           //這個方法會直接在一個對象上定義一個新屬性或者修改對象上的現有屬性,并返回該對象。

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    </head>

    <body>

    <div id="myapp">

    <input v-model="message" /><br>

    <span v-bind="message"></span>

    </div>

    <script type="text/javascript">

    var model = {

    message: ""

    };

    var models = myapp.querySelectorAll("[v-model=message]");

    for (var i = 0; i < models.length; i++) {

    models[i].onkeyup = function() {

    model[this.getAttribute("v-model")] = this.value;

    }

    }

    // 觀察者模式 / 鉤子函數

    // defineProperty 來定義一個對象的某個屬性

    Object.defineProperty(model, "message", {

    set: function(newValue) {

    var binds = myapp.querySelectorAll("[v-bind=message]");

    for (var i = 0; i < binds.length; i++) {

    binds[i].innerHTML = newValue;

    };

    var models = myapp.querySelectorAll("[v-model=message]");

    for (var i = 0; i < models.length; i++) {

    models[i].value = newValue;

    };

    this.value = newValue;

    },

    get: function() {

    return this.value;

    }

    })

    </script>

    </body>

    </html>

    聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。

    猜你喜歡LIKE

    最新文章NEW

    相關推薦HOT

    更多>>

    快速通道 更多>>

    最新開班信息 更多>>

    網友熱搜 更多>>