vue3 computed计算属性

代码：

<template>
  <div  class="nihao">
    <div>{{title}}</div>
    <h1>姓：{{ firstName }}</h1>
    <h1>名：{{ lastName }}</h1>
    <h1>姓名：{{ fullName }}</h1>
    
  </div>
</template>

<script setup>

  import { computed, ref } from 'vue';
  let title = '你好，vue3！' 
  let firstName = ref('张')
  let lastName = ref('三')
  
  let fullName = computed(()=>{
    return firstName.value + lastName.value
  })
 
</script>

<style scoped>
.nihao{
    background-color: bisque;
    height: auto;
}
</style>

说明：

1. 使用computed先引入模块
2. computed参数为一个函数，可以写箭头函数，需要写return
3. computed计算属性具有缓存特性。当计算属性所依赖的数据没有发生变化时，多次访问计算属性会直接返回之前缓存的值，而不会重新计算
4. 计算属性默认是只读的，但也可以通过提供get和set函数来创建可写的计算属性（当读取数据和修改数据的时候触发） get和set示例：

const fullName = computed({ 
    get: () => { return firstName.value + ' ' + lastName.value; }, 
    set: (newValue) => { 
        const names = newValue.split(' '); 
        firstName.value = names[0]; 
        lastName.value = names[names.length - 1]; 
    } 
});