vue学习——计算属性缓存 vs 方法

本文通过一个Vue.js的示例,深入浅出地解释了计算属性与方法在性能上的区别。计算属性会根据其依赖进行缓存,只有当依赖发生变化时才会重新计算,而方法每次调用都会执行。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

归纳就一句话,计算属性与方法结果相同,性能不同
文档中这样描述:

计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。

通过一个demo可以很方便的理解

// html
<div id="app">
    <div v-for="item in [1,2,3,4]">
        <div> {{message}} </div>
        <div> {{ reversedMessage }} </div>
        <div> {{reversedMessageFun()}} </div>
    </div>
</div>

// js
computed: {
   reversedMessage: function() {
     console.log(123)
     return this.message.split('').reverse().join('')
   }
 },
 methods: {
  reversedMessageFun: function(){
     console.log(456)
     return this.message.split('').reverse().join('')
   }
 }


输出结果:
>123
>456
>456
>456
>456

这样就很方便理解根据依赖进行缓存了,只要message不变,计算属性就不会重新计算

### Vue.js 计算属性的使用方法与示例 #### 什么是计算属性Vue.js 中的计算属性是一种基于其依赖的数据进行声明式计算的方式。当定义一个计算属性时,Vue.js 自动追踪该属性所依赖的所有数据属性,并在其依赖发生改变时重新计算[^1]。 #### 如何定义计算属性计算属性可以通过 `computed` 属性Vue 实例中定义。它通常是一个对象,其中包含了 getter 和可选的 setter 方法。下面是一些常见的用法: --- #### 基本示例:简单的字符串反转 以下代码展示了如何创建一个用于反转字符串的计算属性: ```javascript new Vue({ el: '#app', data() { return { message: 'Hello Vue.js!' }; }, computed: { reversedMessage() { return this.message.split('').reverse().join(''); } } }); ``` 在这个例子中,每当 `message` 发生变化时,`reversedMessage` 都会被自动重新计算并返回新的值。 --- #### 进阶示例:带有条件逻辑的计算属性 如果需要根据某些条件来决定返回的结果,可以这样实现: ```javascript const app = Vue.createApp({ data() { return { score: 80, passingThreshold: 60 }; }, computed: { isPassing() { return this.score >= this.passingThreshold; } } }).mount('#app'); ``` 这里,`isPassing` 是一个布尔类型的计算属性,表示当前分数是否达到及格线。只要 `score` 或 `passingThreshold` 变化,都会触发重新计算[^2]。 --- #### 复杂示例:带 Setter 的计算属性 有些情况下可能还需要设置计算属性的值。这时可以提供一个自定义的 setter 函数: ```html <template> <div> <p>Count: {{ alwaysSmall }}</p> <button @click="alwaysSmall += 1">Increase</button> </div> </template> <script setup> import { ref, computed } from 'vue'; const count = ref(2); const alwaysSmall = computed({ get(previousValue) { if (count.value <= 3) { return count.value; } return previousValue || count.value; }, set(newValue) { count.value = newValue * 2; } }); </script> ``` 上述代码展示了一个具有复杂行为的计算属性 `alwaysSmall`,它的 getter 返回特定范围内的值,而 setter 则允许外部修改底层数据[^3]。 --- #### 性能优化:为什么优先选择计算属性而非方法? 虽然方法也可以完成类似的动态计算功能,但两者之间存在显著差异。计算属性具备缓存机制——只有在其依赖项发生变化时才会被重新求值;相比之下,每次调用方法都会执行一次完整的函数体。 因此,在涉及频繁渲染或者昂贵运算的情况下,推荐使用计算属性而不是方法。 --- #### 最佳实践注意事项 - **Getter 不应有副作用** 确保计算属性中的 getter 函数仅负责读取和转换现有状态,而不应该引发任何其他操作(如网络请求)。这有助于保持组件的行为更加直观且易于调试。 - **避免直接修改计算属性** 如果尝试直接更改某个只读型计算属性,则会在运行时抛出错误提示。对于这种情况,请改写成包含 setter 的形式。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值