VUE的單向資料流與sync

2021-10-10 06:49:27 字數 1315 閱讀 4588

子元件拿到父元件賦值的 attr=> 篩選出 props並儲存在子元件的_props裡=>_props中的資料逐一複製到子元件的例項上(同時設定get 和 set )

當父元件data更新,渲染函式執行,又會執行上面的賦值。由此就達成了父元件的資料變化時,子元件props更新的效果。

但是很明顯,當我們操作子元件中的props時實際上我們是在操作子元件的_props,這完全不會影響到父元件的資料。單純靠props我們無法做到父子元件的資料雙向繫結。

為什麼vue要如此實現。在vue1.0的文件上是這麼解釋的:

根據文件的解釋,這樣的單向資料流主要是為了防止子元件意外地改變父元件的狀態,防止應用中的資料流變得混亂。

不過vue1.0時官方依然提供了乙個能夠強制實現雙向資料流的辦法:.sync修飾符(這個版本的sync的實現,我暫時沒找到原始碼在**,有興趣的可以去翻一下)

這個修飾符在vue2.0的時候被棄用了

主要是為了避免隱式雙向繫結,強制性的要求需要顯式的傳遞乙個事件。

不過在vue2.3的時候又被新增了回來,但實現原理有所不同

從上面的原始碼可知 vue2.3版本的.sync修飾符只是乙個簡單地語法糖。

使用時可以理解為將

:foo.sync

="data"

/>

擴充套件為了

:foo

="data"

@update:foo

="val => data = val"

/>

所以在使用時需要在子元件中手動觸發乙個事件,而非直接修改prop

this

.$emit

('updata:foo'

,newval)

從官方文件能夠看出,vue對於元件間傳值的設計思路,似乎從早期的版本就固定為 propsdown emitup一直沒變,只是在早期版本有.sync這個例外。在後期版本為了規範,刪除了能夠實現隱式雙向繫結的.sync。

而單向資料流的優勢也很明顯,就是為了防止子元件意外地改變父元件的狀態,防止應用中的資料流變得混亂。

vue的單向資料流以及語法糖 sync

vue支援雙向資料流嗎?除了最開始angularjs支援資料的雙向流動之外,vue和react是均不支援的。vue之所以被常說雙向資料流,其實是錯誤的。是因為它是雙向繫結被有些人理解為雙向資料流。vue的單向資料流是指 父元件中的資料可以通過props流動到子元件中,並且當父元件中的資料發生改變的時...

vue 單向資料流 雙向繫結

在react中是單向資料繫結,而在vue中的特色是雙向資料繫結。但是其實就我個人的理解是 其實無論是vue還是react其實還是提倡單向資料流去管理狀態,這一點在vuex和redux狀態管理器上體現的很明顯。只是vue為ui控制項提供了雙向資料繫結的方式,在一些需要實時反應使用者輸入的場合會非常方便...

vue中單向資料流小結

root div 父元件向子元件傳多個引數時,可以將要傳的引數置入params中,呼叫子元件時直接繫結v bind params 等同於將引數乙個乙個展開傳遞形式 例如 v bind params content params.content 其餘引數類似 元件傳參時,引數名建議不要使用駝峰,htm...