vue3笔记 computed计算属性02

计算属性有缓存的，方法没有缓存

　　下列的计算案例是只读的，不可修改的

 上述代码为只读属性，优化后

<script setup lang="ts">
import { ref, computed } from 'vue'
let name = ref("zhang")
let xing = ref("sang")
console.log(name.value)
let fullName = computed({
  get() {
    return name.value.slice(0, 1).toUpperCase() + name.value.slice(1) + '-' + xing.value
  },
  set(val) {
    // console.log('set',val)
    const [str1,str2] = val.split('-')
    name.value = str1
    xing.value = str2
  }
})
function changeFullName() {
  fullName.value = "li-si"
}
</script>

<template>
  <div>
    <input type="text" v-model="name">
    <input type="text" v-model="xing">
    <p>{{ fullName }}</p>
    <button @click="changeFullName">1111</button>
  </div>
</template>