7 mẹo VueJS đơn giản bạn có thể sử dụng để trở thành dev tốt hơn.

Giới Thiệu

Xin chào mọi người lại là mình đây . Đợ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ề vue chia sẻ với anh . 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 Vue, 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 Vue, 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

Đi ra khỏi mẹo cuối cùng, 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 móc vòng đời 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 giá trị quan sát 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.

Về cơ bản khi thiết kế một dự án quy mô lớn, nó dễ dàng quên chính xác định dạng, loại chính xác và các quy ước khác mà bạn đã sử dụng . Và nếu bạn ở trong một nhóm phát triển lớn hơn, đồng nghiệp của bạn sẽ không phải là người đọc ý nghĩ, vì vậy hãy nói rõ cho họ biết cách sử dụng các thành phần của bạn! Vì vậy, hãy tiết kiệm cho mọi người những rắc rối khi phải cẩn thận theo dõi component của bạn để xác định định dạng prop và chỉ cần viết xác nhận prop.

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 rất phân cấp. Nó rất đơn giản.

    <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

All Rights Reserved