假設(shè)現(xiàn)在頁面(View層)上有一個input 標(biāo)簽,如果我們要獲取到input中的value载萌,那么必須使用JS(Model層)為input綁定事件來監(jiān)聽它,從而獲取input中輸入的數(shù)據(jù);當(dāng)要設(shè)置input的值時蟆淀,也是通過JS來設(shè)置突琳,這就是單向綁定
雙向綁定
雙向綁定就是我不需要為input綁定事件若债,對它進行監(jiān)聽,input的變化會實時反應(yīng)到我這兒拆融;
用Vue.js中的v-model來添加雙向綁定:
<input v-model="xxx">
其實上面的代碼等價于下面的:
<input :value="xxx" @input="xxx = $event.target.value">
也就是說:
雙向綁定 = 單向綁定 + UI事件監(jiān)聽
雙向綁定與單向綁定有優(yōu)缺點
單向綁定:使得數(shù)據(jù)流也是單向的蠢琳,對于復(fù)雜應(yīng)用來說這是實施統(tǒng)一的狀態(tài)管理(如redux)的前提。
雙向綁定:在一些需要實時反應(yīng)用戶輸入的場合會非常方便(比如多級聯(lián)動菜單)镜豹。但通常認為復(fù)雜應(yīng)用中這種便利比不上引入狀態(tài)管理帶來的優(yōu)勢傲须。因為我們不知道狀態(tài)什么時候發(fā)生改變,是誰造成的改變趟脂,數(shù)據(jù)變更也不會通知我們
注意泰讽,Vue 雖然通過 v-model 支持雙向綁定,但是如果引入了類似redux的vuex昔期,就無法同時使用 v-model