vue3.0学习笔记（computed）

vue3.0 计算属性需要单独引入（兼容2.0版本写法）

<template>
   姓：<input type="text" v-model="person.firstName">
    <br/>
   名：<input type="text" v-model="person.lastName">
    <br/>
  <span>{
    
    {
    
    person.fullName}}</span>
    <br/>
   全名:<input type="text" v-model="person.fullName">
</template>
import {
    
     reactive,computed } from 'vue'

export  default  {
    
    
  setup() {
    
    
    let person = reactive({
    
    
      firstName:"",
      lastName:''
    })
    person.fullName = computed({
    
    
      get(){
    
    
        return person.firstName + '-' + person.lastName
      },
      set(value){
    
    
        let name = value.split('-')
        person.firstName = name[0]
        person.lastName = name[1]
      }
    })
    return {
    
    
      person
    }
 }
}