Vue3全家桶 - Vue3 - 【5】计算属性

最新推荐文章于 2024-05-13 17:58:23 发布
最新推荐文章于 2024-05-13 17:58:23 发布
阅读量1.2k 收藏 21
点赞数 18
分类专栏： Vue3 文章标签： 前端 vue 前端框架 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48937489/article/details/136634090
版权
本文详细介绍了Vue.js中计算属性的工作原理，包括计算属性与方法的区别，以及如何使用简易写法和完整写法创建计算属性。同时讨论了组合式API的应用，强调了计算属性的只读性及其在实际项目中的正确使用示例。
摘要由CSDN通过智能技术生成

一、计算属性

1.1 计算属性与方法的区别：

  • 两种方式在结果上确实是完全相同的，不同之处在于 计算属性值会基于其响应式依赖被缓存；
  • 一个计算属性仅会在其响应式依赖更新时才重新计算，这意味着只要所依赖的数据源不改变，无论多少次访问计算属性都会立即返回先前的计算结果，而不用重复执行getter函数；
  • 方法调用总是会在重新渲染发生时再次执行函数；

1.2 组合式API

  • 计算属性 - 语法：
    • 简易写法：（getter）：
      • 只是使用计算属性的值不对其进行修改；
      import { computed } fro 'vue'
const 变量名 = computed(() => {
    // getter 必须要有return，可以简写成箭头函数
    return xxx
})
    • 完整写法：（setter + getter）：
      • 既要使用计算属性的值，也要对其进行修改操作；
      import { computed } from 'vue'
const 变量名 = computed({
    // 给计算属性赋值的时候触发 setter
    // value - 就是给计算属性赋的值
    set(value) {},

    // 使用计算属性的值的时候触发 getter
    // getter 中 必须要有 return
    get() {
        return xxx
    }
})
  • 注意：
    • 计算属性默认是只读的，当我们尝试修改一个值的时候，会收到一个运行时警告。只会在某些特殊场景中可能才会需要用到“可写”的属性，可以通过同时提供getter 和 setter创建；
    • 计算属性的getter应只做计算而没有任何其他的副作用；
      • 不要在getter中做 异步请求 或者 更改DOM；
    • 避免直接修改计算属性值；
      • 从计算属性返回的值是派生状态。可以把它看作是一个“临时快照”，每当原状态发生变化时，就会创建一个新的快照。更改快照是没有意义的，因此计算属性的返回值应该被视为只读的，并且永远不应该被更改——应该更新它所依赖的原状态以触发新的计算；
  • 示例展示：
    • 全选 - 反选：
      <script setup>
    import { ref, computed } from 'vue';
    const animeArr = ref([
        {
            name: '完美世界',
            role: '石昊',
            checked: false
        },
        {
            name: '不良人',
            role: '李星云',
            checked: false
        },
        {
            name: '遮天',
            role: '叶尘',
            checked: false
        }
    ])

    // TODO 反选
    const reverseSelect = () => {
        animeArr.value.forEach(item => item.checked = !item.checked)
    }

    // TODO 计算属性
    let chooseAll = computed({
        set(value) {
            animeArr.value.forEach(item => item.checked = value)
        },
        get() {
            return animeArr.value.every(item => item.checked)
        }
    });
</script>

<template>
    <h3>全选 / 反选 - demo</h3>
    <p>
        <label>
            全选 ：
            <input type="checkbox" v-model="chooseAll" :checked="chooseAll"> | 
            <button @click="reverseSelect">反选</button>
        </label>
    </p>

    <p v-for="item in animeArr" :key="item.name">
        <label>
            {{ `${item.name} ➡ ${item.role}` }} ：
            <input type="checkbox" :checked="item.checked" v-model="item.checked">
        </label>
    </p>
</template>

<style scoped>
    p {
        text-align: left;
    }
</style>
    • 根据日期判断星座：
      <script setup>
    import { computed, ref } from 'vue'
    let birthday = ref('') // 生日

    // 计算属性：星座
    let constellation = computed(() => {
        // yyyy-MM-dd -> ['yyyy', 'MM', 'dd']
        let birArr = birthday.value.split('-')
        // 月份
        let month = parseInt(birArr[1])
        // 日份
        let day = parseInt(birArr[2])
        // 判断
        switch (month) {
            case 1:
                if (day <= 19) {
                    return '魔羯座'
                } else {
                    return '水平座'
                }
            case 2:
                if (day <= 18) {
                    return '水平座'
                } else {
                    return '双鱼座'
                }
            case 3:
                if (day <= 20) {
                    return '双鱼座'
                } else {
                    return '白羊座'
                }
            case 4:
                if (day <= 19) {
                    return '白羊座'
                } else {
                    return '金牛座'
                }
            case 5:
                if (day <= 20) {
                    return '金牛座'
                } else {
                    return '双子座'
                }
            case 6:
                if (day <= 21) {
                    return '双子座'
                } else {
                    return '巨蟹座'
                }
            case 7:
                if (day <= 22) {
                    return '巨蟹座'
                } else {
                    return '狮子座'
                }
            case 8:
                if (day <= 22) {
                    return '狮子座'
                } else {
                    return '处女座'
                }
            case 9:
                if (day <= 22) {
                    return '处女座'
                } else {
                    return '天秤座'
                }
            case 10:
                if (day <= 23) {
                    return '天秤座'
                } else {
                    return '天蝎座'
                }
            case 11:
                if (day <= 22) {
                    return '天蝎座'
                } else {
                    return '射手座'
                }
            case 12:
                if (day <= 21) {
                    return '射手座'
                } else {
                    return '魔羯座'
                }
            default:
                return '请选择日期'
        }
    })
</script>

<template> 
    <div>
        生日：<input type="date" v-model="birthday">
        <h3>星座：{{ constellation }}</h3>
    </div>
</template>

1.3 选项式API

  • 选项式计算属性写法：
    <script>
export default {
    data: () => ({
        test: ''
    }),
    computed: {
        test: () => 'xxx'
    }
}
</script>
    • 示例展示：
      <script>
export default {
    data: () => ({
        age: 20, // 年龄
        birthday: '' // 生日
    }),
    // 计算属性选项
    computed: {
        // 年龄阶段
        ageState() {
            if (this.age < 18) {
                return '未成年'
            } else if (this.age < 35) {
                return '青年'
            } else if (this.age < 50) {
                return '中年'
            } else {
                return '老年'
            }
        },
        // 星座
        constellation() {
            // yyyy-MM-dd -> ['yyyy', 'MM', 'dd']
            let birArr = this.birthday.split('-')
            // 月份
            let month = parseInt(birArr[1])
            // 日份
            let day = parseInt(birArr[2])
            // 判断
            switch (month) {
                case 1:
                    if (day <= 19) {
                        return '魔羯座'
                    } else {
                        return '水平座'
                    }
                case 2:
                    if (day <= 18) {
                        return '水平座'
                    } else {
                        return '双鱼座'
                    }
                case 3:
                    if (day <= 20) {
                        return '双鱼座'
                    } else {
                        return '白羊座'
                    }
                case 4:
                    if (day <= 19) {
                        return '白羊座'
                    } else {
                        return '金牛座'
                    }
                case 5:
                    if (day <= 20) {
                        return '金牛座'
                    } else {
                        return '双子座'
                    }
                case 6:
                    if (day <= 21) {
                        return '双子座'
                    } else {
                        return '巨蟹座'
                    }
                case 7:
                    if (day <= 22) {
                        return '巨蟹座'
                    } else {
                        return '狮子座'
                    }
                case 8:
                    if (day <= 22) {
                        return '狮子座'
                    } else {
                        return '处女座'
                    }
                case 9:
                    if (day <= 22) {
                        return '处女座'
                    } else {
                        return '天秤座'
                    }
                case 10:
                    if (day <= 23) {
                        return '天秤座'
                    } else {
                        return '天蝎座'
                    }
                case 11:
                    if (day <= 22) {
                        return '天蝎座'
                    } else {
                        return '射手座'
                    }
                case 12:
                    if (day <= 21) {
                        return '射手座'
                    } else {
                        return '魔羯座'
                    }
                default:
                    return '请选择日期'
            }
        }
    }
}
</script>

<template>

    <div>
        年龄：<input type="number" v-model.lazy="age">
        <!-- 简单的表达式 -->
        <h3>年龄阶段（简单）：{{ age < 18 ? '未成年' : '成年' }} </h3>
        <!-- 计算属性：年龄阶段 -->
        <h3>年龄阶段（复杂）：{{ ageState }} </h3>·
    </div>

    <hr>
    <div>
        生日：<input type="date" v-model="birthday">
                <!-- 计算属性：星座 -->
        <h3>星座：{{ constellation }}</h3>
    </div>

</template>

在这里插入代码片
禁止摆烂-才浅
关注
  • 18
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 计算属性 给计算属性变量赋值时 完整语法 get set（工作）
259的博客
12-17 1537
vue 计算属性 给计算属性变量赋值时 完整语法 get set（工作）
Vue 3.0 全家桶抢先体验
10-15
接下来，我们可以开始体验Vue 3.0的基本特性，比如模板语法的优化，如模板中计算属性的简写、v-bind和v-on的简写等。此外，Vue 3.0的渲染函数也进行了优化，支持使用JSX语法，使得代码更加接近React。Vue 3.0的响应...
Vue3——计算属性computed
mantou_riji的博客
07-25 3128
可以监视一个数据也可以同时监视多个数据。import{//监视一个数据watch(监视属性,(newValue,oldValue)=>{监视的回调}，{监视的配置})//监视多个数据watch([监视属性1，监视属性2],(newValue,oldValue)=>{监视的回调}，{监视的配置})}eg效果代码demo.vue......
vue3.0(七) 计算属性（computed）
最新发布
chengcheng9876的博客
05-13 1533
computed 是一个用于创建计算属性的工具，它基于组件的响应式依赖进行复杂的计算，并返回一个新的响应式引用。计算属性是 Vue 的一个核心概念，它提供了一种声明式的方式来执行基于其依赖的响应式数据的计算。
vue3计算属性以及赋值
blog
11-29 1845
【代码】vue3计算属性以及赋值。
vue3 - vue3中的计算属性讲解
qq_43886365的博客
11-14 1049
vue3中的计算属性讲解
vue3.0计算属性
cjy_fly的博客
06-07 1477
vue3.0计算属性
Vue3 _ 6. Vue 计算属性
胖子胖子大胖子的博客
07-02 2624
一、什么是计算属性 我们先来看官网的例子。 可以看到哈，这个是通过判断 author.books 的数组长度来进行显示 YES 或者 NO 的。这个是可以使用的，但是如果我们在代码中这样的东西写的太多了，等后期进行维护的时候，这个是很费劲的，所以 Vue 提供了一个属性：computed。 二、computed 使用 首先自己复制一下官网上的例子。 然后我们来进行改造。首先是定义 computed，这个属性是和 data 在同一层，（定义方式类似 method） 接下来，我们在里面定
15_Vue全家桶 - Pinia状态管理.pptx
01-25
State是存储全局状态的地方，Getters则类似于计算属性，用于创建基于State的衍生数据，而Actions则用于处理异步操作和状态的变更。 在Pinia中，不再有Vuex中的Mutations，这意味着不再需要繁琐的变更追踪。Pinia还...
VUE项目全家桶最新版视频教程.zip
07-12
目录网盘文件永久链接 01-Vue开篇(理解)_ev 02-Vue基本使用(掌握)_ev 03-Vue数据单向传递(掌握)_ev 04-Vue调试工具安装(掌握)_ev 05-Vue数据双向传递(掌握) ...23-Vue-计算属性和函数区别(掌握).....
vue20全家桶实例
08-12
"Vue20全家桶实例"是指利用Vue 2.0及其生态中的核心库来构建一个完整的项目，包括Vuex（状态管理），vue-router（路由管理），vue-resource（HTTP客户端）和echarts3（数据可视化库）。 1. **Vue 2.0**: Vue 2.0 ...
VUE全家桶vue2vueroutervuexaxios
08-10
"Vue全家桶"是指使用Vue.js进行开发时，通常会配合使用的几个核心库，包括Vue Router、Vuex和Axios。下面将详细介绍这三个组件以及它们在创建Web应用程序中的作用。 1. Vue 2：Vue 2是Vue.js的第二个主要版本，提供...
vue3 setup中使用计算属性
weixin_50736511的博客
12-09 1597
使用vue2的方式写计算属性 <template > 第一句：<input type="text" v-model="verse.first"> <br> {{verse.first}} <br> 第二句：<input type="text" v-model="verse.next"> <br> {{verse.next}} <br> {{all}} </template> <script> impo
玩转Vue3：计算属性和监视属性深度解析
Cipher_Y的博客
08-07 324
1. Computed属性computed 是一个函数，它返回一个值，该值依赖于组件的数据。当依赖的数据发生改变时，computed 返回的值会自动更新。在 Vue.js 中，我们通常使用 computed 来封装复杂的逻辑或计算属性，使得我们能够更加方便地处理这些逻辑，并且保证其响应式的特性。2. Watch属性watch 是一个对象，它允许我们观察 Vue 实例的数据。当数据变化时，我们可以执行一些操作。在某些情况下，我们可能需要等待数据改变后执行某些操作，或者在数据改变时执行异步操作。
Vue3之属性传值的四种情况
m0_63837020的博客
02-27 2445
vue3中属性传值的四种情况，包括父传子，子传父，祖传孙，兄弟传兄弟
详细介绍Vue3中的计算属性的概念、使用方式和一些常见的应用场景
网络技术联盟站
07-18 2905
data() {return {},
computed里面的xx : function(){}方法详解,以及watch和methods和区别
qq_34246965的博客
07-20 1933
在 Vue 中，computed 的属性可以被视为是 data 一样，可以读取和设值，因此在 computed 中可以分成 getter（读取） 和 setter（设值），一般情况下是没有 setter 的，computed 预设只有 getter ，也就是只能读取，不能改变设值。 vue.js计算属性默认只有 getter，因为是默认值所以我们也常常省略不写，如下代码： <div id="demo">{{ fullName }}</div> var vm = new Vue({
Vue3的计算属性——computed
omroji的博客
02-03 4900
在日常开发中我们可能会有这样的需求，当页面中某个变量发生改变时要同时修改另一个变量的值。一般我们会通过监听器或者回调事件的方式来实现同步更改，但是如果修改次数过多，内容复杂时就会导致代码冗余。为了解决这一问题，Vue3提供了 computed 计算属性。computed属性在Vue3中是一个非常重要的响应式特性。它可以根据其他响应式数据的变化自动更新自身的值，无需手动操作。computed属性可以接收一个函数作为参数，这个函数会在需要时被调用，并使用其他响应式数据的值进行计算。
Vue3中的计算属性的详细讲解
qq_51130780的博客
12-08 1916
Vue3中计算属性以及计算属性的好处
Vue3计算属性
05-27
在Vue.js 3中，计算属性的实现方式和Vue.js 2有些不同。Vue.js 3中，可以使用`computed`函数来定义计算属性，和Vue.js 2中的`computed`属性类似。 下面是一个示例代码： ``` <template> <div> <p>商品名称：{{ product.name }}</p> <p>商品价格：{{ productPrice }}</p> </div> </template> <script> import { computed } from 'vue' export default { data() { return { product: { name: '商品A', price: 100, }, } }, computed: { productPrice: computed(() => { return this.product.price * 2 }), }, } </script> ``` 在上面的代码中，使用了`computed`函数来定义计算属性`productPrice`，并将其返回值设置为商品价格的两倍。在模板中，可以像访问普通属性一样访问计算属性`productPrice`。 需要注意的是，在Vue.js 3中，计算属性的定义方式与Vue.js 2有所不同。Vue.js 3中的计算属性使用`computed`函数，而Vue.js 2中则是使用`computed`属性。此外，Vue.js 3中的计算属性在定义时需要使用箭头函数，而Vue.js 2中则不需要。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值