<template>
	<view >瓜兮兮的世界</view>
	
	<view class="out">
		<input type="text" v-model="no1" placeholder="请输入" />
		<input type="text" v-model="no2" placeholder="请输入" />
		
		<view >{{add}}</view>
	</view>
	
</template>

<script setup>  
	import { computed, ref } from 'vue';
	const no1 =ref("");
	const no2 =ref("");
	const add=computed(()=>no1.value+"---"+no2.value)
	
</script>

<style lang="scss" >
	.out{
		border: 1px solid green;
		input{
			border:1px solid red
			
		};
	}

</style>

---------------------------computed计

Vue3 计算属性（computed）详解

计算属性是 Vue3 中用于处理复杂逻辑的响应式数据，基于依赖的响应式数据自动缓存计算结果，仅在依赖变化时重新计算。

基本语法

使用 computed 函数定义计算属性，支持 getter 和 setter：

import { computed, ref } from 'vue'

const count = ref(1)
// 只读计算属性
const doubleCount = computed(() => count.value * 2)

// 可写计算属性
const writableComputed = computed({
  get: () => count.value + 1,
  set: (val) => {
    count.value = val - 1
  }
})

与方法的区别

计算属性具有缓存特性，只有当依赖的响应式数据变化时才会重新计算。方法调用每次都会执行函数体：

// 方法每次调用都执行
function getDouble() {
  return count.value * 2
}

// 计算属性有缓存
const cachedDouble = computed(() => count.value * 2)

最佳实践

计算属性适合处理模板中的复杂表达式，避免在模板中直接编写复杂逻辑。对于需要参数的计算，建议使用方法而非计算属性。

计算属性不应有副作用，避免在 getter 中执行异步操作或修改其他状态。需要异步处理时考虑使用 watch 或 watchEffect。

TypeScript 支持

Vue3 为计算属性提供完善的类型推断，可显式声明类型：

const double = computed<number>(() => count.value * 2)

算属性------------------------