Vue的基礎理解(五)

自定義v-model是怎麼實現的?

v-model實質上是v-on和v-bind的語法糖,用來在表單控件或組件上建立雙向綁定;css

<input v-model='searchText'>

等價於

<input
    v-bind:value='searchText'
    v-on:input='searchText = $event.target.value'>

在一個組件上使用v-model,默認會爲組件綁定名爲value的prop和名爲input的事件vue


Vuex和單純的全局對象有什麼區別?

  • 單純的全局變量:調試將會變爲噩夢,任什麼時候間,咱們應用的任何部分,在任何數據改變後,都不會留下變動的記錄,也就是能夠隨意更改,並且沒有留下任何記錄,後期項目會沒法維護vuex

  • vuex中全部的狀態更新的惟一方式都是提交mutation,異步操做須要經過action來提交mutation(dispatch)。這樣使得咱們能夠方便地跟蹤每個狀態的變化,從而讓咱們可以實現一些工具幫助咱們更好地使用vuex;異步


爲何vuex的mutation中不能作異步操做?

  • vuex中全部的狀態更新的惟一方式都是提交mutation,異步操做須要經過action來提交mutation(dispatch)。這樣使得咱們能夠方便地跟蹤每個狀態的變化,從而讓咱們可以實現一些工具幫助咱們更好地使用vuex;工具

  • 每一個mutation執行完後都會對應獲得一個新的狀態變動.spa

  • 若是mutation支持異步操做,就沒有辦法知道狀態是什麼時候更新,沒法很好的進行狀態追蹤,影響調試效率.雙向綁定

v-show 和 v-if有什麼區別?

  • v-show 只是基於css進行切換,無論什麼條件都會進行渲染。(display:block|none;)
  • v-if 條件不成立就不會渲染當前節點的DOM,

總結:v-if 的切換開銷比較大,v-show的初始化開銷比較大,因此在須要頻繁顯示和隱藏的狀況下使用v-show,渲染後不多進行切換則使用v-if更適合。調試

相關文章
相關標籤/搜索