什么是computed

computed字面意思计算，在vue中我们称之为计算属性。它的基本用法如下,需要注意的是所接收的函数必须要return一个值

const a = ref('')
const b = computed(() => { return a.value + ‘123’ })

如上面的基础代码，当a改变的时候，b也会随着改变，也就是说b是根据a计算出来的，故称之为计算属性。

计算属性常见用法

格式化数据

在开发中涉及到金额或者数字的时候，常需要格式化，或者做些转换。比如四舍五入，或者加上逗号，我们都可以通过computed来实现。在vue2中，还可以通过过滤器实现，但是实际上过滤器并没有比计算属性方便，而且功能上其实是重叠的，因此vue3取消了过滤器

const num = ref(123.1234)
const num2 = computed(() => num.toFixed(2))

页面文案，i18n等等

页面有一些状态性的文案，比如根据成功失败显示不同的文案，或者i18n等等，都可以使用计算属性。这样是为了把数据和表示分离，更方便修改

const status = ref(false)
const num2 = computed(() => status.value ? 'ok'：'fail')

css样式，style v-bind

我们都知道vue3新增style v-bind这个功能，因此我们可以把图片什么更方便的与css绑定,其实css变量是能包含任何数据的，只要是你的格式是对的。你们可以大胆探索，说不定还有更666的功能

const img = ref('')
const mainImgUrl = computed(()=>{
  const src = img.value || require('../assets/images/promotion_img@3x.png')
  return `url(${src})`
})

//css
a{
background-image:v-bind('mainImgUrl')
}

通过computed实现v-model

这里算是一个小技巧吧，我们可以通过计算属性实现组件自定义v-model。

const props = defineProps(['modelValue']）
const emits = defineEmits(['update:modelValue'])
const a = computed({
    get(){
        return props.modelValue
    }，
    set(val){
        emits('update:modelValue',val)
    }
})

从上面的代码不难看出，v-model就是分为2部分，从props传入值，再调update去更新这个值，因此用 computed也是可以实现的，你也可以在事件中，或者watch中去触发事件，一样可以实现v-model

明天讲什么呢，我打算写一下watch watchEffect，但是感觉字数可能不够，我试着再去想一下

vue3就应该这样学-10

什么是computed

计算属性常见用法

通过computed实现v-model