Vue计算属性computed的全面解析

前言

一直以来对computed这个计算属性都只停在一个大概的认知中，最近特意仔细研读相关资料，亲测后逐渐了解了其特性。

正文

computed

1.watch擅长处理的场景：一个数据影响多个数据

2.computed擅长处理的场景：一个数据受多个数据影响

 特点：

1.初始化/依赖属性（即data的return返回对象的属性）改变时执行(前提是在页面调用计算属性)

2.在计算属性函数执行后会缓存返回值

3.计算属性返回值就是计算属性的值

4.当依赖属性未改变时调用计算属性则直接返回缓存的值

注意：computed属性名不可与data的return返回对象的属性重名，否则会报错。

用处：需要依赖别的属性来动态获得值的时候或大量重复计算时可以使用 computed

例：

    data() {
      return {
        msg:''
      }
    },
    computed: {
      test: function(){//test为计算属性，调用时和调用属性一样调用test即可
        console.log('执行了！')
        return 'http://' + this.msg//msg是依赖属性，改变时会执行test函数
      }
    }

 

需要特别注意的是依赖属性为数组时,会自动把数组转化为字符串；为对象时，会变为[object Object]

上面的写法中,计算属性不能被修改，如果修改了，就会报下面的错误：

上面错误的原因是computed默认只有getter，所以当你需要修改你所设置的计算属性时必须为它提供一个setter，如下例：

初始化/当计算属性test依赖的响应式属性msg变化时,会执行get(),当计算属性test变化时会执行set(),且set中的参数就是计算属性test的最新值

下例中set()中的赋值是在计算属性test改变时赋值给依赖属性msg,这样两值改变另一方都会改变

    data() {
      return {
        msg:'12345'
      }
    },
    computed: {
      test: {
        get:function () {
          console.log('当依赖的响应式属性（msg）被修改时执行！')
          return this.msg.split('').reverse().join(''); //这里的返回值就是计算属性的最新值,可在此处修改计算属性的值
        },
        set:function (val) {//val就是计算属性的最新属性值
          console.log('当计算属性test被修改时执行！')
          this.msg = val;
          return val;
        }
      }
    }