Как запустить computed в VUE3?

В Vue.js 3 для запуска вычисляемых свойств (computed) применяется несколько новых особенностей и изменений по сравнению с предыдущей версией (Vue.js 2). Все они направлены на обеспечение лучшей производительности и оптимизации работы с вычисляемыми свойствами.

1. Обновленный синтаксис объявления вычисляемых свойств:
В предыдущей версии Vue.js 2 вычисляемые свойства объявлялись с помощью объектного литерала или метода computed(). В Vue.js 3 вместо этого используется функция computed() в сочетании с синтаксисом с атрибутом get:

import { computed } from 'vue';

export default {
  // ...
  setup() {
    const myComputedValue = computed({
      get() {
        // возвращаем вычисленное значение
      },
      // необязательное свойство `set`, если нужно использовать двустороннюю привязку
      set(value) {
        // обновляем зависимые значения
      }
    });

    // ...
  }
}

2. Использование функционала ref из Vue.js Composition API:
С Vue.js 3 был введен новый API под названием Composition API, который позволяет использовать функциональные компоненты и более гибко организовывать логику компонента. В рамках этого API для создания реактивных переменных используется функция ref. Чтобы вычислить значение внутри функционального компонента и сделать его реактивным, можно совместить использование ref и метода computed:

import { ref, computed } from 'vue';

export default {
  // ...
  setup() {
    const myValue = ref(10);
    const myComputedValue = computed(() => {
      return myValue.value * 2; // для доступа к значению ref, используйте свойство `value`
    });

    // ...
  }
}

3. Регистрация вычисляемых свойств в компоненте:
Vue.js 3 упростила регистрацию вычисляемых свойств и сделала ее более явной. Теперь вычисляемые свойства регистрируются внутри функции setup:

import { computed } from 'vue';

export default {
  // ...
  setup() {
    const myComputedValue = computed(() => {
      // возвращаем вычисленное значение
    });

    return {
      myComputedValue // возвращаем вычисленное значение для использования в шаблоне или других местах
    };
  }
}

В Vue.js 3 есть и другие возможности и улучшения в работе с вычисляемыми свойствами. Важно отметить, что при переходе с Vue.js 2 на Vue.js 3 может понадобиться некоторая доработка кода, чтобы перейти на новый синтаксис и API.