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

2022-09-27 144

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

]UWOD(KIB9LJS9~S[T{QHM9.png

前言

在上一篇的文章中，我们用之前学过的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>
复制代码

KHGVE6FYY$CHO$3IR3UEBL0.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定义的count的value，让count.value+1，并返回count和handleClick方法给外部。

_61]A36Y}N7O(U%TNOJ}MZU.png

计算属性

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

)_J]0T768IN}XF15EPO05EV.png

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

)_J]0T768IN}XF15EPO05EV.png

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)
复制代码

)_J]0T768IN}XF15EPO05EV.png

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

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

总结

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

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

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

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

前言

回顾

setup中使用computed

计数器

计算属性

computed函数进阶

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

前言

回顾

setup中使用computed

计数器

计算属性

computed函数进阶

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景