Vue component data and options

vue 的組件狀態與管理

索引index

data: 自己的狀態

props: 從外面取得的值

propsData: 把值傳給props

computed: 要計算的都放這

methods: 要觸發事件的就放這

watch: 監控data或props的變動

data

主要為儲存組件自身的狀態，等同於react state的概念，可以透過this.$data取得data值

注意：當在component中使用時，只能為function的形式

// component
Vue.component({ 
  data() { return // ...}
})
// Vue object
new Vue({ 
  data: { // ... } 
})

使用範例

// component
Vue.component({ 
  data() { 
    return ({ a: "B", })
  }
})
// 在組件內可以透過this.$data.a 或this.a 取得 data中的a
// Vue object
const vm = new Vue({ 
  data: { a: "B" } 
})
// 因為已經實例化，可以透過vm.$data.a 或 vm.a取得 data中的a

props

接受上一層組件(父組件)提供的值，一旦有變化就會觸發渲染更新畫面

組件中能夠定義props有哪些以及分別有哪些限制

props可接受: string[], object，如以下範例

// string[]
{ 
  props: ['color'] 
}
// object，可以定義props的類型
{ 
  props: { color: String, }
} 
// object更詳細，甚至可以定義完整的限制和預設條件
{ 
  props: { 
    color: { 
      type: String, 
      default: '#fff', 
      required: true, 
      validator() { // ... } }, 
  },
}

props使用範例

// custom component
<div :style="{ color: color, }">{{ color }}</div>
Vue.component('ColorText', {
  props: { color: String, }
})
// 使用在其他組件中
<div>
  <ColorText :color="themeColor" />
</div>
// 將自己的data透過props傳給子組件
Vue.component('Title', { 
  data() { return { themeColor: '#aaa', } } 
})

propsData

用於實例化的組件中，會將propsData傳給props，方便進行單元測試

// component
const ColorText = Vue.component('ColorText', {
  props: { color: String, }
})
// 實例化
const colorTextVm = new ColorText({ 
  propsData: { color: '#fff', }
})

computed

雖然可以將處理data/props直接寫在template中，但此寫法不僅不易閱讀，也不好維護和測試

因此如果需要計算或處理data/props以獲得新的值，就可以把相關functions放在computed中

TIPS: 在vue中，computed會進行快取，因此只有在其使用的props/data變化時才會改變，而不會在每次重新渲染都計算一次，對於性能優化很有幫助！

// 直接放在template中
<span>
  {{ "Minute:" + secs/60 < 10 ? "0" + ~~(secs/60) : ~~(secs/60) }}</span>
// 移到computed中
<span>{{ "Minute: " + minute }}</span>
({ 
  computed: { 
    minute() { 
      const minuteNum = ~~(this.secs/60); 
      return minuteNum < 10 ? `0${minuteNum}` : `${minuteNum}`;
    } 
  } 
})

可以使用get/set

一般情況下都是get computed的值而已，不過可以使用set改變其中的值

({ 
  computed: { 
    minute() { 
      set(newVal) {      
        const secs = newVal * 60;
        this.secs = secs;
      }, 
      get() {
        const minuteNum = ~~(this.secs/60); 
        return minuteNum < 10 ? `0${minuteNum}` : `${minuteNum}`;
      }
    } 
  } 
})
// 在以上範例，如果賦值給minute
// vm.minute = 100 就會觸發set()，其中的secs的值也會被更新

watch

data/props對應的值更新時，如果在watch中有對應key的function，就會觸發其中的function

類似react 的 useEffect()

watch物件: { [key: stirng]: string | function | object | array }

參考/引用/延伸閱讀:

data: https://vuejs.org/v2/api/#Options-Data

computed詳細解說和比較: https://vuejs.org/v2/guide/computed.html