vue雙向綁定帶來的問題

問題場景

查詢完表格數(shù)據(jù)后 通過作用域插槽，將該行數(shù)據(jù)傳到修改頁面（定義了個新對象存儲數(shù)據(jù)），但是由于數(shù)據(jù)雙向綁定，修改這個新對象的值，會影響到最初查詢表格獲取的值

如下

this.editForm = row

解決方案

方法1：通過json之間的解析，深拷貝創(chuàng)建一個與row無綁定關(guān)聯(lián)的臨時對象，再賦值給editForm

this.editForm = JSON.parse(JSON.stringify(row))

方法2：使用…展開運算符

this.editForm = {...this.editForm,...row}

方法3：$set也不會影響原數(shù)據(jù)，但只能操作單個數(shù)據(jù)，在上述場景可能不太適用（屬性多久麻煩了）

this.$set(this.editForm,'roleName',row.roleName)
this.$set(this.editForm,'roleDesc',row.roleDesc)

這樣就不會影響到最初的row啦！ 

vue雙向綁定的原理總結(jié)

MVVM

視圖模型雙向綁定，是Model-View-ViewModel的縮寫，也就是把MVC中的Controller演變成ViewModel。Model層代表數(shù)據(jù)模型，View代表UI組件，ViewModel是View和Model層的橋梁，數(shù)據(jù)會綁定到viewModel層并自動將數(shù)據(jù)渲染到頁面中，視圖變化的時候會通知viewModel層更新數(shù)據(jù)。以前是操作DOM結(jié)構(gòu)更新視圖，現(xiàn)在是數(shù)據(jù)驅(qū)動視圖。

優(yōu)點：

1.低耦合。視圖（View）可以獨立于Model變化和修改，一個Model可以綁定到不同的View上，當(dāng)View變化的時候Model可以不變化，當(dāng)Model變化的時候View也可以不變；

2.可重用性。你可以把一些視圖邏輯放在一個Model里面，讓很多View重用這段視圖邏輯。

3.獨立開發(fā)。開發(fā)人員可以專注于業(yè)務(wù)邏輯和數(shù)據(jù)的開發(fā)(ViewModel)，設(shè)計人員可以專注于頁面設(shè)計。

4.可測試。

數(shù)據(jù)(model)變化主動觸發(fā)ui(view)變化，同時ui(view)變化主動觸發(fā)數(shù)據(jù)(model)變化，當(dāng)然這里的ui變化指定表單中的用戶輸入，可通俗的理解為：在單向綁定的基礎(chǔ)上給可輸入元素（input、textarea等）添加change(input)事件，來動態(tài)修改model和view

vue當(dāng)中的雙向綁定

vue.js是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter和getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)

使用 v-model / .sync 實現(xiàn)，v-model是 v-bind:value 和 v-on:input 的語法糖

• v-bind:value 實現(xiàn)了 data ⇒ UI 的單向綁定
• v-on:input 實現(xiàn)了 UI ⇒ data 的單向綁定

引申出這兩個單向綁定如何實現(xiàn)

v-bind的實現(xiàn)

通過 Object.defineProperty API 給 data 創(chuàng)建 getter 和 setter，用于監(jiān)聽 data 的改變，data 一變就會安排改變 UI

v-on的實現(xiàn)

通過 template compiler 給 DOM 添加事件監(jiān)聽，DOM input 的值變了就會去修改 data。

Compile（指令解析器）

Compile主要做的事情是解析模板指令，將模板中變量替換成數(shù)據(jù)，然后初始化渲染頁面視圖，并將每個指令對應(yīng)的節(jié)點綁定更新函數(shù)，添加鑒定數(shù)據(jù)的訂閱者，一旦數(shù)據(jù)有變動，收到通知，更新視圖

Observer（數(shù)據(jù)監(jiān)聽器）

Observer的核心是通過Object.defineProprtty()來監(jiān)聽數(shù)據(jù)的變動，這個函數(shù)內(nèi)部可以定義setter和getter，每當(dāng)數(shù)據(jù)發(fā)生變化，就會觸發(fā)setter。這時候Observer就要通知訂閱者，訂閱者就是Watcher

Watcher（訂閱者）

Watcher訂閱者作為Observer和Compile之間通信的橋梁，主要做的事情是：

• 在自身實例化時往屬性訂閱器(dep)里面添加自己
• 自身必須有一個update()方法
• 待屬性變動dep.notice()通知時，能調(diào)用自身的update()方法，并觸發(fā)Compile中綁定的回調(diào)

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