vue中的计算属性简写与完整写法

1、简写与全写的区别

vue中的计算属性分为简写和完整写法,简写的方式是不考虑计算属性的修改的,而完整的写法是考虑计算属性的读与写的

2、vue2下计算属性的写法

<input type="text" v-model="oneName">
<br>
 <input type="text" v-model="lastName">
 <p>{{fullName}}</p>
 <p>{{testName}}</p>
 <input type="text" v-model="testName">

computed:{
       // 简写
       fullName(){
           return this.oneName + '-' + this.lastName;
       },
       // 全写
       testName:{
           get(){
               return this.oneName + '-' + this.lastName;
           },
           set(value){
               const nameArr = value.split('-');
               this.oneName = nameArr[0];
               this.lastName = nameArr[1];
           }
       }
   },
   data(){
  			 oneName:"张",
            lastName:"三",
   }

3、vue3下计算属性的写法

<input type="text" v-model="p.oneName">
<br>
 <input type="text" v-model="p.lastName">
 <p>{{p.fullName}}</p>
 <p>{{p.testName}}</p>
 <input type="text" v-model="p.testName">
 

import {computed} from 'vue';
setup(){
	let p = reactive({
		oneName:'张',
		lastName:'三'
	});
	// 简写
	p.fullName = computed(()=>{
		return p.oneName + '-' + p.lastName;
	});
	// 全写
	p.testName = computed({
		get(){
			return p.oneName + '-' + p.lastName;
		},
		set(value){
			const nameArr = value.split('-');
              this.oneName = nameArr[0];
              this.lastName = nameArr[1];
		}
	});
	return{
		p,
	}
}