03-Vue基础-计算属性

Vue 计算属性

1. 计算属性简介

在模板中，使用插值方式可以绑定数据可表达式，但是表达式太长，会让模板过重且难以维护。例如：

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

在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量message的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。

所以，对于任何复杂逻辑，你都应当使用计算属性。

基础案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue计算属性</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 翻转字符串使用计算属性 -->
        {{ reversedText }}
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                text: '123,456'
            },
            computed: {
                reversedText() {
                    // this 指向当前实例
                    return this.text.split(',').reverse().join(',');
                }
            }
        });
    </script>
</body>
</html>

所有的计算属性都以函数的形式写在Vue实例内的computed选项内，最终返回计算后的结果。

2. 计算属性用法

在计算属性中，可以完成各种复杂逻辑，包括运算、函数调用等，只需最终返回一个结果即可。计算属性还可以依赖多个Vue实例的数据，只要任何一个数据变化，计算属性就会更新，视图也会更新。例如，下面的示例，展示了两个购物车包裹总价：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue计算属性</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>总价：{{ prices }}</h3>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                package1: [
                    {
                        name: 'iPhone7',
                        price: 7199,
                        count: 2
                    },
                    {
                        name: 'Ipad',
                        price: 2888,
                        count: 1
                    }
                ],
                package2: [
                    {
                        name: 'MacBook Pro',
                        price: 13000,
                        count: 1
                    },
                    {
                        name: 'HUAWEI',
                        price: 5699,
                        count: 2
                    }
                ]
            },
            computed: {
                prices() {
                    let prices = 0;
                    for(let i=0; i<this.package1.length; i++) {
                        prices += this.package1[i].price * this.package1[i].count;
                    }
                    for(let i=0; i<this.package2.length; i++) {
                        prices += this.package2[i].price * this.package2[i].count;
                    }
                    return prices;
                }
            }
        });
    </script>
</body>
</html>

上面的案例，当商品数量变化或商品增加时，计算属性prices就会自动更新，视图中的总价也会自动变化。

每一个计算属性都包含一个getter和setter属性，默认我们只会用到getter属性，用来读取计算结果。

当然必要时，也可以使用setter属性修改一个数据，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue计算属性</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>姓名：{{ fullName }}</h3>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                firstName: 'Jack',
                lastName: 'Green'
            },
            computed: {
                fullName: {
                    // getter 用于读取数据
                    get: function () {
                        return this.firstName + ' ' + this.lastName;
                    },
                    // setter 写入时触发
                    set: function (newValue) {
                        var names = newValue.split(' ');
                        this.firstName = names[0];
                        this.lastName = names[names.length -1];
                    }
                }
            }
        });
    </script>
</body>
</html>

当在控制台执行vm.fullName = 'John Doe'时，setter就会被调用，数据firstName和lastName都会相对更新，视图同样也会更新。

大部分情况下，我们只会使用默认的getter属性，业务中很少用到setter，所以在声明计算属性时，可以直接使用默认的写法，不必将getter和setter都声明。
计算属性还可以用于动态设置元素样式名称class和内联样式style。
计算属性也经常用来动态传递props。
计算属性不仅可以依赖当前实例的数据，也可以依赖其他实例的数据。

3. 计算属性缓存

我们可以发现一件事情，就是methods选项也可以达到computed的效果，那么两者的区别是什么呢？

区别是cumputed属性是基于它的依赖进行缓存的，一个计算属性所依赖的数据发生变化时，它才会重新取值，所以只要数据不变，计算属性就不更新。

4. 本章小结

本章节主要讲述了Vue的计算属性，以及它的一些用法和特性，后续会结合项目继续进行讲解。

当你发现你的才华撑不起你的野心，那就努力学习吧！

posted on 2020-01-19 18:07 cculin 阅读(121) 评论(0) 收藏举报