VUE3 computed计算值新用法

一、函数式写法

在vue2中，computed 写法：

computed:{
 sum(){
  return this.num1+ this.num2
 }
}

vue 3中，如果使用选项式API computed使用和写法与vue2相同。

vue3中使用组合式API computed的写法

import { ref, computed } from "vue"
export default{
	setup(){
 		const num1 = ref(1)
 		const num2 = ref(1)
 		let sum = computed(()=>{
  				return num1.value + num2.value
 			})
		}
}

调用 computed 时， 传入了一个箭头函数，返回值作为 sum 。相比之前，使用更加简单了。如果需要计算多个属性值，直接调用就可以。如：

let sum = computed(()=>{
		return num1.value + num2.value
})
let mul = computed(()=>{
		return num1.value * num2.value
})

该示例过于简单，看不明白的可在文章后面阅读

完整实例1。

<template>
<div>
 {{num1}} + {{num2}} = {{sum}}
 <br>
 <button @click="num1++">num1自加</button>
 <button @click="num2++">num2自加</button>
</div>
</template>
<script>
import { ref, computed } from "vue"
export default{
	setup(){
 		const num1 = ref(1)
 		const num2 = ref(1)
 		
 		let sum = computed(()=>{
  			return num1.value + num2.value
 		})
 		return {
  			num1,
  			num2,
  			sum
 		}
	}
}
</script>

二、options 写法

计算属性默认只有 getter ，在需要的时候也可以提供 setter 。在vue2中用法如下：

computed:{
	mul:{
 		get(){ // num1值改变时触发
  		return this.num1 * 10
 		},
 		set(value){ // mul值被改变时触发
	  	this.num1 = value /10
 		}
	}
}

mul 属性是 给num1 放大10，如果修改 mul 的值，则 num1 也随之改变。

在 vue3 中 ：

let mul = computed({
	get:()=>{
 	return num1.value *10
	},
	set:(value)=>{
 	return num1.value = value/10
	}
})

这两种写法不太一样，仔细观察区别不大，get 和 set 调用也是一样的。

在此示例中代码简单，如果没太理解，可查看文章后面的

完整实例2

<template>
	<div>
 	{{num1}} + {{num2}} = {{sum}}<br>
 	<button @click="num1++">num1自加</button>
 	<button @click="num2++">num2自加</button>
 	<br>
 	{{num1}} * 10 = {{mul}}
 	<button @click="mul=100">改值</button>
	</div>
</template>
<script>
import { ref, computed } from "vue"
	export default{
		setup(){
 		const num1 = ref(1)
 		const num2 = ref(1)
 		let sum = computed(()=>{
  			return num1.value + num2.value
 		})
 		let mul = computed({
  		get:()=>{
   			return num1.value *10
  		},
  		set:(value)=>{
   			return num1.value = value/10
  			}
 		})
 		return {
  			num1,
  			num2,
  			sum,
  			mul
 		}
	}
}
</script>

vue3 vue computed

http://blog.xqlee.com/article/2408052012266530.html