Vue 關於資料 的 definition有 data computed props，官方 API 也把 watch methods列為相同的分類选项 / 数据，但我認為這兩個項目比較像是定義一種行為，發生某件事的時候要做什麼樣的事

然後我們知道 Vue 是一個響應式的框架，意思是我們更新資料 (狀態)，Vue 可以幫我即時更新到畫面上，他是利用 Javascript 原生的 getter/setter 來達成的，更詳細的說明可以參考 深入响应式原理

data

基礎的資料容器就是在 definition Object 使用 data 屬性
在使用 data 時請特別注意以下幾點

• 記得使用函數回傳的形式

{
    data() {
        return {
        }
    }
}

• 如果data裡某個屬性的值是 物件或是陣列 Vue 無法直接監聽他的變化

{
    data() {
        return {
            foo: {
                a: 1
            }
        }
    }
}

我直接添加一個新屬性 b ，他是不會有響應式的效果的

    foo.b = 2

但我們可透過 Vue 提供的APIVue.set來達成添加新的屬性也擁有響應式的效果

props

前面我們已經提到過，父組件需要傳遞資料給子組件就是透過 props
子組件決定接收的 props 在 definition Object 使用 props 屬性即可接收料
props 可以接受兩種資料型態：

• Array
  指定你要的 props 值

{
    props: ['foo', 'bar']
}

• Object
  使用一個物件接收 prop 可以對該 prop 有更深入的定義: type default required validator：Function，關於他們的詳細說明請參考props

再次提醒不要在接收 prop 的子組件直接變更 prop 的值，請遵守單向資料流的規則

明天再談談 computed watch 這兩個有點類似常常混淆的屬性吧