1、功能概述
计算属性computed是Vue3中一个响应式的属性，最大的用处是基于多依赖时的监听。也就是属性A的值可以根据其他数据的变化而响应式的变化。
在Vue3中，你可以使用computed函数来定义计算属性。computed函数接收两个参数：一个包含getter和setter函数的对象和可选的上下文对象。getter函数用来计算计算属性的值，setter函数用来监听计算属性的变化。
案例中定义了两个属性，一个是count，一个是countAdd，当获取count值的时候，会出现计算属性computed重点get函数，当修改countAdd值的时候，会触发计算属性computed中的set函数。
1.1、基本使用
-
import { ref, computed } from 'vue';
-
-
const count = ref(0);
-
-
const doubleCount = computed(() => {
-
-
return count.value * 2;
-
-
});
-
-
console.log(doubleCount.value); // 输出 0
-
-
count.value = 2;
-
-
console.log(doubleCount.value); // 输出 4
1.2、详细使用案例—计算属性get用法
案例说明：
点击按钮的时候，触发事件handleClick，当修改count的值后，在span标签中显示获取count，这个时候触发computed计算属性中的get函数，将count的值增加5，赋值给countAdd属性。
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<script src="/vue@3"></script>
-
<title>计算属性</title>
-
</head>
-
<body>
-
<div id="app"></div>
-
<script type="module">
-
const app=Vue.createApp({
-
setup(){
-
//从Vue中
-
const {ref,computed}=Vue;
-
const count=ref(0)
-
//定义点击事件，每次点击count的值增加1
-
const handleClick=()=>{
-
count.value+=1;
-
}
-
-
//定义计算属性，当获取count的值，触发get，为count的值增加5，赋值给countAdd属性。
-
const countAdd=computed({
-
//取值的时候执行的操作
-
get:()=>{
-
return count.value + 5;
-
}
-
})
-
-
return {count,handleClick,countAdd}
-
},
-
template:`
-
<div>
-
<button @click="handleClick">点击修改值</button>
-
<span>{{count}}--{{countAdd}}</span>
-
</div>
-
`
-
});
-
//vue实例只作用于app这个DOM节点中
-
const vm=app.mount('#app');//viewModel是组件帮助我们完成的
-
</script>
-
</body>
-
-
</html>
测试结果：
默认值为0—5，点击后变成1--6
1.3、详细使用案例—计算属性set用法
当修改countAdd属性值的时候，会触发计算属性computed中的set函数，将countAdd的值减少5，赋值给count属性。
set:(param)=>{
return count.value=param-5;
}
在这个案例中我们通过一个定时器，3S后自动修改countAdd的值，测试效果
setTimeout(()=>{
countAdd.value=100;
},3000)
【案例代码详情】
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<script src="/vue@3"></script>
-
<title>计算属性</title>
-
</head>
-
<body>
-
<div id="app"></div>
-
<script type="module">
-
const app=Vue.createApp({
-
setup(){
-
//从Vue中
-
const {ref,computed}=Vue;
-
const count=ref(0)
-
//定义点击事件，每次点击count的值增加1
-
const handleClick=()=>{
-
count.value+=1;
-
}
-
-
//定义计算属性，当获取count的值，触发get，为count的值增加5，赋值给countAdd属性。
-
const countAdd=computed({
-
//取值的时候执行的操作
-
get:()=>{
-
return count.value + 5;
-
},
-
//修改countAddFive值的时候进行的操作,下面写了一个计时器进行修改值
-
set:(param)=>{
-
return count.value=param-5;
-
}
-
})
-
-
setTimeout(()=>{
-
countAdd.value=100;
-
},3000)
-
-
return {count,handleClick,countAdd}
-
},
-
template:`
-
<div>
-
<button @click="handleClick">点击修改值</button>
-
<span>{{count}}--{{countAdd}}</span>
-
</div>
-
`
-
});
-
//vue实例只作用于app这个DOM节点中
-
const vm=app.mount('#app');//viewModel是组件帮助我们完成的
-
</script>
-
</body>
-
-
</html>
测试效果：
默认值为0--5,3s后值编程95--100
