Composition API -- computed计算属性

最新推荐文章于 2024-01-31 17:32:33 发布

爱划水de鲸鱼哥～

最新推荐文章于 2024-01-31 17:32:33 发布

阅读量1k

点赞数

分类专栏： Vue3 文章标签： vue javascript js

本文链接：https://blog.csdn.net/m0_47901007/article/details/118669693

版权

Vue3 专栏收录该内容

31 篇文章 4 订阅

订阅专栏

文章目录

前言
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>
            `,
        });

页面效果
在这里插入图片描述
触发点击事件后，页面效果

用法二：接收对象

computed可以接收一个对象里面有get,set两个方法。get取值时调用的方法，set赋值时调用的方法。

修改computed代码，添加一个setTimeout。

				let addFive = computed({
                    get: () => {
                       return count.value + 5;
                    },
                    set: () => {
                        return count.value = 20;
                    }
                })
                setTimeout(() => {
                    addFive.value = 100;
                },2000)

页面效果
在这里插入图片描述
两秒后页面效果

set()可以接收参数

 			let addFive = computed({
                    get: () => {
                       return count.value + 5;
                    },
                    set: (param) => {
                        return count.value = param - 20;
                    }
                })

页面效果
在这里插入图片描述
两秒后页面效果

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3 -- computed计算属性（Composition API）</title>
    <!-- 使用CDN引入Vue -->
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        const app = Vue.createApp({
            setup(){
               const { ref, computed } = Vue;
               let count = ref(0);
               const handleClick = () => {
                count.value++;
               }
            //    const addFive = computed(() => {
            //        return count.value + 5;
            //    })
                // let addFive = computed({
                //     get: () => {
                //        return count.value + 5;
                //     },
                //     set: () => {
                //         return count.value = 20;
                //     }
                // })
                let addFive = computed({
                    get: () => {
                       return count.value + 5;
                    },
                    set: (param) => {
                        return count.value = param - 20;
                    }
                })

                setTimeout(() => {
                    addFive.value = 100;
                },2000)

                return {
                   count, handleClick,
                   addFive
               }
            },
            template:`
            <div @click="handleClick">count: {{count}}</div>
            <div>addFive: {{addFive}}</div>
            `,
        });
        const vm = app.mount('#root');
    </script>
</body>
</html>

总结

computed 计算属性：当所依赖的内容发生变化时，里面的代码才会重新执行。computed需要从Vue中引入才能使用；

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

用法二：computed可以接收一个对象，里面有get,set两个方法。get取值时调用的方法，set赋值时调用的方法。

结语

本小节到此结束，谢谢大家的观看！

如有问题欢迎各位指正

爱划水de鲸鱼哥～

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
Composition API -- computed计算属性

先实现一个计数器 const app = Vue.createApp({ setup(){ const { ref, computed} = Vue; let count = ref(0); const handleClick = () => { count.value++; } return
复制链接

扫一扫