Vue Computed Option Implementation

Computed Options Demo

<template>
  <div id="Application">
    <div>Count value: {{count}}</div>
    <div>Type value: {{type}}</div>
    <button @click="add">Add</button>
    <div>set() method invocation status: {{msg}}</div>
    <button @click="change">Change</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0,
      msg: "set method not invoked"
    }
  },
  computed: {
    type: {
      get() {
        return this.count > 3 ? "Large" : "Small"
      },
      set(newValue) {
        this.msg = "set method invoked";
      }
    }
  },
  methods: {
    add() {
      this.count++
    },
    change() {
      // Directly changing the computed property value triggers the set method invocation
      this.type = "Huge";
    }
  }
};
</script>

Function-based Computed Properties

::: vue-demo Function-based Computed Properties

<template>
  <div id="Application">
    <div>Count value: {{count}}</div>
    <div>Type value: {{typeFunc()}}</div>
    <button @click="add">Add</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0,
    }
  },
  methods: {
    add() {
      this.count++
    },
    typeFunc() {
      return this.count > 3 ? "Large" : "Small"
    }
  }
};
</script>