Create Vue 3 Apps with the Composition API — Check Reactive Properties
Tags: vue, javascript, webdev, programming
Published: 2021-01-19 00:37:44

**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.