学习Vue3 第六章（计算属性）

computed

计算属性 就是当依赖的属性的值发生变化的时候，才会触发它的更改，如果依赖的值不发生变化，使用的是缓存中的属性

1.函数形式

<template>
  <div>
    <div>姓 <input type="text" v-model="firstName" /></div>
    <div>名 <input type="text" v-model="lastName" /></div>
    <div>全名：{{ fullName }}</div>
    <button @click="change">改变姓名</button>
  </div>
</template>

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

const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`
})


</script>

2.对象形式

<template>
  <div>
    <div>姓 <input type="text" v-model="firstName" /></div>
    <div>名 <input type="text" v-model="lastName" /></div>
    <div>全名：{{ fullName }}</div>
    <button @click="change">改变姓名</button>
  </div>
</template>

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

// const fullName = computed(() => {
//   return `${firstName.value} ${lastName.value}`
// })

const fullName = computed({
  get() {
    return `${firstName.value} ${lastName.value}`
  },
  set(newValue) {
    ;[firstName.value, lastName.value] = newValue.split('-')
  },
})

const change = () => {
  fullName.value = '李-四'
}
</script>