Computed计算属性

Computed有两种写法选项式和函数式

选项式

vue
12345678910111213141516171819202122232425
<template>
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
{{ name }}
<button @click="change">修改</button>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
const firstName = ref('张');
const lastName = ref('三');
const change = () => {
  name.value = 'Mc_Cain'
}
//选项式
const name = computed({
  get() {//computed展示的逻辑
    return firstName.value + "_" + lastName.value
  },
  
  set(value: string) {//computed修改时执行的函数
    [firstName.value, lastName.value] = value.split('_')
  }
})
</script>

0e290cff4117940c39a052ce26edbdbe.gif

函数式

vue
12345678910111213141516
<template>
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
{{ name }}
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
const firstName = ref('张');
const lastName = ref('三');

//函数式
const name = computed(() => {
  return firstName.value + lastName.value
})
</script>

函数式只能实现get函数的逻辑，不能实现set的逻辑，因此使用函数式定义的Computed不能修改