HomeOur Team
Một vài trick & tip đơn giản về VueJS  bạn có thể sử dụng để dev tốt hơn.
Tips / Tricks
Một vài trick & tip đơn giản về VueJS bạn có thể sử dụng để dev tốt hơn.
anh.nguyen1
anh.nguyen1
March 25, 2021
3 min

Giới Thiệu

Xin chào mọi , đợt này được vào dự án làm Vuejs nên cũng tìm tòi và chia sẻ 1 số trick & tip về VueJs chia sẻ với anh em . Bắt đầu luôn nhé .

1. Use one component in multiple routes

Là một trường hợp khá phổ biến mà các dev gặp phải khi nhiều tuyến giải quyết đến cùng một component trong Vue. Tuy nhiên, vấn đề là Vue tối ưu hóa ứng dụng của bạn và sử dụng lại các component hiện có thay vì tạo các component mới. Vì vậy, nếu bạn cố gắng chuyển đổi giữa các tuyến sử dụng cùng một component, sẽ không có gì thay đổi.

const routes = [
  {
    path: "/a",
    component: MyComponent
  },
  {
    path: "/b",
    component: MyComponent
  },
];

Để khắc phục điều này, bạn sẽ cần thêm thuộc tính :key vào phần tử <router-view> trong file App.vue của bạn. Điều này sẽ giúp bộ định tuyến của bạn nhận ra khi page khác nhau.

<router-view :key='$route.path' />

Bây giờ, ứng dụng của bạn sẽ không sử dụng lại các component hiện có và sẽ cập nhật nội dung của bạn khi bạn chuyển tuyến.

2. The $on(‘hook:’) can help simplify your code

Loại bỏ các trình lắng nghe sự kiện là một cách thực hành Javascript phổ biến nhất vì nó giúp tránh rò rỉ bộ nhớ và ngăn ngừa va chạm sự kiện. Khi thêm / xóa các trình lắng nghe sự kiện component trong VueJs, mình sử dụng các móc vòng đời được gắn kết và beforeDestroy, tương ứng, đại loại nó như thế này .

mounted () {
    window.addEventListener('resize', this.resizeHandler);
},

beforeDestroy () {
    window.removeEventListener('resize', this.resizeHandler);
}

Chúng ta sẽ phải khai báo các hook này một cách riêng biệt trong đối tượng tùy chọn component. Một vấn đề với điều này là với các component lớn hơn, các tùy chọn này có thể cách nhau hàng trăm dòng. Tuy nhiên, nhìn vào các tài liệu VueJS , chúng ta thấy rằng có một phương thức $on lắng nghe các sự kiện . Ngoài ra, móc vòng đời VueJS phát ra các sự kiện tùy chỉnh bất cứ khi nào chúng được kích hoạt .

Kết hợp hai mẹo này cho phép chúng ta viết code cho cả việc thêm và xóa bên trong chỉ phương thức được gắn. Code sẽ trông giống như thế này.

 mounted () {
    window.addEventListener('resize', this.resizeHandler);
    this.$on("hook:beforeDestroy", () => {
      window.removeEventListener('resize', this.resizeHandler);
    })
}

3. $on can also listen to a child component’s lifecycle hooks

Thực tế là móc vòng đời phát ra các sự kiện tùy chỉnh có nghĩa là các component cha có thể lắng nghe event từ con của nó. Nó sẽ sử dụng mẫu bình thường để nghe các sự kiện (@event) và có thể được xử lý giống như các sự kiện tùy chỉnh khác.

<child-comp @hook:mounted="someFunction" />

4. Use immediate: true to trigger watchers on initialization

Vue Watchers là một cách tuyệt vời để thêm chức năng nâng cao (ví dụ như các lệnh gọi API) chạy bất cứ khi nào các giá trị tại component thay đổi.

watch: {
    title: (newTitle, oldTitle) => {
      console.log("Title changed from " + oldTitle + " to " + newTitle)
    }
}

Nếu bạn cần nó chạy ngay khi một phiên bản được khởi tạo, tất cả những gì bạn phải làm là chuyển đổi nó thành một đối tượng có chức năng xử lý (newVal, oldVal) và cũng là một thuộc tính ngay lập tức.

 watch: {
  title: {
    immediate: true,
    handler(newTitle, oldTitle) {
      console.log("Title changed from " + oldTitle + " to " + newTitle)
        }
      }
   }

5. You should always validate your props…please.

Validating props là 1 điều cần thiết khi chúng ra làm việc . Nó còn được coi là 1 rule ưu tiên cần thiết được nói đến trên trang chủ : VueJS official style guide. \ Tại sao nó lại quan trọng ?

Về cơ bản nó sẽ giúp chúng ta trong tương lai khi bắt đầu một dự án quy mô lớn .

Dưới đây, một ví dụ về xác thực prop từ hướng dẫn kiểu VueJS.

props: {
      status: {
        type: String,
        required: true,
        validator: function (value) {
          return [
            'syncing',
            'synced',
            'version-conflict',
            'error'
          ].indexOf(value) !== -1
        }
      }
    }

6. Passing all props to a child component is easy

Có rất nhiều trường hợp sử dụng cho việc này, nhưng nó đặc biệt tiện dụng khi dự án của bạn có cấu trúc phân cấp phức tạp. Nó rất đơn giản như dưới đây.

<child-comp v-bind="$props"></child-comp>

7. End

Nếu bạn thực sự muốn trở thành một nhà phát triển VueJS , bạn cần biết tất cả các tùy chọn component khác nhau, khi nào nên sử dụng chúng và tại sao nên sử dụng chúng. Mình xin phép dừng lại tại đây , hy vọng bài viết mang lại cho bạn những kiến thức mới Thanks for red . bai baiiiiiiii


Tags

202103vuejs
anh.nguyen1

anh.nguyen1

Developer

Related Posts

Nâng cao bảo mật ứng dụng bằng Android NDK
Nâng cao bảo mật ứng dụng bằng Android NDK
March 26, 2021
4 min
System operator: Những câu chuyện chưa từng được kể (Phần 1)
Others
System operator: Những câu chuyện chưa từng được kể (Phần 1)
March 31, 2021
5 min
Why Protocol-Oriented Programming?
Articles
Why Protocol-Oriented Programming?
March 31, 2021
2 min
© 2021, All Rights Reserved.

Quick Links

HomeOur Team

Social Media