Vue.js中data,props和computed數據

data

data 是Vue實例的數據對象。Vue將會將data 的屬性轉換為 getter/setter, 也就是用Object.defineProperty方法(在官網里面有深入響應式原理里面具體的介紹)。對象必須是純粹的對象(含有零個或多個的key/value對)。因為這里面的數據都是被監控的，所以說這里面的數據最好都是在視圖層顯示的數據。如果說不是在視圖層展示的變量。可以定義在外面或者放在vm對象上。

eg：

let baz = ''  
export default {  
    data() {  
        return {  
            bar: 'bar'  
        }  
    },  
    methods: {  
        testFn() {  
            // baz  
        }  
    }  
} 

　bar 變量是在頁面中要顯示的字段，baz就是在函數里面會用到的數據。如果視圖里面不用顯示的話就沒必要寫在data里面。這樣

可以減少開銷，提高性能。

 

props 

props 是props 可以是數組或對象，用於接收來自父組件的數據。props 可以是簡單的數組，或者使用對象作為替代，

對象允許配置高級選項，如類型檢測、自定義校驗和設置默認值。

computed 

計算屬性將被混入到 Vue 實例中。所有 getter 和 setter 的 this 上下文自動地綁定為 Vue 實例。不過計算屬性也用

函數來替代。

　

computed: {  
// 僅讀取，值只須為函數  
    aDouble: function () {  
        return this.a * 2  
    },  
// 讀取和設置  
    aPlus: {  
        get: function () {  
            return this.a + 1  
        },  
        set: function (v) {  
            this.a = v - 1  
        }  
    }  
}