学习Vue3——computed(计算属性)

• 选项式写法 支持一个对象传入get函数以及set函数自定义操作
  

<template>
  <div>姓:<input v-model="lastName" type="text" /></div>
  <div>名:<input v-model="firstName" type="text" /></div>
  <div>全名:{{ name }}</div>
  <button @click="change">修改</button>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
let firstName = ref('三')
let lastName = ref('张')

let name = computed({
  get() {
    return lastName.value + firstName.value
  },
  set(newValue) {
    let arr = newValue.split('')
    lastName.value = arr[0]
    firstName.value = arr[1]
    console.log(newValue)
  }
})

const change = () => {
  name.value = '李四'
}
</script>

• 函数式写法 只能支持一个getter函数不允许修改值

<script setup lang="ts">
import { ref, computed } from 'vue'
let firstName = ref('三')
let lastName = ref('张')

let name = computed(() => lastName.value + firstName.value)

const change = () => {
  // error:无法分配到 "value" ，因为它是只读属性
  name.value = '李四'
}
</script>