Thẻ học Vue.js mẫu từ ứng dụng của chúng tôi

Tải xuống ứng dụng của chúng tôi từ App Store hoặc Google Play để nhận thêm flashcard miễn phí hoặc đăng ký để truy cập vào tất cả flashcard.

Mô tả cách tạo các thành phần chức năng trong Vue.js và chúng có thể được sử dụng cho mục đích gì.

Các thành phần chức năng trong Vue.js là các thành phần không có thể hiện hoặc trạng thái. Chúng được sử dụng để hiển thị mẫu nhanh hơn và hiệu suất ứng dụng hiệu quả hơn. Các thành phần chức năng là tối ưu khi chúng ta chỉ cần hiển thị dữ liệu đầu vào và không cần các phương thức vòng đời của thành phần như `created`, `mounted`, v.v.

Việc tạo một thành phần chức năng rất đơn giản. Chúng ta sẽ sử dụng chỉ thị `functional` trong mẫu để đánh dấu thành phần là chức năng. Các thành phần chức năng luôn cần phải có một phần tử gốc duy nhất.

Dưới đây là một ví dụ về một thành phần chức năng:

<template functional>
    <div>
        <h1>{{ props.title }}</h1>
        <p>{{ props.content }}</p>
    </div>
</template>
<script>
export default {
    props: ['title', 'content']
}
</script>

Hãy lưu ý rằng biến `props` có sẵn trực tiếp bên trong mẫu. Chúng tôi không sử dụng từ khóa `this` vì các thành phần chức năng không có thể hiện.

Các thành phần chức năng hữu ích khi bạn cần một thành phần đơn giản hoạt động như một hàm thuần. Chúng cũng có lợi cho việc tối ưu hóa hiệu suất, vì chúng hiển thị nhanh hơn so với các thành phần Vue.js tiêu chuẩn.

Vue.js xử lý phản ứng dữ liệu như thế nào và điều đó ảnh hưởng như thế nào đến hiệu suất ứng dụng?

Vue.js hỗ trợ tính năng phản ứng dữ liệu thông qua những gì gọi là quảng cáo. Khi chúng tôi tạo một thực thể Vue và truyền một đối tượng dữ liệu cho nó, Vue.js sẽ duyệt qua từng trường dữ liệu và chuyển đổi chúng thành "getters" và "setters" bằng cách sử dụng Object.defineProperty.

Trong khi getter không thay đổi giá trị, setter có khả năng phát hiện khi giá trị của một biến thay đổi. Khi setter phát hiện thay đổi, nó thông báo cho quảng cáo, người sau đó cập nhật chế độ xem.

// Ví dụ đối tượng dữ liệu đơn giản
var vm = new Vue({
  data: {
    message: 'Xin chào thế giới'
  }
})

Trong đoạn mã trên, trường "message" được biến đổi để tận dụng tính tính năng phản ứng của Vue.js. Khi getter phát hiện bất kỳ thay đổi nào trong "message", quan sát viên được thông báo và tự động cập nhật chế độ xem.

Về hiệu suất, tính năng phản ứng trong Vue.js được tối ưu hóa đủ để đảm bảo cập nhật chế độ xem mượt mà trong khi giảm thiểu số lượng hoạt động không cần thiết. Vue sử dụng hàng đợi bất đồng bộ để thu thập thay đổi và cập nhật chế độ xem trong một hoạt động "tick" tổng hợp. Điều này ngăn chặn việc làm mới nhiều lần của cùng một đoạn mã và cải thiện hiệu suất.

Vue CLI là gì và các chức năng chính của nó là gì?

Vue CLI là một công cụ dòng lệnh Vue.js cho phép tạo và cấu hình dự án mới một cách nhanh chóng. Nó cung cấp một loạt các tính năng giúp đơn giản hóa và tăng tốc quá trình phát triển ứng dụng Vue.js.

Các tính năng chính của Vue CLI bao gồm:

Tạo và cấu hình dự án - Vue CLI cho phép sinh ra các dự án Vue.js mới với môi trường phát triển được cấu hình sẵn. Nó bao gồm một cấu hình mặc định tối ưu cho hầu hết các dự án, nhưng cũng cho phép điều chỉnh cài đặt cá nhân.

Tải lại nóng - Tải lại nóng là một tính năng tự động làm mới trang sau khi có thay đổi trong mã. Điều này cải thiện đáng kể hiệu suất công việc của nhà phát triển.

Linting và kiểm tra - Vue CLI bao gồm các cấu hình cho ESLint và các kiểm tra đơn vị và tích hợp khác nhau.

Hỗ trợ cho bản build sản xuất - Công cụ này có thể chuẩn bị mã cho một phiên bản sản xuất được tối ưu hóa về hiệu suất.

Tạo điều kiện thuận lợi cho việc phát triển ứng dụng đa ngôn ngữ - Nhờ sự hỗ trợ của Vue I18n, Vue CLI giúp tạo ra các ứng dụng đa ngôn ngữ.

Hỗ trợ cho preprocessors - Vue CLI hỗ trợ các trình tiền xử lý như Babel, TypeScript, ESLint, PostCSS, PWA, Kiểm thử đơn vị & Kiểm thử từ đầu đến cuối.

Việc khởi tạo dự án đơn giản với Vue CLI diễn ra như sau:

# Cài đặt
npm install -g @vue/cli
# HOẶC
yarn global add @vue/cli

# Tạo một dự án mới
vue create my-project

Sự khác biệt giữa các thuộc tính tính toán và người theo dõi trong Vue.js là gì?

**Thuộc tính được tính toán** và **trình theo dõi** cho phép thực hiện một số hành động khi giá trị của một thuộc tính trong thành phần Vue.js thay đổi. Mặc dù có một số điểm tương đồng, tuy nhiên, có những khác biệt đáng kể giữa chúng.

**Thuộc tính được tính toán** là các hàm được sử dụng để thực hiện một số hoạt động trên một tập hợp các biến Vue.js nhất định, trả về một kết quả.
Khi chúng tôi sử dụng **thuộc tính được tính toán**, Vue.js nhớ các sự phụ thuộc giữa dữ liệu của chúng tôi và hàm tính toán. Khi bất kỳ sự phụ thuộc nào thay đổi, hàm được gọi lại.
**Thuộc tính được tính toán** cũng là lười biếng, nghĩa là chúng chỉ được tính toán khi chúng được sử dụng ở đâu đó trong mã.

computed: {
  fullName: function () {
    return this.firstName + ' ' + this.lastName
  }
}

**Trình theo dõi**, ngược lại, là tổng quát hơn. Chúng cho phép quan sát bất kỳ thuộc tính nào của thành phần và phản ứng với sự thay đổi của chúng.
Trình theo dõi chỉ thực thi khi thuộc tính được quan sát thay đổi. Chúng đặc biệt hữu ích khi chúng tôi cần theo dõi sự thay đổi của một thuộc tính duy nhất.

watch: {
  firstName: function (val) {
    this.fullName = val + ' ' + this.lastName
  },
  lastName: function (val) {
    this.fullName = this.firstName + ' ' + val
  }
}

Tóm lại, **thuộc tính được tính toán** tốt hơn khi chúng tôi muốn chuyển đổi dữ liệu đầu vào một cách nhất quán, trong khi **trình theo dõi** có thể áp dụng khi chúng tôi muốn thực hiện các hoạt động bất đồng bộ đáp ứng với sự thay đổi dữ liệu đầu vào.

Thẻ học Vue.js