Composition API -- computed计算属性

前言

之前我们学过在组件里使用computed，现在我们来学习一下如何在Composition API中使用computed。

computed 计算属性

• 作用：当所依赖的内容发生变化时，里面的代码才会重新执行；
• 引用：computed需要从Vue中引入才能使用；
• 用法
  • 用法一：computed 可以接收一个回调函数
  • 用法二：computed可以接收一个对象

用法一：接收回调函数

computed 可以接收一个回调函数，返回一个通过其他属性计算的值，这个新值就是一个计算属性。

先实现一个计数器功能；

 		const app = Vue.createApp({
            setup(){
               const { ref, computed} = Vue;
               let count = ref(0);
               const handleClick = () => {
                count.value++;
               }
               return {
                   count, handleClick
               }
            },
            template:`<div @click="handleClick">count: {
  {count}}</div>`,
        });

然后使用 computed 实现对 count 加五的功能；

 		const app = Vue.createApp({
            setup(){
               const { ref, computed} = Vue;
               let count = ref(0);
               const handleClick = () => {
                count.value++;
               }
               const addFive = computed(() => {
                   return count.value + 5;
               })
               return {
                   count, handleClick,
                   addFive
               }
            },
            template:`
            <div @click="handleClick">count: {
  {count}}</div>
            <div>addFive: {
  {addFive}}</div>
            `,
        });

页面效果

触发点击事件后，页面效