computed

<template>

  <div>

    <h1>{{ firstName }}</h1>

    <h1>{{ lastName }}</h1>

    <br>

    <h2>{{ fullName }}</h2>

    <!-- <button type="submit" @click="update">修改</button> -->

  </div>

  </template>

 

  <script setup lang='ts'>

  import { computed, ref } from 'vue'

 

  let firstName = ref('John')

  let lastName = ref('Doe')

 

  // computed第一种写法，传入函数

  // let fullName = computed(() => `${firstName.value} ${lastName.value}`)

  // console.log("%c Line:19 🍯 fullName", fullName); // 打印fullName是ComputedRef对象，因此需要.value才能获取

  // const update = () => {  // 报错，因为传入的是函数，默认是用了get,所以返回的是只读的

  //   fullName.value = 'Tom'

  // }

 

  // computed第二种写法，传入对象

  const fullName = computed({

    get: () => `${firstName.value} ${lastName.value}`,

    set: (val) => {

      [firstName.value, lastName.value] = val.split(' ')

    }

  })

  </script>

 

  <style scoped lang='scss'>

 

  </style>