Блог

Я пытаюсь перенести какой-то старый код из Vue options API JS в Vue composition API TS, и у меня получается следующее сочетание:

 export default {
  props: {
    time: {
      default: 1,
      type: String | Number,
    },
    iterations: {
      default: 1,
      type: String | Number,
    },
  },
  data: () => ({
    animation: '',
  }),
  methods: {
    animate() {
      this.animation = `move ${this.time}s ease-in-out ${this.iterations} forwards`
    },
  },
}
 

Теперь у меня возникли некоторые проблемы с поиском правильного способа ввода реквизита при одновременном сохранении значений по умолчанию и реактивности. В этом, например, значения по умолчанию теряются:

 export default (props: {
  time: string | number
  iterations: string | number
}) => {
  const animation = ref('')
  const animate = () => {
    animation.value = `move ${props.time}s ease-in-out ${props.iterations} forwards`
  }
  return {
    animation,
    animate,
  }
}
 

Тогда как здесь я теряю реактивность, поскольку я разрушаю параметр реквизита:

 export default ({
  time = 1,
  iterations = 1,
}: {
  time: string | number
  iterations: string | number
}) => {
  const animation = ref('')
  const animate = () => {
    animation.value = `move ${time}s ease-in-out ${iterations} forwards`
  }
  return {
    animation,
    animate,
  }
}
 

Как я могу это исправить?

Я выберу второе решение и добавлю экспорт для объекта props

 export const moduleProps {
  time: {
    default: 1,
    type: [String, Number],
  },
  iterations: {
    default: 1,
    type: [String, Number],
  },
}
 

Немного избыточно, но это работает