Vue入门教程05-计算属性-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44588191/article/details/103082191

本文深入探讨Vue中的计算属性，包括其基本用法、与方法的区别，以及如何利用getter和setter进行读取和设值操作。通过实例展示了计算属性在处理复杂逻辑时的优势，以及它如何提高代码的可读性和效率。

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

一、计算属性

计算属性使用computed关键词，主要用于处理一些复杂逻辑，比如使用以下方式在模板中实现字符反转的逻辑时，模板显得比较混乱：

  <div id="hello">
    {{ msg.split('').reverse().join('') }}
  </div>

在这里改用计算属性实现：

<template>
  <div id="hello">
    <p>原内容: {{ msg }}</p>
    <p>反转后内容: {{ reversedMsg }}</p>
  </div>
</template>
<script>
  export default {
    name: 'hello',
    data () {
      return {
        msg:'abcdef'
      }
    },
    computed:{
      reversedMsg: function () {
        return this.msg.split('').reverse().join('')
      }
    }
  }
</script>

在上面程序中，定义一个computed并在其中声明一个计算属性 reversedMsg（默认是getter属性），当msg 发生改变时，会触发reversedMsg。

二、计算属性与方法的区别

也可以使用 methods 来替代 computed，执行结果是一样的。不同之处在于， computed 基于依赖缓存，只有依赖内容发生改变时才会重新取值。也就是msg没有发生改变的前提下，多次访问 reversedMsg 计算属性会立即返回之前的计算结果，而不会再次执行函数。
而 methods 在重新渲染的时候，总会重新调用执行。如果不希望使用缓存，则可以使用 methods 属性。

三、计算属性的setter方式

我们可以增加get、set方式的定义来实现getter读取、setter设值的操作：

<template>
  <div id="hello">
    <p>内容: {{ msg }}</p>
    <p>新设置的内容: {{ reversedMsg ='123456'}}</p>
    <p>反转后内容: {{ reversedMsg }}</p>
  </div>
</template>
<script>
  export default {
    name: 'hello',
    data () {
      return {
        msg:'abcdef'
      }
    },
    computed:{
      reversedMsg:{
        get: function () {
          return this.msg.split('').reverse().join('')
        },
        set: function (newValue) {
          this.msg = newValue;
        }
      }
    }
  }
</script>