学习vue3(computed)

vue3的计算属性computed，当依赖的属性的值发生变化的时候，才能触发他的更改，同时他具有缓存。

<template>

  <div>
    <div>姓:<input type="text" v-model="firstname"></div>
    <div>名:<input type="text" v-model="lastname"></div>
    <div>全名:{{ name }}</div>

  </div>
  <button @click="changename">修改名字</button>
</template>
 <script>
import { computed, ref } from 'vue';
const firstname = ref<string>('张')
const lastname = ref<string>('三')
</script>

1.函数形式得到全名:
这种形式是无法使用changename方法修改name的，此时的name是只读的

  let name = computed(()=>{
  return firstname.value+'-'+lastname.value
})

2.对象形式
使用该方法可以可以修改name的值，在set()方法里面，如果修改了那么的值，那么传过来的值会被newValue接收

 const changename =()=>{
   name.value='李-四' 
 }
let name = computed({
    get(){
       return firstname.value +'-'+lastname.value
    }
    set(newValue){
    [firtsname.value,lastname.value]=new.Value.split('-')
    }
})