M

MLOG

Tiếng Việt

Khám phá chuyên sâu về Composition API trong Vue.js 3. Học cách xây dựng các ứng dụng Vue.js có thể tái sử dụng, dễ bảo trì và dễ kiểm thử với các ví dụ thực tế và phương pháp hay nhất cho lập trình viên trên toàn thế giới.

Vue.js 3 Composition API: Phân Tích Chuyên Sâu Dành Cho Lập Trình Viên Toàn Cầu

Vue.js đã nhanh chóng trở thành một lựa chọn phổ biến để xây dựng các ứng dụng web hiện đại, nhờ vào courbe học tập dễ tiếp cận và các tính năng mạnh mẽ. Vue.js 3 còn đi xa hơn nữa với sự ra đời của Composition API, một cách mới để tổ chức logic của component. Bài phân tích chuyên sâu này cung cấp một hướng dẫn toàn diện để hiểu và sử dụng Composition API một cách hiệu quả, trang bị cho bạn những kỹ năng để xây dựng các ứng dụng Vue dễ bảo trì, tái sử dụng và kiểm thử hơn.

Composition API là gì?

Composition API là một tập hợp các API cho phép chúng ta tạo các component Vue bằng cách sử dụng các hàm được nhập vào thay vì khai báo các tùy chọn. Về cơ bản, nó cho phép bạn nhóm các logic liên quan lại với nhau, bất kể chúng xuất hiện ở đâu trong template. Điều này trái ngược với Options API (data, methods, computed, watch), vốn buộc bạn phải tổ chức mã theo các danh mục được xác định trước này. Hãy nghĩ về Options API như là việc tổ chức mã của bạn theo *nó là gì* (dữ liệu, phương thức, v.v.), trong khi Composition API cho phép bạn tổ chức mã theo *nó làm gì*.

Cốt lõi của Composition API xoay quanh hàm setup(). Hàm này là điểm khởi đầu để sử dụng Composition API trong một component. Bên trong setup(), bạn có thể định nghĩa trạng thái phản ứng, các thuộc tính tính toán, phương thức và các hook vòng đời bằng cách sử dụng các hàm composable.

Tại sao nên sử dụng Composition API?

Composition API mang lại một số lợi thế so với Options API truyền thống, đặc biệt là đối với các ứng dụng lớn và phức tạp hơn:

Hiểu các khái niệm cốt lõi

Hãy cùng đi sâu vào các khái niệm chính làm nền tảng cho Composition API:

1. setup()

Như đã đề cập trước đó, setup() là điểm khởi đầu để sử dụng Composition API. Đây là một tùy chọn của component được thực thi trước khi component được tạo. Bên trong setup(), bạn định nghĩa trạng thái phản ứng, các thuộc tính tính toán, phương thức và các hook vòng đời, sau đó trả về một đối tượng chứa các giá trị mà bạn muốn hiển thị ra template.

Ví dụ:

import { ref } from 'vue'

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

    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}

Trong ví dụ này, chúng ta đang sử dụng ref để tạo một biến phản ứng có tên là count. Chúng ta cũng định nghĩa một phương thức có tên là increment để tăng giá trị của count. Cuối cùng, chúng ta trả về một đối tượng chứa count và increment, điều này làm cho chúng có sẵn trong template của component.

2. Trạng thái phản ứng với ref và reactive

Composition API cung cấp hai hàm cốt lõi để tạo trạng thái phản ứng: ref và reactive.

Ví dụ sử dụng ref:

import { ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello, Vue!')

    const updateMessage = (newMessage) => {
      message.value = newMessage
    }

    return {
      message,
      updateMessage
    }
  }
}

Ví dụ sử dụng reactive:

import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      name: 'John Doe',
      age: 30
    })

    const updateName = (newName) => {
      state.name = newName
    }

    return {
      state,
      updateName
    }
  }
}

3. Thuộc tính tính toán với computed

Thuộc tính tính toán là các giá trị được suy ra từ trạng thái phản ứng khác. Chúng được cập nhật tự động bất cứ khi nào các phụ thuộc của chúng thay đổi. Hàm computed nhận một hàm getter làm đối số và trả về một ref phản ứng chỉ đọc.

Ví dụ:

import { ref, computed } from 'vue'

export default {
  setup() {
    const firstName = ref('John')
    const lastName = ref('Doe')

    const fullName = computed(() => {
      return `${firstName.value} ${lastName.value}`
    })

    return {
      firstName,
      lastName,
      fullName
    }
  }
}

Trong ví dụ này, fullName là một thuộc tính tính toán phụ thuộc vào firstName và lastName. Bất cứ khi nào firstName hoặc lastName thay đổi, fullName sẽ được cập nhật tự động.

4. Watchers với watch và watchEffect

Watchers cho phép bạn phản ứng với những thay đổi trong trạng thái phản ứng. Composition API cung cấp hai cách chính để tạo watchers: watch và watchEffect.

Ví dụ sử dụng watch:

import { ref, watch } from 'vue'

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

    watch(
      count,
      (newValue, oldValue) => {
        console.log(`Count changed from ${oldValue} to ${newValue}`)
      }
    )

    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}

Ví dụ sử dụng watchEffect:

import { ref, watchEffect } from 'vue'

export default {
  setup() {
    const message = ref('Hello')

    watchEffect(() => {
      console.log(`Message is: ${message.value}`)
    })

    const updateMessage = (newMessage) => {
      message.value = newMessage
    }

    return {
      message,
      updateMessage
    }
  }
}

5. Hook vòng đời

Composition API cung cấp quyền truy cập vào các hook vòng đời của component thông qua các hàm bắt đầu bằng on, chẳng hạn như onMounted, onUpdated, và onUnmounted. Các hàm này nhận một hàm callback làm đối số, hàm này sẽ được thực thi khi hook vòng đời tương ứng được kích hoạt.

Ví dụ:

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('Component is mounted')
    })

    onUnmounted(() => {
      console.log('Component is unmounted')
    })

    return {}
  }
}

Tạo các hàm Composable

Sức mạnh thực sự của Composition API đến từ khả năng tạo ra các hàm composable có thể tái sử dụng. Một hàm composable chỉ đơn giản là một hàm đóng gói một phần logic của component và trả về trạng thái phản ứng và các hàm có thể được sử dụng trong nhiều component.

Ví dụ: Hãy tạo một hàm composable theo dõi vị trí chuột:

import { ref, onMounted, onUnmounted } from 'vue'

export function useMousePosition() {
  const x = ref(0)
  const y = ref(0)

  const updatePosition = (event) => {
    x.value = event.clientX
    y.value = event.clientY
  }

  onMounted(() => {
    window.addEventListener('mousemove', updatePosition)
  })

  onUnmounted(() => {
    window.removeEventListener('mousemove', updatePosition)
  })

  return {
    x,
    y
  }
}

Bây giờ, bạn có thể sử dụng hàm composable này trong bất kỳ component nào:

import { useMousePosition } from './useMousePosition'

export default {
  setup() {
    const { x, y } = useMousePosition()

    return {
      x,
      y
    }
  }
}

Ví dụ và trường hợp sử dụng thực tế

Hãy khám phá một số ví dụ thực tế về cách Composition API có thể được sử dụng trong các kịch bản thực tế:

1. Tìm nạp dữ liệu

Tạo một hàm composable để tìm nạp dữ liệu từ API là một trường hợp sử dụng phổ biến. Điều này cho phép bạn tái sử dụng cùng một logic tìm nạp dữ liệu trên nhiều component.

import { ref, onMounted } from 'vue'

export function useFetch(url) {
  const data = ref(null)
  const error = ref(null)
  const loading = ref(true)

  onMounted(async () => {
    try {
      const response = await fetch(url)
      data.value = await response.json()
    } catch (err) {
      error.value = err
    } finally {
      loading.value = false
    }
  })

  return {
    data,
    error,
    loading
  }
}

Sau đó, bạn có thể sử dụng hàm composable này trong các component của mình như sau:

import { useFetch } from './useFetch'

export default {
  setup() {
    const { data, error, loading } = useFetch('https://api.example.com/data')

    return {
      data,
      error,
      loading
    }
  }
}

2. Xác thực biểu mẫu

Xác thực biểu mẫu là một lĩnh vực khác mà Composition API có thể rất hữu ích. Bạn có thể tạo các hàm composable đóng gói logic xác thực và tái sử dụng chúng trên các biểu mẫu khác nhau.

import { ref } from 'vue'

export function useValidation() {
  const errors = ref({})

  const validateField = (fieldName, value, rules) => {
    let error = null
    for (const rule of rules) {
      if (rule === 'required' && !value) {
        error = 'This field is required'
        break
      } else if (rule === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
        error = 'Invalid email format'
        break
      }
    }

    if (error) {
      errors.value[fieldName] = error
    } else {
      delete errors.value[fieldName]
    }
  }

  return {
    errors,
    validateField
  }
}

Sử dụng trong một component:

import { useValidation } from './useValidation'
import { ref } from 'vue'

export default {
  setup() {
    const { errors, validateField } = useValidation()
    const email = ref('')

    const validateEmail = () => {
      validateField('email', email.value, ['required', 'email'])
    }

    return {
      email,
      errors,
      validateEmail
    }
  }
}

3. Quản lý xác thực người dùng

Logic xác thực thường có thể phức tạp và bị trùng lặp trên nhiều component. Composition API cho phép bạn tạo một hàm composable đóng gói tất cả logic xác thực và cung cấp một API sạch sẽ cho các component của bạn sử dụng.

Ví dụ: (Đơn giản hóa)

import { ref } from 'vue'

export function useAuth() {
  const isLoggedIn = ref(false)
  const user = ref(null)

  const login = async (username, password) => {
    // Giả lập gọi API
    await new Promise(resolve => setTimeout(resolve, 1000))
    isLoggedIn.value = true
    user.value = { username }
  }

  const logout = async () => {
    // Giả lập gọi API
    await new Promise(resolve => setTimeout(resolve, 1000))
    isLoggedIn.value = false
    user.value = null
  }

  return {
    isLoggedIn,
    user,
    login,
    logout
  }
}

Các phương pháp hay nhất để sử dụng Composition API

Để tận dụng tối đa Composition API, hãy xem xét các phương pháp hay nhất sau:

Những cạm bẫy phổ biến và cách tránh chúng

Mặc dù Composition API mang lại nhiều lợi ích, cũng có một số cạm bẫy phổ biến cần lưu ý:

Composition API và các đội ngũ toàn cầu

Composition API thúc đẩy sự hợp tác trong các đội ngũ phát triển toàn cầu bằng cách thúc đẩy:

Kết luận

Vue.js 3 Composition API là một công cụ mạnh mẽ có thể cải thiện đáng kể việc tổ chức, khả năng tái sử dụng và khả năng kiểm thử của các ứng dụng Vue của bạn. Bằng cách hiểu các khái niệm cốt lõi và tuân theo các phương pháp hay nhất được nêu trong bài phân tích chuyên sâu này, bạn có thể tận dụng Composition API để xây dựng các ứng dụng dễ bảo trì và có khả năng mở rộng hơn cho khán giả toàn cầu. Hãy đón nhận Composition API và mở khóa toàn bộ tiềm năng của Vue.js 3.

Chúng tôi khuyến khích bạn thử nghiệm với Composition API trong các dự án của riêng mình và khám phá những khả năng rộng lớn mà nó mang lại. Chúc bạn viết mã vui vẻ!