Hàm render trong Vue là một cách mạnh mẽ để mô tả cấu trúc của thành phần sử dụng JavaScript (thường kết hợp với JSX hoặc cú pháp mẫu của Vue). Nó cung cấp khả năng linh hoạt hơn so với cú pháp mẫu thông qua việc định nghĩa logic hiển thị thành phần.

Các khái niệm cơ bản

Hàm render là tùy chọn trong các thành phần Vue, nhận hàm createElement làm đối số. Hàm này được sử dụng để tạo ra các nút VDOM và trả về chúng như đầu ra hiển thị của thành phần.

Sử dụng hàm render

Dưới đây là ví dụ về một thành phần Vue đơn giản sử dụng hàm render:

Vue.component('tieude-khop', {
  render(createElement) {
    return createElement(
      'h1',
      this.$slots.default,
      {
        attrs: {
          id: 'khop-tieude'
        }
      }
    )
  },
  props: {
    mucdo: {
      type: Number,
      required: true
    }
  },
  computed: {
    tenTheTieu: function () {
      return `h${this.mucdo}`
    }
  },
  mounted: function () {
    console.log(this.$el.querySelector('#khop-tieude').tagName)
    // => <H1>
  }
})

Ví dụ trên cho thấy hàm render sử dụng createElement để tạo ra một thẻ h1 với id cụ thể. Bạn có thể điều chỉnh tên thẻ bằng cách sử dụng tính toán tenTheTieu:

return createElement(
  this.tenTheTieu,
  this.$slots.default,
  {
    attrs: {
      id: 'khop-tieude'
    }
  }
)

Lưu ý

• Khi sử dụng hàm render, trình biên dịch mẫu của Vue sẽ không xử lý phần <template> trong tệp .vue của bạn.
• Hàm render phù hợp khi cần xử lý logic phức tạp hoặc tạo động thành phần.
• Nếu muốn sử dụng JSX, bạn cần cấu hình plugin Babel như babel-plugin-transform-vue-jsx.
• Mặc dù hàm render mang lại sự linh hoạt cao, việc sử dụng quá mức có thể khiến logic hiển thị trở nên khó hiểu và bảo trì.

Sравnение với Mẫu

Hệ thống mẫu của Vue cung cấp cú pháp trực quan và dễ hiểu để mô tả cấu trúc DOM. Đối với hầu hết các ứng dụng, việc sử dụng mẫu đã đủ. Tuy nhiên, trong trường hợp cần xử lý logic phức tạp hoặc tạo động thành phần, hàm render có thể là lựa chọn tốt hơn.

Tệp chính trong dự án Vue

Tệp main.js (hoặc main.ts nếu sử dụng TypeScript) là điểm vào của dự án Vue. Nó khởi tạo phiên bản Vue và gắn ứng dụng Vue vào một phần tử DOM. Dưới đây là ví dụ về tệp main.js điển hình:

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

Vue.use(router);

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
});

Lưu ý rằng việc sử dụng Vue.use(store) không đúng vì Vuex store không phải là một plugin. Thay vào đó, store nên được truyền như một tùy chọn khi tạo phiên bản Vue.

Cài đặt phiên bản less và less-loader

Để sử dụng phiên bản tương thích của less và less-loader, hãy thực hiện lệnh sau:

yarn add less@4.1.1 less-loader@7.0.0

Vue Router

Vue Router là bộ quản lý định tuyến chính thức của Vue, hỗ trợ xây dựng các ứng dụng trang đơn (SPA). Component được sử dụng để tạo các liên kết điều hướng trong ứng dụng.

Cách sử dụng

Component chấp nhận thuộc tính to chỉ định đích định tuyến. Khi click, Vue Router thay đổi định tuyến hiện tại và hiển thị thành phần tương ứng.

<template>
  <div>
    <router-link to="/foo">Đến Foo</router-link>
    <router-link :to="{ path: '/bar' }">Đến Bar</router-link>
    <router-link :to="{ name: 'nguoi-dung', params: { userId: 123 }}">Người dùng</router-link>
    <router-link :to="{ path: '/foo', query: { user: '123' }}">Đến Foo với tham số</router-link>
  </div>
</template>

Lưu ý

• Đối với các định tuyến động (ví dụ /nguoi-dung/:id), sử dụng thuộc tính params thay vì query.
• Naming route giúp giảm độ phức tạp khi cần điều hướng đến các đường dẫn dài hoặc thay đổi tham số.
• Để điều hướng bằng mã, sử dụng phương thức router.push hoặc router.replace.
• Thay vì thẻ <a>, sử dụng <router-link> để đảm bảo hoạt động đúng trong SPA.
• Hàm render mặc định thêm lớp router-link-active vào liên kết đang hoạt động, có thể tùy chỉnh bằng thuộc tính active-class.
• Sử dụng thuộc tính exact để đảm bảo chỉ khớp chính xác với đường dẫn.