持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第7天,点击查看活动详情
前言
在上一篇
的文章中,我们用之前学过的compositionAPI
知识点开发一个TodoList
,本章节中会和大家一起学习compositionAPI中的计算属性computed
。
回顾
在【Vue3从零开始】前面几章基础知识的章节中也有学习过computed
计算属性的概念,我们可以在vue实例
中直接使用computed
去计算两个值的和
。
<script>
const app = Vue.createApp({
data(){
return {
count: 1,
price: 5
}
},
computed: {
total(){
return this.count + this.price
}
},
template: `
<div>
<span>{{total}}</span>
</div>
`
});
const vm = app.mount('#root');
</script>
setup中使用computed
因为之前学过基础的计算属性,为了更好的适应新的方式去实现计算属性方法,下面的内容会用一个例子从简单的方式到复杂的方式去讲解,有一个循序渐进的过程,希望大家可以慢慢看慢慢学~~
计数器
✋🏻 基础知识点的章节中我们也实现过计数器的小例子,通过点击标签元素来实现双向数据绑定
的值改变。
🔥 在setup函数
中也可以通过前几篇文章的内容实现一个计数器方法。
<script>
const app = Vue.createApp({
setup(){
const { ref } = Vue
const count = ref(1)
const handleClick = () => {
count.value += 1
}
return {
count,
handleClick
}
},
template: `
<div>
<span @click="handleClick">{{count}}</span>
</div>
`
});
const vm = app.mount('#root');
</script>
- 还是使用了之前学习过的
ref
来定义一个数字
,然后在点击按钮触发事件方法时,回去改变ref
定义的count
的value
,让count.value+1
,并返回count和handleClick方法
给外部。
计算属性
✋🏻 在setup函数
中使用计算属性,和前面章节中学过的ref函数
类似,也是需要从Vue中解构出来
,然后才能使用computed函数
。
📢
computed
在这里是一个函数哦!
const app = Vue.createApp({
setup(){
// 定义computed
const { ref, computed } = Vue
const count = ref(1)
const handleClick = () => {
count.value += 1
}
// 使用computed
const countAdd = computed(() => {
return count.value + 5
})
return {
count,
handleClick,
countAdd
}
},
template: `
<div>
<span @click="handleClick">{{count}}</span> --- {{countAdd}}
</div>
`
});
- 在模板中输出
countAdd
,它会返回computed函数
中计算出来的值。
🔥 这是computed函数
的初级使用方式,下面会讲解进阶方式
,看起来可能会有一点绕哦~大家看的时候可以自己也去敲一敲代码实现一下的。
computed函数进阶
在compositionAPI
中提供的computed函数
里面会有一个set和get
的方法,可以用来设置数据值和获取数据值。
const countAdd = computed({
get: () => {
return count.value + 5
},
set: () => {
count.value = 10
}
})
setTimeout(() => {
countAdd.value = 100
}, 3000)
- 此时的
computed函数
中就不是回调函数了,而是一个对象。 - 对象中有两个函数:
set、get
。 - 当
countAdd
的值发生改变时,就会触发computed函数
中的set和get
,然后将新的值返回给模板。
setTimeout函数
中,我们定义了三秒的时长来改变countAdd
的值,从而触发computed函数
中的set和get
。
❓ 但是在setTimeout函数
中改变的值好像并没有什么实际作用,那么我们可以把这个值传给computed函数
中的set
,从而实现动态传参去改变值。
const countAdd = computed({
get: () => {
return count.value + 5
},
set: (param) => {
count.value = param - 5
}
})
setTimeout(() => {
countAdd.value = 100
}, 3000)
- 此时我们就可以通过
setTimeout函数
去改变countAdd
的值,并传入到computed函数
中的set
进行接收,最后返回计算出来的值给到模板中显示。
上面的例子中使用前面学过的ref函数,大家也可以使用reactive函数去试试哦~
总结
本篇文章主要是讲解了compositionAPI
中的计算属性的使用方法,和以前基础知识里面学过的计算属性还是有很大区别的。
compositionAPI
中的计算属性有更多的扩展性,除了可以用回调函数用来进行计算之外,还额外给了set和get
两个方法用来改变计算属性的值。
大家在学习的过程中可以多敲敲代码去理解其中的原理,大家加油💪🏻💪🏻