012-计算属性computed基础用法

计算属性computed基础用法

在一些需要动态显示变化的情景中, 我们需要使用computed, 例如商城购物车的总价或者去获取vuex中的数据, 购物车内商品的数量等等

<template>

<div>

<div>

num1: {{num1}}, num2 {{num2}}, sum is {{numSum}}

</div>

<button @click="add"></button>

</div>

</template>

<script>

import { defineComponenet, ref, computed } from 'vue'

export default defineComponent({

name: 'example',

setup(){

let num1 = ref(10)

let num2 = ref(20)

//computed是一个方法, 接受一个回调函数, 该函数必须返回一个值

let numSum = computed(() =>{ //在例子中, 需要实现num1和num2总和的实时动态显示

//必须返回一个值

//可以在该处做一些逻辑处理

//可以应用在类似购物车总价的地方或者去获取`vuex`中的数据

return num1.value + num2.value

})

let add = () => {

num1.value++

num2.value++

}

return{

num1,

num2,

numSum,

add

}

}

})

</script>