Vue data與computed的區別
阿新 • • 發佈:2022-02-23
區別
- data中的屬性並不會隨賦值變數的改動而改動
- computed屬性屬於持續變化跟蹤。在computed屬性定義的時候,這個computed屬性就與給它賦值的變數綁定了。改變這個賦值變數,computed屬性值會隨之改變
錯誤使用場景 <div>{{name}}</div> data() { return { name: this.$store.state.Detail.detailInfo, }; }, mounted() { this.$store.dispatch('getDetail',11); }, /*********************** this.$store.state.Detail.detailInfo的初始值為{}, 經過dispatch('getDetail',11) this.$store.state.Detail.detailInfo的值改變了 但name的值不變=>data中的屬性並不會隨賦值變數的改動而改動 ***********************/ 正確使用場景 <div>{{name}}</div> computed:{ name(){ return this.$store.state.Detail.detailInfo } }, mounted() { this.$store.dispatch('getDetail',11); },
data中不能使用computed中的資料, computed中可以使用data資料
原理:
Vue 把資料抽象成了兩層,第一層就是簡單的資料(data),第二層就是 computed (依賴於 data,也就是依賴於前一層)。第二層可以引用第一層的資料,而第一層卻不能引用第二層的資料。
其實歸根結底就是一個 Vue 例項在渲染的時候資料解析的順序問題,結論是:
props->methods->data->computed->watch->created。
官網的原始碼也寫的很清楚,見下圖
computed中可以使用data資料
使用data中的資料, 但是注意 只能用, 不能改!
data() {
return {
options: [{a: 1}]
}
}
computed {
// 寫法一: 函式寫法
objArr() { this.options; ... return XXX}
// 寫法二: 完整物件寫法
objArr: {
get() {
this.options;
return XXX
}
}
}
需要改, 用computed完整形式, setter函式 能改!
computed 就是個變數, 有值get(){return}, 可以賦值set(newValue)
computed {
objArr: {
//返回objArr的值
get() { return this.options;},
//對objArr賦值{b: 2}
set(newValue) {
//修改data值
this.options.push(newValue);
}
}
}
// 2. 觸發set函式 即給objArr賦值:
// 這裡我們封裝個方法:
methods: {
setObjArr() {
this.objArr = {b: 2}
}
}
// 通過按鈕點選觸發
<button @click="setObjArr">set</button>
methods裡使用和修改data, computed
直接改 this.options