vue中如何解除資料之間的雙向繫結

2022-09-26 14:01:28

如何解除資料之間的雙向繫結

問題

在開發過程中，我想要的結果是，一個表格和資料data陣列繫結，將data中的資料依次遍歷渲染到表格。

而data的資料是通過另一個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)

這樣寫造成的結果是：每次新增新的資料時，data2中的所有資料都會變成剛剛新增的新資料，看下圖

第一個記錄錄入

第二個記錄錄入

這就很尷尬，於是想解除資料的雙向繫結。

結論

用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之間的解析建立的臨時變數，不會隨this.formValidate改變而改變。

其中parse和stringfy 兩個函數是json與字串之間資料結構轉變的函數，不瞭解的可以自行查閱。

vue雙向繫結2.0和3.0區別

vue2.0實現雙向繫結

Vue2.0使用ES5的Object.defineProperty()實現資料劫持和雙向繫結

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實現雙向繫結

Vue3.0使用ES6的Proxy代理setter，getter方法，代理整個物件，只要物件的某個屬性發生變化，就可以劫持資料

vue2.0和Vue3.0雙向繫結的區別

Vue2.0的Object.defineProperty()只能劫持物件中的某個屬性，而Proxy可以監聽整個物件

vue2.0如果物件的屬性增加或者刪除無法監聽到，無法監聽到陣列基於下標的修改，還有無法改變length

觀察者模式和釋出者訂閱者模式的區別

釋出訂閱模式多了一層類似代理的關係，排程中心

釋出者-訂閱者模式

釋出訂閱模式在觀察者模式的基礎上加上了一箇中間層代理“通知”的角色，這讓釋出者不直接與溝通者聯絡，不知道有哪些訂閱者訂閱了自己，釋出者只負責“釋出”一個責任，而訂閱者只負責接受資訊然後更新。

訂閱者把想要訂閱的事件註冊到呼叫中心去，釋出者把更新發布到呼叫中心，呼叫中心統一通知訂閱者

實現效果如下：

觀察者模式

有時候觀察者模式又稱為釋出訂閱模式，但其實兩種模式還是存在區別的，觀察者模式是一對多關係，當物件改變，其他依賴它的物件都會更新改變

優點：

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

缺點：

依賴關係沒有完全解除，可能出現迴圈利用
當觀察者很多的時候，通知需要花很多時間，影響程式效率

這裡實現了簡單的觀察者模式，每次obj的name屬性變化時，set都會監聽到，並且通知觀察者更新資料

Vue模型的建立以及怎麼實現的

對於一個template，先計算出dom樹，生成render函數，然後繪製佈局，最後繪製樣式

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。