Create Vue 3 Apps with the Composition API — Check Reactive Properties

Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

It lets us extract logic easily and not have to worry about the value of this in our code.

It also works better with TypeScript because the value of this no longer has to be typed.

In this article, we’ll look at how to create Vue 3 apps with the Composition API.

toRefs

We can use the toRefs function to convert a ref toa plain object.

For instance, we can write:

<template>
  <div></div>
</template>

<script>
import { reactive, toRefs } from "vue";
export default {
  name: "App",
  setup() {
    const state = reactive({
      foo: 1,
      bar: 2,
    });

    const stateAsRefs = toRefs(state);
    console.log(stateAsRefs);

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

to convert the state reactive property to a plain object.

state.foo and stat.bar are reactive properties with values being the values that we set in the reactive function.

isRef

The isRef function checks if a variable is a ref.

For instance, we can write:

<template>
  <div></div>
</template>

<script>
import { isRef, reactive, ref } from "vue";
export default {
  name: "App",
  setup() {
    const state = reactive({
      foo: 1,
      bar: 2,
    });

    const r = ref(0);
    console.log(isRef(state));
    console.log(isRef(r));

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

We call isRef with state , which returns false .

And when we call isRef with r , it returns true .

isProxy

The isProxy function checks if an object is reactive or read-only.

For instance, we can write:

<template>
  <div></div>
</template>

<script>
import { isProxy, reactive, readonly, ref } from "vue";
export default {
  name: "App",
  setup() {
    const state = reactive({
      foo: 1,
      bar: 2,
    });
    const ro = readonly({ foo: 1 });

    const r = ref(0);
    console.log(isProxy(state));
    console.log(isProxy(ro));
    console.log(isProxy(r));

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

The first 2 console logs are log true since we created variables with reactive and readonly .

And the 3rd one logs false since a ref isn’t created with reactive or readonly .

isReactive

We can check if a variable is created from reactive with isReactive .

For instance, we can write:

<template>
  <div></div>
</template>

<script>
import { isReactive, reactive, readonly, ref } from "vue";
export default {
  name: "App",
  setup() {
    const state = reactive({
      foo: 1,
      bar: 2,
    });
    const ro = readonly({ foo: 1 });

    const r = ref(0);
    console.log(isReactive(state));
    console.log(isReactive(ro));
    console.log(isReactive(r));

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

Only state is created with the reactive function, so only the first console log logs true .

isReadonly

We can check if a variable is created with readonly is isReadonly .

For instance, we can write:

<template>
  <div></div>
</template>

<script>
import { isReadonly, reactive, readonly, ref } from "vue";
export default {
  name: "App",
  setup() {
    const state = reactive({
      foo: 1,
      bar: 2,
    });
    const ro = readonly({ foo: 1 });

    const r = ref(0);
    console.log(isReadonly(state));
    console.log(isReadonly(ro));
    console.log(isReadonly(r));

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

to call isReadonly .

Only the 2nd console log logs true since only ro is created with readonly .

Conclusion

We can use various functions from the Vue 3 composition API to do various checks on reactive properties.

Comments

[Reid]

Yup have used it on Vue 3 Preview (in a production app) with the RxJS, and typescript, and its really nice code. Would wait for 3 to go to market though.