vue计算属性computed简单使用

computed的作用

computed用data中现有的属性计算出一个新的属性，叫做计算属性，计算属性和data中属性在{{}}写法和属性一样，例如计算属性name写为<div>{{name}}</div>

computed的定义位置

computed的定义位置和methods还有data为同级写法为computed: {}

<script>
export default {
  data() {
    return {
    }
  },
  computed: {},
  methods: {},
}
</script>

计算属性的属性名

计算属性的属性名需要写在computed中

计算属性的属性名里面有getter和setter函数

get的作用 现有的属性计算出新的计算属性来使用

get在初次使用计算属性的时候触发1次，后续直接读取计算属性的缓存，例如下列完整代码中name属性即使在模板上写入多个也只会触发一次get

但计算属性依赖的数据发生变化时get也会触发，例如下面完整代码中的计算属性name，如果platform或position属性的值被修改get就会触发

名称：<span>{{name}}</span>
名称：<span>{{name}}</span>
名称：<span>{{name}}</span>

set的作用 计算属性的时候必须写set函数去相应修改，且set中要引起计算时依赖的数据发生改变

set在计算属性被修改的时候触发

//完整代码
<template>
  <div>
    <div>
      平台：<input type="text" v-model="platform">
      职位：<input type="text" v-model="position">
      名称：<span>{{name}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      platform: '微信',
      position: '客服',
    }
  },
  computed: {
    name: {
      get() {
        return this.platform + this.position;
      },
      set(val) {
        console.log(val);
      }
    }
  }
}
</script>

get属性使用较多，set属性使用场景比较少

如果确定不会修改计算属性的值可以简化掉set，简写计算属性的函数

计算属性简写：get函数简写为:function() {}

  computed: {
    name: function {
        return this.platform + this.position;
    }
  }

计算属性再简写：get函数简写为计算属性名的函数

  computed: {
    name {
        return this.platform + this.position;
    }
  }

最后简写完后的代码

<template>
  <div>
    <div>
      平台：<input type="text" v-model="platform">
      职位：<input type="text" v-model="position">
      名称：<span>{{name}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      platform: '微信',
      position: '客服',
    }
  },
  computed: {
    name() {
      return this.platform + this.position;
    }
  }
}
</script>