@vue/reactivity

Creating reactive objects

This feature allows you to create a reactive object. Any changes to the object's properties will be tracked, making it useful for building responsive interfaces.

import { reactive } from '@vue/reactivity';
const state = reactive({ count: 0 });

Creating computed properties

Computed properties automatically calculate their value based on reactive state. They are recalculated only when their dependencies change, making them efficient.

import { computed } from '@vue/reactivity';
const count = reactive({ num: 1 });
const plusOne = computed(() => count.num + 1);

Watching for changes

The watch function allows you to execute a callback function whenever a specified reactive property changes, enabling you to respond to changes in the state.

import { watch } from '@vue/reactivity';
const state = reactive({ count: 0 });
watch(() => state.count, (newVal, oldVal) => {
  console.log(`Count changed from ${oldVal} to ${newVal}`);
});