vue 單向資料繫結 雙向資料繫結和單向資料流

2022-06-27 03:51:10 字數 1275 閱讀 4954

用過vue開發的同學都知道,vue.js 最顯著的特點就是響應式和資料驅動,也就是將model和view進行單向繫結或者雙向繫結。(我最近才深入了解到有單向繫結,自己平時用,但是不了解其中緣由)

vue支援雙向資料繫結和單向資料繫結

1.插值形式

hello, }!

you are } years old!

>

export default }}

>

上述就是插值形式的單向資料繫結。

2.v-bind形式

hello, }!

>

export default }}

>

資料的雙向繫結是vue實現的一大功能。

使用v-model指令,實現檢視和資料的雙向繫結。

所謂雙向繫結,指的是vue例項中的data與其渲染的dom元素的內容保持一致,無論誰被改變,另一方會相應的更新為相同的資料。這是通過設定屬性訪問器實現的。

v-model主要用在表單的input輸入框,完成檢視和資料的雙向繫結。

v-model只能用在"input、select、textarea"這些表單元素上。

雙向繫結的缺點:不知道data什麼時候變了,也不知道是誰變了,變化後也不會通知,當然可以watch來監聽data的變化,但這複雜,還不如單向繫結。

所有的prop都使得其父子prop之間形成了乙個單向下行繫結:父級prop的更新會向下流動到子元件中,但是反過來則不行。這樣會防止從子元件意外改變父級元件的狀態,從而導致你的應用的資料流向難以理解。

額外的,每次父級元件發生更新時,子元件中所有的prop都將會重新整理為最新的值。這意味著你不應該在乙個子元件內部改變prop。如果你這樣做了,vue 會在瀏覽器的控制台中發出警告。

簡單的單向資料流(unidirectional data flow)是指使用者訪問view,view發出使用者互動的action,在action裡對state進行相應更新。state更新後會觸發view更新頁面的過程。這樣資料總是清晰的單向進行流動,便於維護並且可以**。

vue 單相繫結 Vue的雙向繫結和單向資料流

五一假期在家補了課,看到雙向繫結與單向資料流的概念。瓦特,我之前以為vue的v model就是雙向資料流,其實不然,下面讓我仔細來看看 雙向繫結 簡而言之,雙向繫結就是model的更新會觸發view的更新,view的更新會觸發model的更新,它們的作用是相互的 上傳失敗.image 81a06f ...

vue 單向資料流 雙向繫結

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

vue學習 單向繫結和雙向繫結

單向繫結v bind 單向繫結的資料是,可以vue的資料改變,頁面的展示也改變,但是頁面的展示改變,不會影響vue裡資料的改變 資料只能從data流向頁面 雙向繫結v model 雙向繫結的資料,vue裡資料改變,頁面的展示也改變,同樣地,頁面的資料改變,vue裡的資料也改變 這裡指的是vue開發工...