5 Sai Lầm Phổ Biến Của Lập Trình Viên VueJS

Cloud9 VN

3 years ago

1. Không Sử dụng Key Trong Từng Vòng Lặp

Trong VueJS, key là thuộc tính định danh duy nhất cho các phần tử trong danh sách được lặp lại.

Khi các phần tử này thay đổi thứ tự, key đảm bảo rằng Vue sẽ hiểu đúng thay đổi của chúng để tối ưu hiệu suất. Tuy nhiên, một sai lầm thường gặp của các lập trình viên là sử dụng cùng một key cho toàn bộ vòng lặp, như sau:

<ul><li v-for="item in items" :key="id">{{ item }}</li></ul>

Trong ví dụ trên, key được đặt là “id”. Tuy nhiên id không được định nghĩa ở đâu trong code, cho nên VueJS sẽ cảnh báo rằng không có key được sử dụng.

Để khắc phục sai lầm này, ta cần phải khai báo key độc lập cho từng phần tự lặp.

Ví dụ:

<ul>
  <li v-for="(item, index) in items" :key="item.id">{{ item }}</li>
</ul>

Trong trường hợp không thể sử dụng primary key (id), bạn có thể sử dụng các thông số điều kiện khác để định key, ví dụ như index hoặc item.code như sau:

<ul> <li v-for="(item, index) in items" :key="index">{{ item }}</li> </ul>

2. Không Tối Ưu Hóa Biểu Thức

VueJS cho phép mã JavaScript được sử dụng trong các đoạn mã HTML, như là ví dụ dưới đây:

{{ count * 2 }}

Tuy nhiên, sử dụng các đoạn code phức tạp có thể trở thành một vấn đề. Vue sẽ phải đánh giá chúng liên tục.

Nếu có một số lượng lớn các biểu thức hay phép toán tương tự trong ứng dụng, hiệu suất của ứng dụng sẽ bị ảnh hưởng.

Để tối ưu hóa đoạn mã như vậy, chúng ta có thể sử dụng các thành phần tích cực thay vì tính toán thủ công, ví dụ như:

<template> <div> {{ doubleCount }} </div> </template> <script> export default { data() { return { count: 3, }; }, computed: { doubleCount() { return this.count * 2; }, }, }; </script>

Giá trị của doubleCount đã được Vue ghi lại trong cache (bộ nhớ tạm thời). Nếu không có thay đổi, Vue sẽ không thực hiện lại tính toán giá trị của doubleCount.

3. Không Dùng Axios Interceptors Để Xử Lý Lỗi

Axios là một thư viện HTTP client được sử dụng phổ biến trong VueJS. Để xử lý lỗi trong Axios, nhiều lập trình viên chọn sử dụng các callback để tạo ra thông báo lỗi.

Tuy nhiên, điều này đặt ra một vấn đề khó khăn khi các callback này được sử dụng ở nhiều nơi khác nhau trong ứng dụng.

Một giải pháp tốt hơn là sử dụng Axios interceptors để xử lý lỗi một cách trung tâm.

Interceptor cho phép bạn can thiệp vào các yêu cầu trước khi chúng được gửi và các phản hồi trước khi nó đến tay người dùng. Chúng ta có thể sử dụng các interceptors để xử lý lỗi và phân tích các phản hồi trả về để hiển thị thông báo lỗi thích hợp.

Ví dụ:

// tạo file axiosInstance.js 
import axios from "axios"; 

const axiosInstance = axios.create({ baseURL: "https://your-api-url.com/", }); 

// Request interceptor - xử lý lỗi/config của request ở global 
axiosInstance.interceptors.request.use( 
  (config) => {
    // Add an 'Authorization' header to all request
    const token = localStorage.getItem("access_token"); 
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }

    // tiếp tục thiết lập các đặc tính khác của config object nếu cần
    return config;
  },
  (error) => {
    // Xử lý lỗi của request ở cấp độ global. Ví dụ:
    ...
    return Promise.reject(error); 
  }
);

// Response interceptor - xử lý phản hồi ở cấp độ global 
axiosInstance.interceptors.response.use( 
  (response) => {
    // Log response data để giúp cho việc dò tìm lỗi
    console.log("Response:", response);
    // Thêm thông tin vào tất cả các response data hoặc xử lý thêm nếu muốn
    // ...
    return response;
  },
  (error) => {
    // Xử lý lỗi ở level gloval. Ví dụ thêm thông điệp trong log cho mốt số loại lỗi
    switch (error.response.data.code) {
      case 'ECONNREFUSED':
        console.error('Cannot connect to the server');
        break;
      case 401:
        console.error('Authentication required');
        break;
      case 403:
        console.error('Forbidden');
        break;
      default:
        console.error('Unexpected error');
    }
    return Promise.reject(error);
  }
); 
export default axiosInstance;

Sau đó bạn có thể sử dụng axios instance trong các component khác như dưới đây:

import axiosInstance from "./axiosInstance";
export default {
  methods: {
    async fetchData() {
      try {
        const response = await axiosInstance.get("api/endpoint");
        // lấy data và sử dụng 
      } catch (error) {
        // xử lý lỗi thêm ở mức độ cục bộ (local) nếu muốn 
      }
    },
  },
};

Ở ví dụ trên, chúng tôi sử dụng một Axios interceptor để xử lý các mã lỗi nhất định. Khi một lỗi xảy ra với mã code tương ứng, thông báo lỗi sẽ được hiển thị.

4. Không Tái Sử Dụng Thành Phần

VueJS là một framework dùng component, cho phép chúng ta tạo ra các thành phần riêng biệt và tái sử dụng chúng nhiều lần trong project.

Tuy nhiên, nhiều lập trình viên không tái sử dụng chúng, điều này dẫn đến việc gây ra bộ code đồ sộ và khó đọc mã nguồn.

Để tái sử dụng thành phần trong VueJS, ta có thể đặt chúng vào các file .vue.

<!-- Component1.vue -->
<template> <div> <h1>{{ title }}</h1> <p>{{ message }}</p> </div> </template> <script> export defaultHello { name: 'HelloWorld', props: { title: String, message: String } }; </script>

Sau khi định nghĩa, chúng ta có thể sử dụng thành phần Hello World này trên toàn bộ ứng dụng bằng cách lồng nó vào các file Vue tương ứng:

<!-- Component2.vue --><template> <div> <HelloWorld title="Welcome" message="This is the first instance of HelloWorld" /> <HelloWorld title="Hello again" message="This is the second instance of HelloWorld" /> </div> </template> <script> import HelloWorld from "./Component1.vue"; export default { components: { HelloWorld, }, }; </script>

5. Không Kiểm Tra Type Props

VueJs cho phép chúng ta kiểm tra kiểu của các props mà chúng ta truyền vào.

Điều này giúp đảm bảo rằng các props được sử dụng đúng cách và đúng kiểu dữ liệu, từ đó giúp mã nguồn dễ hiểu và một chức năng phục vụ tốt hơn.

export default {
  props: {
    value: {
      type: String,
      required: true
    }
  }
};

Ở ví dụ trên, chúng ta định nghĩa prop “value” với kiểu dữ liệu String và thuộc tính “required”. Nếu truyền vào loại dữ liệu khác, Vue sẽ cảnh báo lỗi trên console.

Trên đây là 5 sai lầm phổ biến khi sử dụng VueJS và cách khắc phục chúng. Việc tránh những lỗi trên sẽ giúp cho sản phẩm của chúng ta đạt được tính linh hoạt và hiệu suất tốt nhất.