👩‍💻 Реактивная деструктуризация входных параметров в Vue.js 3.5

Раньше, чтобы использовать пропсы в компоненте, нам приходилось писать что-то вроде:

`const props = defineProps({ foo: String })

const emit = defineEmits(['change', 'delete']) // код setup

Но в Vue.js 3.5 всё стало проще! Теперь можно деструктуризировать пропсы прямо в аргументах функции setup, и они останутся реактивными! 💥

const { foo } = defineProps(['foo'])

watchEffect(() => { // выполняется только один раз до 3.5 // повторно запускается при изменении входного параметра "foo" в 3.5+ console.log(foo) })

Почему это круто? 🌟

Меньше кода — больше ясности. Не нужно создавать объект, где необходимо указывать default = 0 или required true

Реактивность на месте — деструктуризированные значения остаются реактивными, что позволяет легко отслеживать изменения.

Доступен ts - defineProps принимает дженерик, где вы можете описать типы свойств объекта, а так же обозначить опциональность параметра через знак ?

`interface Props { msg?: string labels?: string[] }

const { msg = 'hello', labels = ['one', 'two'] } = defineProps()``