【Vue3从零开始-第六章】6-5 compositionAPI中的计算属性

640 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 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>

image.png

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定义的countvalue,让count.value+1,并返回count和handleClick方法给外部。

chrome-capture (3).gif

计算属性

✋🏻 在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函数中计算出来的值。

chrome-capture (4).gif

🔥 这是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,然后将新的值返回给模板。

chrome-capture (5).gif

  • 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)

chrome-capture (6).gif

  • 此时我们就可以通过setTimeout函数去改变countAdd的值,并传入到computed函数中的set进行接收,最后返回计算出来的值给到模板中显示。

上面的例子中使用前面学过的ref函数,大家也可以使用reactive函数去试试哦~

总结

本篇文章主要是讲解了compositionAPI中的计算属性的使用方法,和以前基础知识里面学过的计算属性还是有很大区别的。

compositionAPI中的计算属性有更多的扩展性,除了可以用回调函数用来进行计算之外,还额外给了set和get两个方法用来改变计算属性的值。

大家在学习的过程中可以多敲敲代码去理解其中的原理,大家加油💪🏻💪🏻