Vue3进阶：计算属性（computed）的介绍、使用详解和代码实战案例

计算属性的基本概念

计算属性的特点

计算属性的优势

计算属性的应用场景

计算属性的注意事项

代码示例1：计算属性（computed）的使用方法

代码示例2：computed setter

代码示例3：嵌套数组的应用场景

代码示例4：计算属性实现数据处理

总结

更多关于Vue前端相关技术点，敬请关注公众号：CTO Plus后续的发文，有问题欢迎后台留言交流。

注意：由于排版太费时间，所以还是多多注重技术干货的内容吧。

接下来的一段时间我将除了总结下关于【Python进阶系列】的知识点分享文章外，还将为各位前端读者（全栈开发者）分享下关于前端开发框架Vue3的内容，当然还会包括：H5、CSS3、JavaScript、JQuery、前端开发规范等前端内容。

然后对Python开发感兴趣的读者也可以关注公众号CTO Plus，关注【Python进阶系列】的内容，同时涉及到Web开发、爬虫开发、操作系统开发、网络安全开发应用领域这块，可以分别参考我的公众号CTO Plus【Flask进阶系列】、【Django进阶系列】、【DRF进阶系列】、【互联网分布式爬虫系列】和【网络安全系列】的内容，敬请关注，欢迎交流。

以下是【Vue3进阶系列】的部分内容

Vue 3是一款流行的JavaScript框架，用于构建现代的交互式Web应用程序。它提供了许多功能和工具，以便开发人员可以更轻松地构建复杂的应用程序。其中一个强大的功能是计算属性（computed properties）。

在前面的几篇文章中，我也分别总结介绍了Vue的组件、父子组件之间的通信的详细使用，具体可以参考公众号CTO Plus前面的文章：《Vue3进阶：组件开发指南之使用 Props 传递和管理组件之间的数据》和《Vue3进阶：组件开发指南之构建可复用的UI组件详解和代码示例》。

Vue 3中的计算属性是Vue中的一种特殊属性，它基于现有数据进行计算（根据其他属性的值进行动态计算），并返回一个新的值。与方法（methods）相比，计算属性的特点是具有缓存机制，只有依赖的数据发生改变时才会重新计算。关于methods的使用可以参考公众号CTO Plus前面的文章，当然后面的文章也会专门做介绍。

计算属性在Vue开发中非常常用，它既能提升开发效率，又能使代码更加简洁和可读性更高。在本文中，我将为大家详细介绍Vue 3中的计算属性的概念、用法和优势。

计算属性的基本概念

计算属性的基本概念是根据现有的响应式数据生成新的派生数据。它们可以通过在Vue组件的计算属性部分定义来创建。计算属性本质上是一个函数，该函数返回我们想要的派生数据。Vue会自动追踪依赖的数据，并在需要的时候重新计算。

计算属性的特点

计算属性的特点是，当依赖的属性发生变化时，计算属性会自动重新计算并更新其值。这意味着我们不需要手动去监听属性的变化，也不需要手动去更新计算属性的值，Vue 会自动帮我们完成这些操作。

计算属性的另一个特点是，它会进行缓存。也就是说，只要依赖的属性没有发生变化，计算属性就会返回之前计算好的值，而不会重新计算。这样可以提高性能，避免不必要的计算。

除了getter，计算属性还可以提供一个 setter，用于处理属性的赋值操作。通过setter，我们可以实现对计算属性的双向绑定。这点将在下面的内容进行介绍。

计算属性的优势

这里我总结了几点使用计算属性的以下几个优势：

缓存机制：计算属性具有缓存机制，只有依赖的数据发生改变时才会重新计算。这样可以避免不必要的计算，提高应用程序的性能。
声明式编程：计算属性允许我们以声明式的方式定义派生数据，而不需要在每个位置手动计算它们的值。这使得代码更加清晰、简洁和易于维护。
依赖追踪：Vue会自动追踪计算属性的依赖，并在依赖发生变化时重新计算。这使得我们无需手动跟踪依赖和管理更新。

计算属性的应用场景

下面总结的是一些常见的应用场景：

1. 对数据进行格式化：例如，将时间戳转换为日期格式、将数字格式化为货币格式等。

2. 对数据进行过滤和排序：例如，根据条件过滤数组、根据字段排序数组等。

3. 对数据进行计算和聚合：例如，计算数组的总和、计算数组的平均值等。

4. 对数据进行筛选和搜索：例如，根据关键字筛选数组、根据条件搜索数组等。

通过使用计算属性，我们可以将这些复杂的数据处理逻辑封装起来，使代码更加简洁和可读。同时，计算属性的缓存和自动更新机制也能提高应用程序的性能和响应速度。计算属性的实战案例非常丰富，我将在后面的文章中做案例详解。

计算属性的注意事项

在使用使用计算属性时需要注意以下几点：

计算属性应该是纯函数：计算属性的值应该只依赖于其他响应式数据，而不应该有副作用。
不要在计算属性内部修改数据：计算属性的“getter”函数应该只返回计算的值，而不应该在内部修改依赖的数据。这样会导致无限循环更新。
对于复杂的计算，考虑使用方法或Watchers：如果计算涉及复杂逻辑或异步操作，可能需要考虑使用方法或Watchers来替代计算属性。

代码示例1：计算属性（computed）的使用方法

Vue的计算属性，我们通过选项型API关键词：computed来实现，我们就是通过这个选项API来定义计算属性的。计算属性在处理一些复杂逻辑时非常有用。

以下是一个反转字符串的例子：

在公众号CTO Plus前面的历史文章中，我们使用过插值表达式，首先是一个插值表达式的代码示例：

<p>BLOG:{
   
   {blog}}</p><p>BLOG:{
   
   {blog.split("/").reverse().join(' ')}}</p><p>BLOG:{
   
   {blog.length}}</p><p>TITLE:{
   
   {title}}</p><p>TITLE:{
   
   {title.length}}</p><script>const VueApp = {
   
       data() {
   
           return {
   
               "blog":"https://mp.weixin.qq.com/s/0yqGBPbOI6QxHqK17WxU8Q",            "title":"公众号：CTO Plus",            "age":28        }    }}Vue.createApp(VueApp).mount('body')

接下来我们看看使用了计算属性的实例：

<p>BLOG:{
   
   { blog }}</p><p>BLOG convert:{
   
   { reversedContent }}</p><p>TITLE:{
   
   { title }}</p><p>TITLE convert:{
   
   { titleConvert }}</p><script>    const VueApp = {
   
           data() {
   
               return {
   
                   "blog": "https://mp.weixin.qq.com/s/0yqGBPbOI6QxHqK17WxU8Q",                "title": "公众号：CTO Plus",                "age": 28            }        },        computed: {
   
               // 计算属性的getter            reversedContent: function () {
   
                   // this指向实例                return this.blog.split("/").reverse().join(" ")            },            titleConvert: function () {
   
                 return this.title.split(" ").reverse().join(" ")            }        }    }    Vue.createApp(VueApp).mount('body')</script>

输出结果

这个代码中声明了两个计算属性：reversedContent和titleConvert。提供的函数将用作属性reversedContent 的 getter。reversedContent 依赖于blog，在blog发生改变时，reversedContent也会更新。

代码示例2：computed setter

计算属性提供了getter和setter方法，其中getter用于将计算属性计算出来的代码。setter用于为计算属性赋值的代码。同时，计算属性（computed）默认只有 getter，不过我们在需要时也可以提供一个setter，方法如下：

<p>BLOG：{
   
   { blog }}</p><p>TITLE：{
   
   { title }}</p>
<script>    const VueApp = {
   
           data() {
   
               return {
   
                   "blog": "https://mp.weixin.qq.com/s/0yqGBPbOI6QxHqK17WxU8Q",                "title": "公众号：CTO Plus",            }        },        computed: {
   
               site: {
   
   // 这里就是getter 也可以写成 get(){}                get: function () {
   
                       return this.blog + " " + this.title                },// 这里就是setter 也可以写成 set(value){}                set: function (newValue) {
   
                       var blogs = newValue.split(" ")                    this.blog = blogs[0]                    this.title = blogs[blogs.length - 1]                }            }        }    }    vueObj = Vue.createApp(VueApp).mount('body')    document.write('blog：' + vueObj.blog + "<br>")    document.write("title：" + vueObj.title + "<br>")
    vueObj.site = "CTO Plus"
    document.write('blog：' + vueObj.blog + "<br>")    document.write("title：" + vueObj.title + "<br>")</script>

从实例运行结果看在运行 vueObj.site = 'CTO Plus'; 时，setter 方法会被调用，vueObj.blog和vueObj.title也会被对应更新。

代码示例3：嵌套数组的应用场景

接下来看下面的例子，假设有一个嵌套数组对象author：

Vue.createApp({
   
     data() {
   
       return {
   
         author: {
   
           name: 'steverocket,        books: [          'author1 - SteveRocket',          'author3 – CTO Plus',          'author5 – 微信公众号'        ]      }    }  }})

需求是，如果该作者出过书，则显示yes，否则显示no。我们可以在HTML的span标签中插入JS表达式来实现：

<div id="computed-basics">  <p>Has published books:</p>  <span>{
   
   { author.books.length > 0 ? 'Yes' : 'No' }}</span></div>

这个三元表达式不是简单的和声明性的（尽管相对写个方法，写个类，这起码还是一条语句。）

我们必须先看一下它，然后才能意识到它执行的操作取决于 author.books。如果要在模板中多次进行这个判断，问题会变得更糟。

Vue的设计理念强调，对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性来实现，而不是将它嵌入到模板中（实际上99%的业务逻辑，你在模板中也写不下）。

正确的做法

<div id="computed-basics">  <p>Has published books:</p>  <span>{
   
   { publishedBooksMessage }}</span></div>Vue.createApp({
   
     data() {
   
       return {
   
         author: {
   
           name: 'steverocket,        books: [          'author1 - SteveRocket',          'author3 – CTO Plus',          'author5 – 微信公众号'        ]      }    }  },  computed: {
   
       // 计算属性的 getter    publishedBooksMessage() {
   
         // `this` 指向 vm 实例      return this.author.books.length > 0 ? 'Yes' : 'No'    }  }}).mount('#computed-basics')

代码还是相差不多，不过我们将它放到computed选项卡里，以一个属性的形式存在。所谓的计算，就是指这个属性不是直接可以得到的，而是需要通过执行一些计算代码，转换出来的。

我们可以尝试清空 data 中 books数组的值，你将看到 publishedBooksMessage 属性会相应地更改。每个计算属性都类似data选项卡中的属性，会自动绑定到应用实例上。

并且，Vue 知道 vm.publishedBookMessage依赖于 vm.author.books，因此当 vm.author.books发生改变时，所有依赖 vm.publishedBookMessage 的绑定也会更新。

也就是说，计算属性不但是响应式的，并且每当它的依赖发生了变化，它本身也会跟着重新计算！

代码示例4：计算属性实现数据处理

下面是一个示例，展示了如何使用计算属性来实现数据的处理：

<template>  <div>    <p>原始数据：{
   
   { data }}</p>    <p>计算属性：{
   
   { computedData }}</p>  </div></template>
<script>export default {
   
     data() {
   
       return {
   
         data: 10    };  },  computed: {
   
       computedData() {
   
         return this.data * 2;    }  }};</script>

在上述代码中，我们定义了一个名为 `data` 的数据属性，并将其初始化为 10。然后，我们使用计算属性 `computedData` 来对 `data` 进行处理，将其乘以 2，并将结果展示在模板中。

总结

总的来说，Vue 的计算属性是一种非常强大和实用的特性，它提供了一种简洁、可复用和高效的方式来处理数据。通过使用计算属性，我们可以对数据进行处理和转换，从而得到我们想要的结果。无论是对数据进行格式化、过滤和排序，还是进行计算和聚合，计算属性都能帮助我们轻松地实现这些功能。希望通过本文的介绍和实战案例，你能更好地理解和应用 Vue 的计算属性。

参考阅读：

《Vue3进阶：常用的指令缩写详解，以及代码使用示例》

《Vue3进阶：简化前端开发的利器，以及常用指令汇总详解》

大前端专栏

https://blog.csdn.net/zhouruifu2015/category_5734911.html

更多精彩，关注我公号，一起学习、成长