Vue ref. Создание реактивных переменных.

Для чего был создан ref во Vue

С появлением Vue 3 и, соответственно, Composition API у нас появилась возможность использовать в нашем компоненте специальную функцию, которая называется ref.

Импортируется это следующим образом:

import { ref } from 'vue';

Давайте разберемся для чего это нужно. 

Но, для начала хотел дать ссылку на свой полный курс по Vue, где в формате видео, можно подробнее познакомиться со всеми особенностями Composition API. 

https://webkyrs.info/category/composition-api-komponenty-vue-js

Итак, Composition Api позволяет нам организовать модульную структуру построения компонентов. Мы выбираем и импортируем в компонент только самые необходимые части. Одной из таких частей является функция ref.

Основная задача этой функции - сделать переменную на уровне данных реактивной. Т.е. изменяется значение переменной в логике (раздел script компонента) и это перерисовывается в template. 

Простой пример, как мы можем использовать ref в компоненте

import { ref } from 'vue';


export default {
  setup() {
    const count = ref(0);


    function increment() {
      count.value++;
    }


    return {
      count,
      increment
    };
  }
};

Здесь count — это реактивная переменная.

Обратите внимание, что после того, как мы обернули значение в ref, получить значение этой переменной мы можем с помощью конструкции count.value. 

ref оборачивает значение в специальный объект с единственным свойством value.

Vue будет автоматически отслеживать и обновлять DOM, если значение count изменится.

Если бы мы писали на Options API, то этот кусок кода мог выглядеть следующим образом:

export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};

Оборачивания значения переменной в ref - это аналог того, как если бы мы разместили значение этой переменной в data в Options API.

В ref можно размещать не только строки или числа, но и любые типы данных, например, массивы или объекты:

const items = ref(['Item 1', 'Item 2', 'Item 3']);
const itemsRef = ref([]);

ref для получения доступа к элементам DOM разметки

Обратите внимание, что с помощью ref можно также получать доступ к элементам DOM разметки. Это полезно, если вам нужно взаимодействовать с DOM напрямую. Например:

<template>
  <div>
    <input ref="inputRef" type="text" />
    <button @click="focusInput">Focus Input</button>
  </div>
</template>


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


export default {
  setup() {
    const inputRef = ref(null);


    function focusInput() {
      inputRef.value.focus();
    }


    return {
      inputRef,
      focusInput
    };
  }
};
</script>

Это аналог того, как мы работали с ref во Vue 2.

Это основное, что нужно знать по поводу функции ref во Vue 3. В целом, ничего сложного здесь нет. Просто оборачиваем значение переменной и оно становится реактивным.