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

問題

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

而data的數(shù)據(jù)是通過另一個(gè)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)

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

第一個(gè)記錄錄入

第二個(gè)記錄錄入

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

結(jié)論

用JSON,對(duì)對(duì)象進(jìn)行深拷貝。先上代碼

            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)) 

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

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

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

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

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

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

用法：

Obejct.defineProperty(obj, prop, descriptor)

• obj：目標(biāo)對(duì)象
• prop：對(duì)象屬性
• descriptor：屬性特性

返回處理后的對(duì)象obj

如果沒有給Object設(shè)置特性的話，默認(rèn)configurable,enumrable.writable都為false

返回結(jié)果：

設(shè)置了setter，getter方法以后

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

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

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

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

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

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

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

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

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

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

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

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

觀察者模式

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

優(yōu)點(diǎn)：

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

缺點(diǎn)：

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

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

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

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

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

最新評(píng)論