在用Vue.js做開發(fā)的時候，一定知道 data, props和computed。用了這么久的Vue就總結(jié)一下這個三個東西，首先看看官網(wǎng)怎么定義他們，https://cn.vuejs.org/v2/api/#data?。

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

例如:

let baz = ''export default {data() {return {bar: 'bar'}},methods: {testFn() {// baz}}} bar 變量是在頁面中要顯示的字段，baz就是在函數(shù)里面會用到的數(shù)據(jù)。如果視圖里面不用顯示的話就沒必要寫在data里面。這樣

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

props 是props 可以是數(shù)組或?qū)ο?#xff0c;用于接收來自父組件的數(shù)據(jù)。props 可以是簡單的數(shù)組，或者使用對象作為替代，

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

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

函數(shù)來替代。

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

總結(jié)

以上是生活随笔為你收集整理的Vue.js中data,props和computed数据的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。