[Vue3] Computed Property and Watcher

The computed property allows to dynamically computed value and the watcher allows monitoring the values.

Let's figure out it with simple examples.

Create a Project

Let's create a project first.

2021.06.02 - [Web/JavaScript] - [Vue] Getting Started with Vue3 + TypeScript + TailwindCSS

Computed Properties

<h2 class="mb-2 text-xl font-medium text-green-600">
  Computed Property: Calculate Price
</h2>
<div>Apple: ₩500</div>
<input type="number" v-model="count" class="my-2 px-2 text-gray-700" />
<div>Total Price: ₩{{ totalPrice }}</div>

This example has an input element to get input from a user.

data: function () {
  return {
    count: 0,
  };
},
computed: {
  totalPrice: function (): number {
    return this.count * 500;
  },
},

This example automatically calculates the value every time a user inputs.

 

You can use the computed property with multiple values.

<h2 class="mt-8 mb-2 text-xl font-medium text-green-600">
  Computed Property: Calculate Color
</h2>
<div class="grid grid-cols-2 gap-4">
  <div class="grid grid-cols-2 text-center">
    <div>R</div>
    <input
      type="range"
      id="red"
      name="red"
      v-model="rValue"
      min="0"
      max="255"
    />
    <div>G</div>
    <input
      type="range"
      id="green"
      name="green"
      v-model="gValue"
      min="0"
      max="255"
    />
    <div>B</div>
    <input
      type="range"
      name="blue"
      id="blue"
      v-model="bValue"
      min="0"
      max="255"
    />
  </div>
  <div v-bind:style="{ backgroundColor: mixColor }" class="w-4/12"></div>
</div>

This example has three range inputs for color.

data: function () {
  return {
    rValue: 0,
    gValue: 0,
    bValue: 0,
  };
},
computed: {
  mixColor: function (): string {
    return `RGB(${this.rValue},${this.gValue},${this.bValue})`;
  },
},

It combines the values of the three inputs and calculates the mixed color dynamically.

I'm impressed with Vue's rendering speed.

Watcher

<h2 class="mt-8 mb-2 text-xl font-medium text-green-600">Watcher</h2>
<div>Count Down: {{ remain }}</div>
<button @click="countDown" class="btn mt-2">Count Down</button>

data: function () {
  return {
    remain: 0,
    timerObj: 0,
  };
},
methods: {
  countDown: function () {
    this.remain = 10;
    this.timerObj = setInterval(() => {
      this.remain--;
    }, 1000);
  },
},
watch: {
  remain: function () {
    if (this.remain <= 0) {
      alert("Timeout");
      clearInterval(this.timerObj);
    }
  },
},

If you click the Count Down button, this example counts down from 10.

In this example, Vue watcher monitors the count value and alerts you when the specific value is reached.