Vue3中的计算属性

今天继续更新关于Vue3中CompetitionApi关于计算属性的使用方法。在之前的OptionsApi中，计算属性这样写。大家还可以关注我的微信公众号，蜗牛全栈。

const app = Vue.createApp({  
    data(){    
        return {      ...    }  },  
        computed:{    
        computedData(){      ...    }  
    },  
    template:`<div>{{ computedData }}</div>`
})          
const vm = app.mount('#root')

下面举几个例子，结合代码中的注释说明一下。我们先针对基本数据类型，在CompetitionApi中，是这样的：

const app = Vue.createApp({  
    setup(){    
        const { ref,computed } = Vue  // 从Vue中引入computed     
        const count = ref(0)    
        const handleClick = () => {      
            count.value += 1    
        }    
        const countAddFive = computed(() => {  // 传递函数      
            return count.value + 5    
        })    
        return{ count, handleClick, countAddFive}  
    },  
    template:`<div>
                <span @click="handleClick">{{ count }}</span>---              
                <span>{{ countAddFive }}</span>            
            </div>`
})
const vm = app.mount('#root')

我们除了可以传递函数 ，还可以更具体一点，传递对象，对象中包含了get和set，就像这样：

const app = Vue.createApp({  
    setup(){    
        const { ref,computed } = Vue    
        const count = ref(0)    
        const handleClick = () => {      
            count.value += 1    
        }    
        let countAddFive = computed({      
            get:() => {        
                return count.value + 5      
            },      
            set:(v) => { // 接受传递来的参数        
                count.value = v      
            }    
        })    
        setTimeout(() => { // 返回的数据类型是基本数据类型，还是通过ref包裹的      
            countAddFive.value = 100    
        },3000)    
        return{ count, handleClick, countAddFive }  
    },  
    template:`<div>
                <span @click="handleClick">{{ count }}</span>---              
                <span>{{ countAddFive }}</span>            
            </div>`
})
const vm = app.mount('#root')

当然，除了基本数据类型，还有引用数据类型，下面以对象为例，代码可以写成这样：

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:(v) => { // 接受传递来的参数        
                countObj.count = v      
            }    
        })    
        setTimeout(() => { // 返回的数据类型是基本数据类型，还是通过ref包裹的      
            countAddFive.value = 100    
        },3000)    
        return{ countObj, handleClick, countAddFive }  
    },  
    template:`<div>              
                <span @click="handleClick">{{ countObj.count }}</span>---              <span>{{ countAddFive }}</span>            
    </div>`
})
const vm = app.mount('#root')

之后更新关于watch的内容，大家一起加油！