Vue91 vue3 computed函数

笔记

1.computed函数

• 与Vue2.x中computed配置功能一致

• 写法

  import {
        
        computed} from 'vue'
  
  setup(){
        
        
      ...
  	//计算属性——简写
      let fullName = computed(()=>{
        
        
          return person.firstName + '-' + person.lastName
      })
      //计算属性——完整
      let fullName = computed({
        
        
          get(){
        
        
              return person.firstName + '-' + person.lastName
          },
          set(value){
        
        
              const nameArr = value.split('-')
              person.firstName = nameArr[0]
              person.lastName = nameArr[1]
          }
      })
  }
  

代码

Demo.vue

<template>
	<h1>一个人的信息</h1>
	姓：<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>

<script>
	import {
      
      reactive,computed} from 'vue'
	export default {
      
      
		name: 'Demo',
		setup(){
      
      
			//数据
			let person = reactive({
      
      
				firstName:'张',
				lastName:'三'
			})
			//计算属性——简写（没有考虑计算属性被修改的情况）
			/* person.fullName = computed(()=>{
				return person.firstName + '-' + person.lastName
			}) */

			//计算属性——完整写法（考虑读和写）
			person.fullName = computed({
      
      
				get(){
      
      
					return person.firstName + '-' + person.lastName
				},
				set(value){
      
      
					const nameArr = value.split('-')
					person.firstName = nameArr[0]
					person.lastName = nameArr[1]
				}
			})

			//返回一个对象（常用）
			return {
      
      
				person
			}
		}
	}
</script>

App.vue

<template>
	<Demo/>
</template>

<script>
	import Demo from './components/Demo'
	export default {
      
      
		name: 'App',
		components:{
      
      Demo},
	}
</script>