computed计算属性和方法对比

使用computed计算属性时，只需要调用一次会把返回值缓存起来，页面就可以调用多次，

不用每次显示时都进入计算函数。

代码示例：

<template>
	<view class="box">
		<input type="text" v-model="noInput1" placeholder="请输入名"/>
		<input type="text" v-model="noInput2" placeholder="请输入姓"/>
		<view>全称：{{InputName}}</view>
		<view>全称：{{InputName}}</view>
		<view>全称：{{InputName}}</view>
	</view>
</template>
<script setup>
import { ref,computed} from 'vue';
const noInput1=ref("1");//名的变量
const noInput2=ref("2");//姓的变量 
//计算属性
const InputName=computed(()=>{
	console.log("计算属性")
	return noInput1.value+"-"+noInput2.value;
})
</script>

效果图： 

 而使用方法时，是不会缓存返回值的，这样的话我们每次要使用时，都用调用一次方法，会比较占用系统性能。

注意：使用方法时，函数名后面要带括号

代码示例：

<view class="box">
		<input type="text" v-model="noInput1" placeholder="请输入名"/>
		<input type="text" v-model="noInput2" placeholder="请输入姓"/>
		<view>全称：{{InputName()}}</view>
		<view>全称：{{InputName()}}</view>
		<view>全称：{{InputName()}}</view>
	</view>

import { ref,computed} from 'vue';
const noInput1=ref("1");//名的变量
const noInput2=ref("2");//姓的变量 
// //方法
const InputName=function(){
	console.log("方法");
	return noInput1.value+"-"+noInput2.value;
}

效果图： 

 注意：计算属性尽量不要修改或赋值（InputName.value="值"）否则会报错，否则会产生异常，把它当成一个只读属性