Vue – 计算属性 computed 基本使用

简介

计算属性指的是通过一系列运算之后，最终得到一个属性值。这个动态计算出来的属性值可以被模板结构或methods 方法使用。

使用方法

      computed: {
        foo() {
          return 
        }
      }

计算属性使用 vm 的 computed 属性定义，定义使用 方法声明 的方式，计算属性中的定义方法必须有返回值

在插值中可以像 data 中的值一样使用计算属性

{{ foo }}

使用对象方法

computed 除了支持函数类定义外，还支持对象类定义，它包含 get 方法和 set 方法。

get 方法

定义 get 方法可以自定义提交计算属性的数据，使用对象属性的方式定义，get 方法必须返回一个值

computed: {
   foo: {
       get() {
            return this.foo.data;
        }
 },

set 方法

定义 set 方法和 get 方法差不多，set 方法会带来一个参数 value ,这个是当计算属性进行赋值时的值

computed: {
   foo: {
       set( value ) {
            this.foo.data = value;
        }
 },

注意：set 方法可以不被定义，不定义 set 方法则当计算属性进行赋值时，不会有任何意义。

特点

虽然计算属性在声明的时候被定义为方法，但是计算属性的本质是一个属性

计算属性会缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行运算

计算属性 vs 方法

相对于方法来说，计算属性会缓存计算的结果，只有计算属性的依赖项发生变化时，才会重新进行运算。因此 计算属性的性能更好