Vue3中computed计算属性的全面用法（简单易懂，一篇就会）_v3computed的用法

computed用于简单的计算

基础用法

页面中：

小计：{{total}}
1

引入：

import {computed} from 'vue'
1

使用：

let price=ref(10);
let amount=ref(3);
let total = computed(()=>{
    return price.value*amount.value
})
1
2
3
4
5

更高级别用法

页面中：

<input type="text" v-model="setNickName" />{{nickname}}
1

setup中：

let nickname = ref("")
let setNickName = computed({
    get(){
        return nickname.value;
    },
    set(val:string){
        nickname.value=val;
    }
})
1
2
3
4
5
6
7
8
9

用于筛选数据

在vue3版本中，v-if和v-for不能同时使用。

• 在vue2中v-for的优先级高于v-if
• 在vue3版本中v-if优先级高于v-for

所以在vue3中，如果需要既要循环数据，又要对数据进行筛选，就用到了computed。
页面中：

<div v-for="item in goodsComputed" :key="item.id">
    {{item.id}}、{{item.title}}
</div>
1
2
3

let goods = [
    {id:1,title="羊肉"},
    {id:2,title="牛肉"}
]
let goodsComputed = computed(()=>{
    let aGoods = goods.filter((val)=>{
        return val.id>1;
    })
    return aGoods;
})
1
2
3
4
5
6
7
8
9
10