vue计算属性的使用

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

    {{text.split(',').reverse().join(',')}}

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

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

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

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

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

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

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