Vue.js 3.0 Tutorial

Vue.js 3.0 Component Advanced

Vue.js 3.0 Transitions & Animations

Vue.js 3.0 Reusable & Combinable

Vue.js 3.0 Advanced

Vue.js 3.0 Tools

Vue.js 3.0 Scale

Vue.js 3.0 Accessibility

Vue.js 3.0 Migrating from Vue2

Vue.js 3.0 Contribute Documentation

Vue.js 3.0 API References

Vue.js 3.0 Style Guide

Vue 3.0 Style Guide

Vue 3.0 Reactive API Computed and watch

In Vue 3, the Reactive API provides several ways to manage and react to changes in your application's state. Two key functions it offers are computed and watch.

Let's explore these in more detail:

1. Computed Properties

A computed property is essentially a cached, reactive value that is automatically updated when its dependencies change. You define a computed property using the computed function:

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);

    return {
      count,
      doubleCount
    }
  }
}
</script>

In this example, doubleCount is a computed property that depends on count. Whenever count changes, doubleCount is automatically updated.

2. Watching Reactive Sources

The watch function allows you to observe changes in reactive sources and react to them. A reactive source can be a ref, a computed property, or even a function that returns a reactive source:

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => { count.value++ };

    watch(count, (newValue, oldValue) => {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    });

    return {
      count,
      increment
    }
  }
}
</script>

In this example, the watch function is used to observe changes to count. Whenever count changes, the callback function is invoked with the new and old value.

Remember, you should always use these APIs to react to changes in your state, rather than manipulating the DOM directly. This will ensure your application remains reactive and efficient.

Vue 3.0 Computed Properties vs. Methods:

Computed properties are cached based on their dependencies and are reactive.
Methods are re-invoked each time they are called.

<template>
  <div>
    <p>Computed Property: {{ computedProperty }}</p>
    <p>Method: {{ method() }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataValue: 10,
    };
  },
  computed: {
    computedProperty() {
      return this.dataValue * 2;
    },
  },
  methods: {
    method() {
      return this.dataValue * 2;
    },
  },
};
</script>

Computed Properties and Reactivity in Vue 3.0:

Computed properties automatically update when their dependencies change.

<template>
  <div>
    <p>Data Value: {{ dataValue }}</p>
    <p>Computed Property: {{ computedProperty }}</p>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const dataValue = ref(10);

    const computedProperty = computed(() => {
      return dataValue.value * 2;
    });

    return {
      dataValue,
      computedProperty,
    };
  },
};
</script>

Vue 3.0 Computed Properties Caching:

Computed properties are cached to avoid unnecessary re-computation.

<template>
  <div>
    <p>Data Value: {{ dataValue }}</p>
    <p>Computed Property: {{ computedProperty }}</p>
    <button @click="updateData">Update Data</button>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const dataValue = ref(10);

    const computedProperty = computed(() => {
      console.log('Computed Property Recomputed');
      return dataValue.value * 2;
    });

    const updateData = () => {
      dataValue.value += 5;
    };

    return {
      dataValue,
      computedProperty,
      updateData,
    };
  },
};
</script>

Watching for Changes in Vue 3.0 with Watch:

Use the watch function to react to changes in reactive data.

<template>
  <div>
    <p>Data Value: {{ dataValue }}</p>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const dataValue = ref(10);

    watch(
      () => dataValue.value,
      (newValue, oldValue) => {
        console.log(`Data Value changed from ${oldValue} to ${newValue}`);
      }
    );

    return {
      dataValue,
    };
  },
};
</script>

Vue 3.0 Watch Options and Usage:

Use options with the watch function for more control.

<template>
  <div>
    <p>Data Value: {{ dataValue }}</p>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const dataValue = ref(10);

    watch(
      () => dataValue.value,
      {
        handler: (newValue, oldValue) => {
          console.log(`Data Value changed from ${oldValue} to ${newValue}`);
        },
        immediate: true, // Trigger handler immediately
        deep: true, // Watch nested properties
      }
    );

    return {
      dataValue,
    };
  },
};
</script>

Vue 3.0 Watch Deep Option:

Use the deep option to watch nested properties.

<template>
  <div>
    <p>Data Value: {{ dataValue }}</p>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const dataValue = ref({ count: 10 });

    watch(
      () => dataValue.value,
      {
        handler: (newValue, oldValue) => {
          console.log('Data Value changed:', newValue);
        },
        deep: true, // Watch nested properties
      }
    );

    return {
      dataValue,
    };
  },
};
</script>

Vue 3.0 Watch Immediate Option:

Use the immediate option to trigger the handler immediately.

<template>
  <div>
    <p>Data Value: {{ dataValue }}</p>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const dataValue = ref(10);

    watch(
      () => dataValue.value,
      {
        handler: (newValue, oldValue) => {
          console.log(`Data Value changed from ${oldValue} to ${newValue}`);
        },
        immediate: true, // Trigger handler immediately
      }
    );

    return {
      dataValue,
    };
  },
};
</script>

Vue 3.0 Watch Multiple Properties:

Watch multiple properties using an array or an object.

<template>
  <div>
    <p>Data Value 1: {{ dataValue1 }}</p>
    <p>Data Value 2: {{ dataValue2 }}</p>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const dataValue1 = ref(10);
    const dataValue2 = ref(20);

    watch(
      [() => dataValue1.value, () => dataValue2.value],
      (values, oldValues) => {
        console.log('Data Values changed:', values);
      }
    );

    return {
      dataValue1,
      dataValue2,
    };
  },
};
</script>

Computed Properties and Watch in Vue 3.0:

Combine computed properties and watch for advanced reactivity.

<template>
  <div>
    <p>Data Value: {{ dataValue }}</p>
  </div>
</template>

<script>
import { ref, computed, watch } from 'vue';

export default {
  setup() {
    const dataValue = ref(10);

    const computedProperty = computed(() => dataValue.value * 2);

    watch(
      () => computedProperty.value,
      (newValue, oldValue) => {
        console.log(`Computed Property changed from ${oldValue} to ${newValue}`);
      }
    );

    return {
      dataValue,
    };
  },
};
</script>

Using Computed Properties with Watch in Vue 3.0:

Utilize computed properties in conjunction with watch for optimized reactivity.

<template>
  <div>
    <p>Data Value: {{ dataValue }}</p>
  </div>
</template>

<script>
import { ref, computed, watch } from 'vue';

export default {
  setup() {
    const dataValue = ref(10);

    const computedProperty = computed(() => dataValue.value * 2);

    watch(
      [() => dataValue.value, () => computedProperty.value],
      (values, oldValues) => {
        console.log('Data and Computed Property changed:', values);
      }
    );

    return {
      dataValue,
    };
  },
};
</script>