持续创作，加速成长！这是我参与「掘金日新计划 · 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方法给外部。

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两个方法用来改变计算属性的值。

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

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

前言

回顾

setup中使用computed

计数器

计算属性

computed函数进阶

总结