computed和method的区别

myyyl2025-03-07 14:17

自己总结：

computed和method的区别

（是什么？）computed是计算属性主要是将模板里面的业务代码，转移到script里面，便于维护。

另外他生成了一个派生属性。比如给computed姓和名，能重新计算出一个新的属性姓名属性。

（区别？）

1.这些用method也能做但是计算属性计算属性主要说computed是一个属性，而method做的是个方法，在调用的时候需要加（）

2.另外就是计算属性有缓存，比如说当计算属性算出来的派生值不改变的话就不会重新计算，在模板里面引用多次也会计算一次。

而用method的话在模板里面每次调用就会重新计算一次。所以说在派生属性比较多且重复使用的情况下就用计算属性来做。

xml 复制代码

<script setup>
	import {ref,computed} from 'vue'
	const firstName = ref('')
	const lastName = ref('')
	const Cname = computed(()=>{
		return firstName.value+'-'+lastName.value
	})
	const Fname = function(){
		return firstName.value+'-'+lastName.value
	}
</script>

<template>
	<view>
		<input type="text" placeholder="请输入姓" v-model="firstName" />
		<input type="text" placeholder="请输入名 " v-model="lastName"/>
		<view>
			全名（原生）是：{{firstName +'-'+ lastName}}
			<br />
			全名（计算属性）是：{{Cname}}
			<br />
			全名（方法）是：{{Fname()}}
		</view>
	</view>
</template>

<style lang="scss" scoped>
	input{
		border:1px solid seagreen;
		padding:0 10px;
		margin-top: 10px;
	}
</style>