vue3计算属性

一句总结：Vue 3中的计算属性是基于它们的响应式依赖进行缓存的派生属性，只有当相关响应式数据变化时才会重新计算。

计算属性的基本使用

<script lang="ts" setup name="Person">
  import { ref, computed } from "vue";
  let firstName = ref('zhang')
  let lastName = ref('san')
  let fullName = computed(()=>{
    return firstName.value + lastName.value
  })
</script>

计算属性有缓存

<template>
  <div>
    <span>姓：{{ firstName }}</span>
    <span>名：{{ lastName }}</span>
    <span>姓名： {{ fullName }}</span>
    <span>姓名： {{ fullName }}</span>
    <span>姓名： {{ fullName }}</span>
    <span>姓名： {{ fullName }}</span>
    <span>姓名： {{ fullName }}</span>
    <span>姓名： {{ fullName }}</span>
  </div>
</template>

<script lang="ts" setup name="Person">
  import { ref, computed } from "vue";
  let firstName = ref('zhang')
  let lastName = ref('san')
  let fullName = computed(()=>{
    console.log("1");
    return firstName.value + lastName.value
  })
</script>

方法没有缓存

<template>
  <div>
    <span>姓：{{ firstName }}</span>
    <span>名：{{ lastName }}</span>
    <span>姓名： {{ fullName1 }}</span>
    <span>姓名： {{ fullName1 }}</span>
    <span>姓名： {{ fullName1 }}</span>
    <span>姓名： {{ fullName1 }}</span>
    <span>姓名： {{ fullName1 }}</span>
    <span>姓名： {{ fullName1 }}</span>
  </div>
</template>

<script lang="ts" setup name="Person">
  import { ref } from "vue";
  let firstName = ref('zhang')
  let lastName = ref('san')
  function fullName1() {
    console.log("2");
    return firstName.value + lastName.value
  }
</script>

上面这样使用computed创建出来的数据是只读的

这样定义computed是可读可写的

<script lang="ts" setup name="Person">
  import { ref, computed } from "vue";
  let firstName = ref('zhang')
  let lastName = ref('san')
  let fullName = computed({
    get() {
      return firstName.value + lastName.value
    },
    set(value) {
      firstName.value = value.split("-")[0]
      lastName.value = value.split("-")[1]
    }
  })
  function changeFullName() {
    fullName.value = 'li-si'
  }
</script>