Vue 3 с нуля: компоненты и реактивность

npm create vue@latest vue-tasks
cd vue-tasks
npm install
npm run dev

npm create vue@latest vue-tasks -- --ts --vitest --bare

npm run test:unit -- --run   # Vitest: tests once, without watch mode
npm run build                # vue-tsc type check + vite build

<script setup lang="ts">
import { computed, ref } from 'vue'

const count = ref(0)
const isEven = computed(() => count.value % 2 === 0)

function increment() {
  count.value++ // in <script>, a ref is read and written through .value
}
</script>

<template>
  <!-- in the template, refs are unwrapped automatically: no .value -->
  <button type="button" @click="increment">Clicked {{ count }} times</button>
  <p>{{ isEven ? 'Even' : 'Odd' }}</p>
</template>

export type Task = { id: number; title: string; done: boolean }
export type Filter = 'all' | 'active' | 'done'

<script setup lang="ts">
import type { Task } from '../types'

const props = defineProps<{ task: Task }>()

const emit = defineEmits<{
  toggle: [id: number]
  remove: [id: number]
}>()
</script>

<template>
  <li :class="{ done: props.task.done }">
    <label>
      <input type="checkbox" :checked="props.task.done" @change="emit('toggle', props.task.id)" />
      {{ props.task.title }}
    </label>
    <button type="button" :aria-label="`Delete ${props.task.title}`" @click="emit('remove', props.task.id)">
      ×
    </button>
  </li>
</template>

<style scoped>
.done {
  color: #888;
  text-decoration: line-through;
}
</style>

$ npx vue-tsc --build
src/components/MutateProp.vue(7,9): error TS2540: Cannot assign to 'task' because it is a read-only property.

<script setup lang="ts">
import { computed, ref } from 'vue'
import TaskItem from './components/TaskItem.vue'
import type { Filter, Task } from './types'

const tasks = ref<Task[]>([
  { id: 1, title: 'Read the Vue guide', done: true },
  { id: 2, title: 'Build a task list', done: false },
])
const newTitle = ref('')
const filter = ref<Filter>('all')
let nextId = 3

const visibleTasks = computed(() => {
  if (filter.value === 'active') return tasks.value.filter((t) => !t.done)
  if (filter.value === 'done') return tasks.value.filter((t) => t.done)
  return tasks.value
})
const remaining = computed(() => tasks.value.filter((t) => !t.done).length)

function addTask() {
  if (!newTitle.value) return
  tasks.value.push({ id: nextId++, title: newTitle.value, done: false })
  newTitle.value = ''
}

function toggle(id: number) {
  const task = tasks.value.find((t) => t.id === id)
  if (task) task.done = !task.done
}

function remove(id: number) {
  tasks.value = tasks.value.filter((t) => t.id !== id)
}
</script>

<template>
  <main>
    <h1>Tasks</h1>

    <form @submit.prevent="addTask">
      <label for="new-task">New task</label>
      <input id="new-task" v-model.trim="newTitle" autocomplete="off" />
      <button type="submit">Add</button>
    </form>

    <label for="filter">Show</label>
    <select id="filter" v-model="filter">
      <option value="all">All</option>
      <option value="active">Active</option>
      <option value="done">Done</option>
    </select>

    <ul v-if="visibleTasks.length">
      <TaskItem v-for="task in visibleTasks" :key="task.id" :task="task" @toggle="toggle" @remove="remove" />
    </ul>
    <p v-else>Nothing here yet.</p>

    <p>Remaining: {{ remaining }}</p>
  </main>
</template>

import { describe, expect, it } from 'vitest'
import { mount } from '@vue/test-utils'
import App from '../App.vue'
import TaskItem from '../components/TaskItem.vue'

describe('App', () => {
  it('adds a trimmed task and ignores an empty one', async () => {
    const wrapper = mount(App)
    await wrapper.get('#new-task').setValue('  Write tests  ')
    await wrapper.get('form').trigger('submit')
    expect(wrapper.findAll('li').map((li) => li.text())).toContain('Write tests ×')
    expect((wrapper.get('#new-task').element as HTMLInputElement).value).toBe('')

    await wrapper.get('form').trigger('submit')
    expect(wrapper.findAll('li')).toHaveLength(3)
  })

  it('toggles, filters and removes through child events', async () => {
    const wrapper = mount(App)
    expect(wrapper.text()).toContain('Remaining: 1')

    await wrapper.findAll('input[type="checkbox"]')[1]!.setValue(true)
    expect(wrapper.text()).toContain('Remaining: 0')

    await wrapper.get('#filter').setValue('active')
    expect(wrapper.text()).toContain('Nothing here yet.')

    await wrapper.get('#filter').setValue('all')
    await wrapper.get('button[aria-label="Delete Read the Vue guide"]').trigger('click')
    expect(wrapper.findAll('li')).toHaveLength(1)
  })
})

describe('TaskItem', () => {
  it('emits events with the task id instead of mutating the prop', async () => {
    const task = { id: 7, title: 'Call the client', done: false }
    const wrapper = mount(TaskItem, { props: { task } })

    await wrapper.get('input').setValue(true)
    await wrapper.get('button').trigger('click')

    expect(wrapper.emitted('toggle')).toEqual([[7]])
    expect(wrapper.emitted('remove')).toEqual([[7]])
    expect(task.done).toBe(false)
  })
})

$ npx vitest run --reporter=verbose
 ✓ src/__tests__/CounterButton.spec.ts > updates the DOM when the ref changes
 ✓ src/__tests__/App.spec.ts > App > adds a trimmed task and ignores an empty one
 ✓ src/__tests__/App.spec.ts > App > toggles, filters and removes through child events
 ✓ src/__tests__/App.spec.ts > TaskItem > emits events with the task id instead of mutating the prop

 Test Files  2 passed (2)
      Tests  4 passed (4)