Vue -- computed计算属性

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第 4 天，点击查看活动详情

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;
                    }
                })

页面效果

两秒后页面效果

总结

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

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

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

结语

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

如有问题，欢迎各位指正！