计算属性

作用

根据已有数据计算出新数据, 与 Vue2 computed 作用一致

语法

• 代码示例

<template>
  <div class="person">
    姓: <input type="text" v-model="firstName" /> <br />
    名: <input type="text" v-model="lastName" /> <br />
    全名A: <span>{{ fullNameA }}</span> <br />
    全名B: <span>{{ fullNameB }}</span> <br />
    <button @click="changeFullName">全名改为: li-si</button>
  </div>
</template>

<script setup lang="ts" name="App">
  import { ref, computed } from 'vue'

  let firstName = ref('zhang')
  let lastName = ref('san')

  // 计算属性 —— 只读取, 不修改
  let fullNameA = computed(() => {
    return firstName.value + '-' + lastName.value
  })

  // 计算属性 —— 既读取又修改
  let fullNameB = computed({
    // 读取
    get() {
      return firstName.value + '-' + lastName.value
    },
    // 修改
    set(val) {
      console.log('修改了fullName', val)
      firstName.value = val.split('-')[0]
      lastName.value = val.split('-')[1]
    }
  })

  function changeFullName(){
    fullNameB.value = 'li-si'
  } 
</script>