亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

深入理解vue.js雙向綁定的實現(xiàn)原理

 更新時間:2016年12月05日 11:26:46   作者:kidney  
vue.js是MVVM結(jié)構(gòu)的,同類的還有AngularJs;至于MVC、MVP、MVVM的比較網(wǎng)上已經(jīng)有很多了,這樣不再重復(fù)。這篇文章將給大家深入的介紹vue.js雙向綁定的實現(xiàn)原理,有需要的朋友們可以參考借鑒,下面跟著小編一起來看看吧。

前言

大家都知道Vue.js最核心的功能有兩個,一是響應(yīng)式的數(shù)據(jù)綁定系統(tǒng),二是組件系統(tǒng)。本文僅探究幾乎所有Vue的開篇介紹都會提到的hello world雙向綁定是怎樣實現(xiàn)的。先講涉及的知識點,再參考源碼,用盡可能少的代碼實現(xiàn)那個hello world開篇示例。

一、訪問器屬性

訪問器屬性是對象中的一種特殊屬性,它不能直接在對象中設(shè)置,而必須通過defineProperty()方法單獨定義。

var obj = { };

// 為obj定義一個名為hello的訪問器屬性

Object.defineProperty(obj, "hello", {

get: function () {return sth},

set: function (val) {/* do sth */}

})

obj.hello // 可以像普通屬性一樣讀取訪問器屬性

訪問器屬性的"值"比較特殊,讀取或設(shè)置訪問器屬性的值,實際上是調(diào)用其內(nèi)部特性:getset函數(shù)。

obj.hello // 讀取屬性,就是調(diào)用get函數(shù)并返回get函數(shù)的返回值

obj.hello = "abc" // 為屬性賦值,就是調(diào)用set函數(shù),賦值其實是傳參

getset方法內(nèi)部的this都指向obj,這意味著getset函數(shù)可以操作對象內(nèi)部的值。另外,訪問器屬性的會"覆蓋"同名的普通屬性,因為訪問器屬性會被優(yōu)先訪問,與其同名的普通屬性則會被忽略(也就是所謂的被"劫持"了)。

二、極簡雙向綁定的實現(xiàn)

此例實現(xiàn)的效果是:隨文本框輸入文字的變化,span中會同步顯示相同的文字內(nèi)容;在js或控制臺顯式的修改obj.name的值,視圖會相應(yīng)更新。這樣就實現(xiàn)了model =>view以及view => model的雙向綁定,并且是響應(yīng)式的。

以上就是Vue實現(xiàn)雙向綁定的基本原理。

三、分解任務(wù)

上述示例僅僅是為了說明原理。

我們最終要實現(xiàn)的是:

首先將該任務(wù)分成幾個子任務(wù):

   1、輸入框以及文本節(jié)點與data中的數(shù)據(jù)綁定

   2、輸入框內(nèi)容變化時,data中的數(shù)據(jù)同步變化。即view => model的變化。

   3、data中的數(shù)據(jù)變化時,文本節(jié)點的內(nèi)容同步變化。即model => view的變化。

要實現(xiàn)任務(wù)一,需要對DOM進(jìn)行編譯,這里有一個知識點:DocumentFragment。

四、DocumentFragment

DocumentFragment(文檔片段)可以看作節(jié)點容器,它可以包含多個子節(jié)點,當(dāng)我們將它插入到DOM中時,只有它的子節(jié)點會插入目標(biāo)節(jié)點,所以把它看作一組節(jié)點的容器。使用DocumentFragment處理節(jié)點,速度和性能遠(yuǎn)遠(yuǎn)優(yōu)于直接操作DOM。Vue進(jìn)行編譯時,就是將掛載目標(biāo)的所有子節(jié)點劫持(真的是劫持)到DocumentFragment中,經(jīng)過一番處理后,再將DocumentFragment整體返回插入掛載目標(biāo)。

五、數(shù)據(jù)初始化綁定

以上代碼實現(xiàn)了任務(wù)一,我們可以看到,hello world已經(jīng)呈現(xiàn)在輸入框和文本節(jié)點中。

六、響應(yīng)式的數(shù)據(jù)綁定

再來看任務(wù)二的實現(xiàn)思路:當(dāng)我們在輸入框輸入數(shù)據(jù)的時候,首先觸發(fā)input事件(或者keyupchange事件),在相應(yīng)的事件處理程序中,我們獲取輸入框的value并賦值給vm實例的text屬性。我們會利用defineProperty將data中的text劫持為vm的訪問器屬性,因此給vm.text賦值,就會觸發(fā)set方法。

set方法中主要做兩件事,第一是更新屬性的值,第二留到任務(wù)三再說。

任務(wù)二也就完成了,text屬性值會與輸入框的內(nèi)容同步變化:

七、訂閱/發(fā)布模式(subscribe&publish)

text屬性變化了,set方法觸發(fā)了,但是文本節(jié)點的內(nèi)容沒有變化。如何讓同樣綁定到text的文本節(jié)點也同步變化呢?這里又有一個知識點:訂閱發(fā)布模式。

訂閱發(fā)布模式(又稱觀察者模式)定義了一種一對多的關(guān)系,讓多個觀察者同時監(jiān)聽某一個主題對象,這個主題對象的狀態(tài)發(fā)生改變時就會通知所有觀察者對象。

發(fā)布者發(fā)出通知 => 主題對象收到通知并推送給訂閱者 => 訂閱者執(zhí)行相應(yīng)操作

之前提到的,當(dāng)set方法觸發(fā)后做的第二件事就是作為發(fā)布者發(fā)出通知:“我是屬性text,我變了”。文本節(jié)點則是作為訂閱者,在收到消息后執(zhí)行相應(yīng)的更新操作。

八、雙向綁定的實現(xiàn)

回顧一下,每當(dāng)new一個Vue,主要做了兩件事:第一個是監(jiān)聽數(shù)據(jù):observe(data) ,第二個是編譯HTML:nodeToFragement(id)

在監(jiān)聽數(shù)據(jù)的過程中,會為data中的每一個屬性生成一個主題對象dep。

在編譯HTML的過程中,會為每個與數(shù)據(jù)綁定相關(guān)的節(jié)點生成一個訂閱者watcher,watcher會將自己添加到相應(yīng)屬性的dep中。

我們已經(jīng)實現(xiàn):修改輸入框內(nèi)容 => 在事件回調(diào)函數(shù)中修改屬性值 => 觸發(fā)屬性的set方法。

接下來我們要實現(xiàn)的是:發(fā)出通知dep.notify() => 觸發(fā)訂閱者的update方法 => 更新視圖。

這里的關(guān)鍵邏輯是:如何將watcher添加到關(guān)聯(lián)屬性的dep中。

在編譯HTML過程中,為每個與data關(guān)聯(lián)的節(jié)點生成一個Watcher。Watcher函數(shù)中發(fā)生了什么呢?

首先,將自己賦給了一個全局變量Dep.target

其次,執(zhí)行了update方法,進(jìn)而執(zhí)行了get方法,get的方法讀取了vm的訪問器屬性,從而觸發(fā)了訪問器屬性的get方法,get方法中將該watcher添加到了對應(yīng)訪問器屬性的dep中;

再次,獲取屬性的值,然后更新視圖。

最后,將Dep.target設(shè)為空。因為它是全局變量,也是watcher與dep關(guān)聯(lián)的唯一橋梁,任何時刻都必須保證Dep.target只有一個值。

至此,hello world雙向綁定就基本實現(xiàn)了。文本內(nèi)容會隨輸入框內(nèi)容同步變化,在控制器中修改vm.text的值,會同步反映到文本內(nèi)容中。

完整代碼:https://github.com/bison1994/two-way-data-binding

總結(jié)

以上就是關(guān)于vue.js雙向綁定實現(xiàn)原理的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。

相關(guān)文章

  • vue3實現(xiàn)監(jiān)聽store中state狀態(tài)變化的簡單方法

    vue3實現(xiàn)監(jiān)聽store中state狀態(tài)變化的簡單方法

    這篇文章主要給大家介紹了關(guān)于vue3實現(xiàn)監(jiān)聽store中state狀態(tài)變化的簡單方法,store是一個狀態(tài)管理工具,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-10-10
  • vue中PC端地址跳轉(zhuǎn)移動端的操作方法

    vue中PC端地址跳轉(zhuǎn)移動端的操作方法

    最近小編接到一個項目pc端和移動端是兩個獨立的項目,兩個項目項目中的內(nèi)容基本相同,鏈接組合的方式都有規(guī)律可循,接到的需求便是在移動端訪問pc端的URL連接時,重定向至移動端對應(yīng)頁面,下面小編給大家分享實現(xiàn)過程,一起看看吧
    2021-11-11
  • Vue el使用el-checkbox-group復(fù)選框進(jìn)行單選框方式

    Vue el使用el-checkbox-group復(fù)選框進(jìn)行單選框方式

    這篇文章主要介紹了Vue el使用el-checkbox-group復(fù)選框進(jìn)行單選框方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Vue3如何在SCSS中使用v-bind

    Vue3如何在SCSS中使用v-bind

    這篇文章主要介紹了Vue3如何在SCSS中使用v-bind,通過template先創(chuàng)建一個通用的頁面結(jié)構(gòu),本文結(jié)合實例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
    2024-03-03
  • VUE中$refs的基本用法舉例

    VUE中$refs的基本用法舉例

    ref 加在子組件上,用this.$refs.(ref值) 獲取到的是組件實例,可以使用組件的所有方法,?在使用方法的時候直接this.$refs.(ref值).方法() 就可以使用了,這篇文章主要介紹了VUE中$refs的基本用法,需要的朋友可以參考下
    2022-12-12
  • VUE實現(xiàn)一個Flappy Bird游戲的示例代碼

    VUE實現(xiàn)一個Flappy Bird游戲的示例代碼

    這篇文章主要介紹了VUE實現(xiàn)一個Flappy Bird的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-04-04
  • Vue實現(xiàn) 點擊顯示再點擊隱藏效果(點擊頁面空白區(qū)域也隱藏效果)

    Vue實現(xiàn) 點擊顯示再點擊隱藏效果(點擊頁面空白區(qū)域也隱藏效果)

    這篇文章主要介紹了Vue實現(xiàn) 點擊顯示 再點擊隱藏 點擊頁面空白區(qū)域也隱藏效果,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-01-01
  • vuejs實現(xiàn)折疊面板展開收縮動畫效果

    vuejs實現(xiàn)折疊面板展開收縮動畫效果

    這篇文章主要介紹了vuejs實現(xiàn)折疊面板展開收縮動畫效果,文中通過代碼給大家分享兩種情況介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-09-09
  • vue-router:嵌套路由的使用方法

    vue-router:嵌套路由的使用方法

    本篇文章主要介紹了vue-router:嵌套路由的使用方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-02-02
  • vue類名如何獲取動態(tài)生成的元素

    vue類名如何獲取動態(tài)生成的元素

    這篇文章主要介紹了vue類名如何獲取動態(tài)生成的元素,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04

最新評論