vue3.0(七) 计算属性(computed)

文章目录

  • 1 计算属性(computed )
    • 1.1 computed使用
    • 1.2 computed使用场景
    • 1.4 computed的注意点
    • 1.4 computed的原理
    • 1.5 computed的示例
  • computed 和 Methods 的区别


1 计算属性(computed )

在 Vue 3 中,computed 是一个用于创建计算属性的工具,它基于组件的响应式依赖进行复杂的计算,并返回一个新的响应式引用。计算属性是 Vue 的一个核心概念,它提供了一种声明式的方式来执行基于其依赖的响应式数据的计算。

1.1 computed使用

计算属性与常规属性类似,但是它们是基于它们的依赖进行缓存的。只有当计算属性依赖的响应式数据发生变化时,它们才会重新求值。
只要依赖没有变化,多次访问计算属性会立即返回之前缓存的结果,而不会重新执行计算逻辑。

<template><div>原始数据{{ count }}</div><div>计算属性数据{{ comCount }}</div><button @click="updateCount">修改数据</button>
</template>
<script lang="ts">
import { defineComponent, ref, computed } from 'vue'
export default defineComponent({setup () {const count = ref<number>(0)const comCount = computed(() => count.value * 3)const updateCount = () => {count.value++}return {count,comCount,updateCount}}
})
</script>

上述代码执行效果

  • count 是一个响应式数据,而 doubleCount 是一个计算属性,它返回 count 的三倍。当 count 的值发生变化时,doubleCount 会自动更新。
  • 使用计算属性的好处是它们能够减少不必要的计算和渲染,提高性能。此外,它们还使得组件的逻辑更加清晰和易于维护。

1.2 computed使用场景

  1. 对数据进行格式化
    从响应式数据中派生出一个经过计算或转换的新值时,可以使用 computed。
    <template><--! 2024/5/13 --><div>{{ formattedDate }}</div>
    </template>
    <script lang="ts">
    import { defineComponent, ref, computed } from 'vue'
    export default defineComponent({setup () {const date = ref(new Date())console.log(date.value) // Mon May 13 2024 15:32:56 GMT+0800 (中国标准时间)const formattedDate = computed(() => {  return date.value.toLocaleDateString()})return {formattedDate}}
    })
    </script>
    
  2. 依赖多个数据源的属性并对数据进行计算
    多个响应式数据项,并且当这些数据项中的任何一个改变时,你都希望重新计算该属性
    <template><div>{{ totalPrice }}</div>
    </template>
    <script lang="ts">
    import { defineComponent, ref, computed } from 'vue'export default defineComponent({setup () {const num = ref(2) const price = ref(10)const totalPrice = computed(() => {  return num.value * price.value})return {totalPrice}}
    })
    </script>
    
  3. 减少模板中的复杂逻辑, 过滤和排序, 计算
    在模板中直接编写复杂的逻辑表达式可能会导致代码难以阅读和维护。
    import { computed, reactive } from 'vue'
    const state = reactive({todos: [{ id: 1, text: '学习Vue3', done: false },{ id: 2, text: '学习React', done: false },{ id: 3, text: '学习Angular', done: true }]
    })
    const totalTodos = computed(() => {return state.todos.length
    })
    const completedTodos = computed(() => {return state.todos.filter(todo => todo.done).length
    })
    console.log(totalTodos.value) // 输出:3
    console.log(completedTodos.value) // 输出:1
    

1.4 computed的注意点

  1. 计算属性应该是纯函数:计算属性的值应该只依赖于其他响应式数据,而不应该有副作用。

  2. 不要在计算属性内部修改数据:计算属性的“getter”函数应该只返回计算的值,而不应该在内部修改依赖的数据。这样会导致无限循环更新。

  3. 对于复杂的计算,考虑使用方法或Watchers:如果计算涉及复杂逻辑或异步操作,可能需要考虑使用方法或Watchers来替代计算属性。

1.4 computed的原理

computed函数的原理主要是基于Vue的响应式系统,通过getter和setter函数来创建和管理计算属性。

  1. 响应式依赖收集:当在组件中定义计算属性时,Vue会为该计算属性创建一个getter函数。这个getter函数的作用就是返回计算属性的值。在getter函数执行的过程中,它可能会访问其他响应式数据(如data中的属性或props等)。当getter函数访问这些响应式数据时,Vue的响应式系统会记录下这些依赖关系,即计算属性依赖于哪些响应式数据。

  2. 缓存机制:计算属性的关键特性是它具有缓存机制。只要计算属性所依赖的响应式数据没有发生变化,那么多次访问计算属性时,都会直接返回之前计算并缓存的结果,而不会重新执行getter函数中的计算逻辑。这种缓存机制大大提高了性能,避免了不必要的重复计算

  3. 依赖更新与重新计算:当计算属性所依赖的响应式数据发生变化时,Vue的响应式系统会触发依赖更新。这个过程会标记计算属性为“脏”状态,表示其值可能不再是最新的。在下一个组件更新周期中,Vue会重新执行计算属性的getter函数,以获取最新的计算结果,并更新缓存。这样,组件中绑定计算属性的地方就能显示最新的数据。

  4. Setter函数:虽然大多数情况下我们主要关注计算属性的getter函数,但computed属性实际上也支持setter函数。setter函数在计算属性的值被显式修改时调用。然而,在实际开发中,我们通常会避免直接修改计算属性的值,因为这样会破坏其响应式依赖和缓存机制。如果需要修改计算属性的值,通常应该修改它所依赖的原始响应式数据。

1.5 computed的示例

  1. 创建一个只读的计算属性 ref:

     const count = ref<number>(0)const plusOne = computed(() => count.value + 1)console.log(plusOne.value) // 2plusOne.value++ // 错误
    

    ee92445b.png

  2. 创建一个可写的计算属性 ref:

    const count = ref(1)
    const plusOne = computed({get: () => count.value + 1,set: (val) => {count.value = val - 1}
    })plusOne.value = 1
    console.log(count.value) // 0
    
  3. 调试:
    computed() 传入第二个参数,是一个包含了 onTrack 和 onTrigger 两个回调函数的对象:

    const plusOne = computed(() => count.value + 1, {onTrack(e) {console.log('当 count.value 被追踪为依赖时触发');},onTrigger(e) {console.log('count.value 被更改时触发');}
    })
    

computed 和 Methods 的区别

  1. Methods 是一种以命令式的方式处理数据的方式。在 Vue 实例中定义 methods 属性或在组件中使用 methods 选项来创建方法。

    methods 方法可以接受参数,并根据参数进行相应的操作。每次调用方法时,都会执行其中的代码并返回结果。
    Methods 的使用场景包括:
    事件处理:当需要处理用户交互事件时,可以使用方法。例如,点击按钮时执行特定的操作。
    复杂逻辑:当需要执行复杂的业务逻辑,或者需要进行条件判断和循环操作时,可以使用方法。
    需要注意的是,每次调用方法时,都会执行其中的代码,不会进行缓存。因此,如果方法中包含复杂的计算逻辑或者涉及频繁调用的场景,可能会对性能产生影响。

  2. 响应方式:Computed 根据依赖的数据进行缓存,只有在依赖数据变化时才重新计算;而 Methods 每次调用时都会执行其中的代码。
  3. 缓存机制:Computed 具有缓存机制,只有在依赖数据变化时才重新计算;而 Methods 每次调用都会执行其中的代码。
  4. 使用场景:Computed 适用于根据已有数据衍生新的数据和数据过滤/转换场景,并具有缓存机制提高性能;Methods 适用于处理事件和复杂逻辑的场景。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/696093.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux笔记5--shell命令2

文章目录 一. linux中的任务管理1. 图形界面2. 命令① top命令② grep命令③ ps命令补充&#xff1a; ④ kill命令图形界面杀死进程 二. 挂载(硬盘方面最重要的一个知识点)1. 什么是挂载2. 关于挂载目录① Windows② linux查看硬件分区情况(/dev下)&#xff1a;更改挂载目录结束…

视频剪辑的技巧:掌握如何高效批量调整视频尺寸的方法

在视频剪辑的过程中&#xff0c;调整视频尺寸是一个常见的需求。无论是为了适应不同平台的播放要求&#xff0c;还是为了统一多个视频的尺寸以提升观看体验&#xff0c;掌握高效批量调整视频尺寸的技巧都显得尤为重要。本文将为您详细介绍云炫AI智剪如何高效地进行这一操作&…

【计算机网络】数据链路层 组帧 习题4

组帧 发送方根据一定的规则将网络层递交的分组封装成帧(也称为组帧)。 组帧时&#xff0c;既要加首部&#xff0c;也要加尾部&#xff0c;原因是&#xff0c;在网络信息中&#xff0c;帧是以最小单位传输的。所以接收方要正确地接收帧&#xff0c;就必须清楚该帧在一串比特串中…

Find My腰包|苹果Find My技术与腰包结合,智能防丢,全球定位

腰包具有显瘦和显高的双重功效&#xff0c;它不仅能提高腰线、拉长腿部线条&#xff0c;还能遮住腹部多余的赘肉&#xff0c;从而在视觉上达到变高的效果&#xff0c;使整体看起来更加显瘦。除了时尚功能&#xff0c;腰包在运动中也有其独特的用途。例如&#xff0c;在跑步时&a…

tab 滑动小案例

效果&#xff1a; 代码&#xff1a; <template><view class"content"><view class"tab"><view v-for"(item,index) in dataList" :key"index" class"tab_item" click"slideTab(index)">…

48.乐理基础-音符的组合方式-休止符

休止符 音乐中总有一些停顿的地方&#xff0c;一次停顿多久是创作人固定好的&#xff0c;休止符就是用来表示每一次停顿多久 需要停顿的位置就用 0 来表示&#xff0c;数字 0 就是简谱中的休止符 音符有全音符、二分音符、四分音符、八分音符、十六分音符、三十二分音符等&…

Spring Boot项目怎么集成Gitee登录

一、背景 现在的越来越多的项目&#xff0c;需要集成第三方系统进行登录。今天我们以Spring Boot项目集成Gitee为例&#xff0c;演示一下怎么使用Oauth2协议&#xff0c;集成第三方系统登录。 不了解oauth2的&#xff0c;可以看我之前的文章。Ouath2是怎么实现在第三方应用认…

PyQt6--Python桌面开发(12.QpushButton按钮控件)

一.按钮类控件 二.QpushButton按钮控件 2.1QAbstractButton类属性 2.2QpushButton类属性

Handler详解

文章目录 主线程和子线程消息机制作用原理内存泄露HandlerThread含义 线程池参考链接 主线程和子线程 从用途上来说Android的线程主要分为主线程和子线程两类&#xff0c;主线程主要处理和界面相关的工作&#xff0c;子线程主要处理耗时操作。除Thread之外&#xff0c;Android…

背完这些软件测试核心面试题,offer轻松拿捏了!

你赞同过 软件测试和开发 相关内容 01、您所熟悉的测试用例设计方法都有哪些&#xff1f;请分别以具体的例子来说明这些方法在测试用例设计工作中的应用。 答&#xff1a;有黑盒和白盒两种测试种类&#xff0c;黑盒有等价类划分法&#xff0c;边界分析法&#xff0c;因果图法和…

研究生通用学术英语写作(刘美岩)教材电子版分享

研究生通用学术英语写作电子版资源分享 本着开源的思想&#xff0c;为了实现互通有无&#xff0c;诸位需要研究生通用学术英语写作电子版资源的朋友可以直接微信关注下面公众号&#xff0c;或者手动搜索莲花百货铺&#xff0c;在公众号中直接输入书名就可获得网盘链接&#xff…

数据结构-栈的讲解

栈的概念及结构 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。 进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底&#xff08;因为先进后出&#xff09;。栈中的数据元素遵守后进先出LIFO&#xff08;Last In Firs…