Vue.js——计算属性(computed)(七)

野性酷女 2022-11-19 11:28 268阅读 0赞

# 计算属性 #

## 什么是计算属性？ ##

*  我们知道，在模板中可以直接通过插值语法显示一些data中的数据。
 *  但是在某些情况，我们可能需要**对数据进行一些转化**后再显示，或者需要将多个数据结合起来进行显示
    
     *  比如我们又firstName和lastName两个变量，我们需要显示完整的名称。
     *  但是如果多个地方都需要显示完整的名称，我们就需要写多个\{ \{firstName\}\}\{ \{lastName\}\}

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>01-计算属性的基本使用</title>
    </head>
    
    <body>
        <div id="app">
            <h2>{
       {firstName + ' ' + lastName}}</h2>
            <h2>{
       {firstName}} {
       {lastName}}</h2>
            <h2>{
       {getFullName()}}</h2>
    
        </div>
    
        <script src="../js/vue.js"></script>
    
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    firstName: 'Lebron',
                    lastName: 'James'
                },
                methods: {
                    getFullName() {
                        return this.firstName + ' ' + this.lastName;
                    }
                }
            })
        </script>
    </body>
    
    </html>

*  我们可以将上面的代码换成计算属性：
    
     *  OK，我们发现计算属性是写在实例computed选项中的。

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>01-计算属性的基本使用</title>
    </head>
    
    <body>
        <div id="app">
            <h2>{
       {firstName + ' ' + lastName}}</h2>
            <h2>{
       {firstName}} {
       {lastName}}</h2>
            <h2>{
       {getFullName()}}</h2>
            <h2>{
       {fullName}}</h2>
    
        </div>
    
        <script src="../js/vue.js"></script>
    
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    firstName: 'Lebron',
                    lastName: 'James'
                },
                // computed：计算属性()
                computed: {
                    fullName: function() {
                        return this.firstName + ' ' + this.lastName;
                    }
                },
                methods: {
                    getFullName() {
                        return this.firstName + ' ' + this.lastName;
                    }
                }
            })
        </script>
    </body>
    
    </html>

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wclNVCBq-1609508903750)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记三/1.jpg)\]][img-wclNVCBq-1609508903750_Users_mac_Desktop_vue_vue_1.jpg]

## 计算属性的复杂操作 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>02-计算属性的复杂操作</title>
    </head>
    
    <body>
        <div id="app">
            <h2>总价格：{
       {totalPrice}}</h2>
        </div>
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    books: [{
                        id: 110,
                        name: '深入理解计算机原理',
                        price: 119
                    }, {
                        id: 111,
                        name: '斗罗大陆之绝世唐门',
                        price: 643
                    }, {
                        id: 112,
                        name: 'JavaScript从入门到精通',
                        price: 99
                    }, {
                        id: 113,
                        name: '高等数学',
                        price: 37
                    }]
                },
                computed: {
                    totalPrice: function() {
                        let result = 0;
                        for (let i = 0; i < this.books.length; i++) {
                            result += this.books[i].price;
                        }
                        return result;
                    }
                }
            })
        </script>
    </body>
    
    </html>

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sutX2xSX-1609508903754)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记三/2.jpg)\]][img-sutX2xSX-1609508903754_Users_mac_Desktop_vue_vue_2.jpg]

## 计算属性的setter和getter ##

*  我们上面用到的计算属性看起来像个函数，但**实际上应该当成一个属性**。（使用的时候千万不要加小括号）

computed: {
      fullName: function() {
          return this.firstName + ' ' + this.lastName;
      }
    }

*  实际上，因为计算属性的set方法一般都不用，只有get所以**简化**了：

fullName: {
        // 一般情况set都没有，只有get
        set: function() {
    
        },
        get: function() {
            return this.firstName + ' ' + this.lastName;
        }
    }

## 计算属性的缓存 ##

*  我们可能会考虑这样一个问题：
    
     *  methods和computed看起来都可以实现我们的功能
     *  那么为什么要多一个计算属性这个东西呢？
     *  **原因**：计算属性会进行缓存，如果多次使用，计算属性只会调用一次。
 *  我们看下面的代码，将methods与computed进行比较。

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>04-计算属性和methods的对比</title>
    </head>
    
    <body>
        <div id="app">
            
            <h2>{
       {firstName}} {
       {lastName}}</h2>
            
            <h2>{
       {getFullName()}}</h2>
            <h2>{
       {getFullName()}}</h2>
            <h2>{
       {getFullName()}}</h2>
            <h2>{
       {getFullName()}}</h2>
            <h2>{
       {getFullName()}}</h2>
            
            <h2>{
       {fullName}}</h2>
            <h2>{
       {fullName}}</h2>
            <h2>{
       {fullName}}</h2>
            <h2>{
       {fullName}}</h2>
            <h2>{
       {fullName}}</h2>
            <h2>{
       {fullName}}</h2>
    
        </div>
    
        <script src="../js/vue.js"></script>
    
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    firstName: 'Lebron',
                    lastName: 'James'
                },
                // computed：计算属性()
                computed: {
                    fullName: function() {
                        console.log('通过computed');
                        return this.firstName + ' ' + this.lastName;
                    }
                },
                methods: {
                    getFullName() {
                        console.log('通过methods');
                        return this.firstName + ' ' + this.lastName;
                    }
                }
            })
        </script>
    </body>
    
    </html>

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qinCPM5G-1609508903755)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记三/3.jpg)\]][img-qinCPM5G-1609508903755_Users_mac_Desktop_vue_vue_3.jpg]

> 相比之下，每当触发重新渲染时，调用方法将**总会**再次执行函数。
> 
> 我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 **A**，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 **A**。如果没有缓存，我们将不可避免的多次执行 **A** 的 getter！如果你不希望有缓存，请用方法来替代。

[img-wclNVCBq-1609508903750_Users_mac_Desktop_vue_vue_1.jpg]: /images/20221119/bed78f007d5b4b86a0e5c62cc1616dbb.png
[img-sutX2xSX-1609508903754_Users_mac_Desktop_vue_vue_2.jpg]: /images/20221119/aedbff8fefb84b7abc384ccf9b0742fe.png
[img-qinCPM5G-1609508903755_Users_mac_Desktop_vue_vue_3.jpg]: /images/20221119/1aed490859ac4aa7875503136aea3295.png