Create Vue 3 Apps with the Composition API — Refs
Tags: vue, programming, webdev, javascript
Published: 2021-01-19 00:37:07

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

### Using Refs with v-for

We can assign refs to items rendered with `v-for` .

For instance, we can write:

```
<template>
  <div
    v-for="(item, i) in list"
    :ref="
      (el) => {
        divs[i] = el;
      }
    "
    :key="i"
  >
    {{ item }}
  </div>
</template>

<script>
import { ref, reactive, onBeforeUpdate } from "vue";

export default {
  setup() {
    const list = reactive([1, 2, 3]);
    const divs = ref([]);

    onBeforeUpdate(() => {
      divs.value = [];
    });

    return {
      list,
      divs,
    };
  },
};
</script>
```

We create the `divs` reactive property with the `ref` function.

Then when we render the items with `v-for` , we assign the `el` HTML element object as an entry of the `divs` array.

### Reactivity Utilities

The Vue 3 composition API comes with some utility functions to do various things with reactive properties.

#### unref

The `unref` function lets us return the ref’s value or the argument we pass into the `ref` function depending on if the variable is a ref.

For instance, we can write:

```
<template>
  <div>
    <button @click="increment">increment</button>
    {{ count }}
  </div>
</template>

<script>
import { ref, unref, watch } from "vue";
export default {
  name: "App",
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    watch(count, () => {
      console.log(unref(count));
    });

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

We create the `count` reactive property.

And in the `watch` callback, we call `unref(count)` to get the actual value of the `count` reactive property.

If it’s not a ref, it returns the value of the variable we pass in.

#### `toRef`

The `toRef` function lets us create a ref for a property on a reactive source object.

For instance, we can write:

```
<template>
  <div>
    <button @click="increment">increment</button>
    {{ count }}
    {{ state.count }}
  </div>
</template>

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

    const count = toRef(state, "count");
    const increment = () => {
      state.count++;
    };

    return {
      state,
      count,
      increment,
    };
  },
};
</script>
```

We call `toRef` to create a ref from the `state.count` property.

Now we can include it in the object we return and then reference it in the template.

This is useful if we want to pass it into a composition function.

For instance, we can write:

```
<template>
  <div>
    <button @click="increment">increment</button>
    {{ count }}
    {{ state.count }}
  </div>
</template>

<script>
import { reactive, toRef, watch } from "vue";
export default {
  name: "App",
  setup() {
    const state = reactive({
      count: 1,
    });

    const count = toRef(state, "count");
    const increment = () => {
      state.count++;
    };

    watch(count, (count) => console.log(count));

    return {
      state,
      count,
      increment,
    };
  },
};
</script>
```

We pass the `count` into `watch` so we can watch its value.

### Conclusion

We can assign refs to HTML elements to let us access them in our component.

And we can manipulate refs with various functions that comes with Vue 3’s composition API.