1漾肮、computed
- 當(dāng)我們的某些屬性是依賴其他狀態(tài)時(shí)清焕，我們可以使用計(jì)算屬性來(lái)處理
2、如何使用computed呢蝠猬？
- 方式一：接收一個(gè)getter函數(shù)切蟋，并為 getter 函數(shù)返回的值，返回一個(gè)不變的 ref 對(duì)象榆芦；
- 方式二：接收一個(gè)具有 get 和 set 的對(duì)象柄粹，返回一個(gè)可變的（可讀寫）ref 對(duì)象
- 使用：①先引入computed；②寫在setup內(nèi)部
// computed 計(jì)算屬性
const app = Vue.createApp({
setup() {
const { reactive, computed } = Vue;
const countObj = reactive({ count: 0});
const handleClick = () => {
countObj.count += 1;
}
let countAddFive = computed({
get: () => {
return countObj.count + 5;
},
set: (param) => {
countObj.count = param - 5;
}
})
setTimeout(() => {
countAddFive.value = 100;
}, 3000)
return { countObj, countAddFive, handleClick }
},
template: `
<div>
<span @click="handleClick">{{countObj.count}}</span> -- {{countAddFive}}
</div>
`,
});
const vm = app.mount('#root');
3匆绣、計(jì)算屬性兩種用法
- 給computed傳入函數(shù)驻右，返回值就是計(jì)算屬性的值。
- 給computed傳入對(duì)象崎淳，get獲取計(jì)算屬性的值堪夭，set監(jiān)聽(tīng)計(jì)算屬性改變。這種寫法適用于需要
讀寫計(jì)算屬性的情況凯力。
