vue计算属性的使用

vue计算属性的使用

我们有时候会在模板中绑定表达式来做简单的数据处理，但是如果表达式太长，就会变得臃肿难以维护，比如

<div>
    {{text.split(',').reverse().join(',')}}
</div>

表达式里面包含了3个操作，有时候可能会更加复杂，这时我们可以使用计算属性。如下

<template>
    <div>
        {{reversedText}}
    </div>
</template>
 
<script>
    export default {
        data(){
            return{
                text: '123,456'
            }
        },
        computed: {
            reversedText: function () {
                //这里的this指向的是当前的vue实例
                return this.text.split(',').reverse().join(',');  //如果这两的text是后台接受的数据，最好加个判断数据为不为空
            }
        }
    }
</script>

在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以，计算属性还可以依赖多个

数据，只要其中任何一个数据变动，计算都会重新执行。例如：

<template>
    <div>
        总价：{{price}}
    </div>
</template>
 
<script>
    export default {
        data(){
            return{
                package1: [
                    {
                        name: 'iPhoneX',
                        price: 300,
                        count: 1
                    },
                    {
                        name: 'iPad',
                        price: 100,
                        count: 2
                    }
                ],
                package2: [
                    {
                        name: 'apple',
                        price: 2,
                        count: 5
                    },
                    {
                        name: 'orange',
                        price: 1,
                        count: 10
                    }
                ]
            }
        },
        computed: {
            price: function () {
                var price = 0;
                for(var i = 0; i < this.package1.length; i++){
                    price += this.package1[i].price * this.package1[i].count
                }
                for(var i = 0; i < this.package2.length; i++){
                    price += this.package2[i].price * this.package2[i].count
                }
                return price;
            }
        }
    }

当package1或者package2中price和count有任何变动时，计算属性都会price都会自动更新，视图中的总价也会自动变动。

每个计算属性都包含一个getter和setter，上面的例子都是计算属性的默认用法，只是利用了getter来读取。计算属性提供的setter函数，当你手动修改计算属性的值时，就可以触发setter函数，执行一些操作。例如

<template>
    <div>
        姓： {{firstName}}<br>
        名： {{lastName}}<br>
        姓名：{{fullName}}
    </div>
</template>
 
<script>
    export default {
        data(){
            return{
                firstName: 'wang',
                lastName: 'leilei'
            }
        },
        computed: {
            fullName: {
                //getter用于读取
                get: function () {
                    return this.firstName + ' ' + this.lastName;
                },
                set: function (newValue) {
                    var names = newValue.split(' ');
                    this.firstName = names[0];
                    this.lastName = names[names.length - 1];
                }
            }
        }
    }
</script>

上面这个例子中，当改变fullName的值改变，this.fullName = "Jon Snow"; firstName和lastName的值也会跟着改变。

就算属性还有两个使用小技巧容易被忽略：一个是计算属性可以依赖其他计算属性；一个是计算属性不仅可以依赖当前vue实例，还可以依赖其他实例的数据！