如何解除數(shù)據(jù)之間的雙向綁定

問題

在開發(fā)過程中，我想要的結果是，一個表格和數(shù)據(jù)data數(shù)組綁定，將data中的數(shù)據(jù)依次遍歷渲染到表格。

而data的數(shù)據(jù)是通過另一個this.formValidate 來push，代碼如下

            this.formValidate.BookISBN = res.data.Data.ISBN
            this.formValidate.BookName = res.data.Data.BookTitle
            this.formValidate.Author = res.data.Data.Author
            this.data2.push(this.formValidate)

這樣寫造成的結果是：每次添加新的數(shù)據(jù)時，data2中的所有數(shù)據(jù)都會變成剛剛添加的新數(shù)據(jù)，看下圖

第一個記錄錄入

第二個記錄錄入

這就很尷尬，于是想解除數(shù)據(jù)的雙向綁定。

結論

用JSON,對對象進行深拷貝。先上代碼

            this.formValidate.BookISBN = res.data.Data.ISBN
            this.formValidate.BookName = res.data.Data.BookTitle
            this.formValidate.Author = res.data.Data.Author
            let formdata= JSON.parse(JSON.stringify(this.formValidate))
            this.data2.push(formdata)

使用這句話

let formdata= JSON.parse(JSON.stringify(this.formValidate)) 

其實是通過json之間的解析 創(chuàng)建的臨時變量，不會隨this.formValidate改變而改變。

其中parse和stringfy 兩個函數(shù)是json與字符串之間數(shù)據(jù)結構轉變的函數(shù)，不了解的可以自行查閱。

vue雙向綁定2.0和3.0區(qū)別

vue2.0實現(xiàn)雙向綁定

Vue2.0使用ES5的Object.defineProperty()實現(xiàn)數(shù)據(jù)劫持和雙向綁定 

Obejct.defineProperty()可以添加對象屬性或者修改屬性

用法：

Obejct.defineProperty(obj, prop, descriptor)

• obj：目標對象
• prop：對象屬性
• descriptor：屬性特性

返回處理后的對象obj

如果沒有給Object設置特性的話，默認configurable,enumrable.writable都為false

返回結果：

設置了setter，getter方法以后

這里可以看到Object.defineProperty()方法劫持了set方法，也就為Vue.2.0的雙向綁定提供了思路

vue3.0實現(xiàn)雙向綁定

Vue3.0使用ES6的Proxy代理setter，getter方法，代理整個對象，只要對象的某個屬性發(fā)生變化，就可以劫持數(shù)據(jù)

vue2.0和Vue3.0雙向綁定的區(qū)別

Vue2.0的Object.defineProperty()只能劫持對象中的某個屬性，而Proxy可以監(jiān)聽整個對象

vue2.0如果對象的屬性增加或者刪除無法監(jiān)聽到，無法監(jiān)聽到數(shù)組基于下標的修改，還有無法改變length

觀察者模式和發(fā)布者訂閱者模式的區(qū)別

發(fā)布訂閱模式多了一層類似代理的關系，調(diào)度中心

發(fā)布者-訂閱者模式

發(fā)布訂閱模式在觀察者模式的基礎上加上了一個中間層代理“通知”的角色，這讓發(fā)布者不直接與溝通者聯(lián)系，不知道有哪些訂閱者訂閱了自己，發(fā)布者只負責“發(fā)布”一個責任，而訂閱者只負責接受信息然后更新。

訂閱者把想要訂閱的事件注冊到調(diào)用中心去，發(fā)布者把更新發(fā)布到調(diào)用中心，調(diào)用中心統(tǒng)一通知訂閱者

實現(xiàn)效果如下：

觀察者模式

有時候觀察者模式又稱為發(fā)布訂閱模式，但其實兩種模式還是存在區(qū)別的，觀察者模式是一對多關系，當對象改變，其他依賴它的對象都會更新改變

優(yōu)點：

• 降低目標與觀察者之間的耦合關系，兩者是抽象耦合關系，符合依賴倒置原則
• 目標和觀察者建立一套觸發(fā)機制

缺點：

• 依賴關系沒有完全解除，可能出現(xiàn)循環(huán)利用
• 當觀察者很多的時候，通知需要花很多時間，影響程序效率

這里實現(xiàn)了簡單的觀察者模式，每次obj的name屬性變化時，set都會監(jiān)聽到， 并且通知觀察者更新數(shù)據(jù)

Vue模型的建立以及怎么實現(xiàn)的

對于一個template，先計算出dom樹，生成render函數(shù)，然后繪制布局，最后繪制樣式

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論