VueJS: API tham khảo

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

createRenderer

Tạo một đối tượng Renderer với (không bắt buộc) tùy chọn.

const { createRenderer } = require('vue-server-renderer')
const renderer = createRenderer({ /* options */ })

createBundleRenderer

Tạo một đối tượng BundleRenderer với một gói server và (tùy chọn) tùy chọn.

const { createBundleRenderer } = require('vue-server-renderer')
const renderer = createBundleRenderer(serverBundle, { /* options */ })

Đối số serverBundle có thể là một trong những điều sau:

  • Đường dẫn tuyệt đối đến tệp bundle được tạo ( .jshoặc .json). Phải bắt đầu bằng để được coi là đường dẫn tệp.

  • Một đối tượng bundle được tạo bởi webpack + vue-server-renderer/server-plugin.

  • Một chuỗi mã JavaScript (không được khuyến nghị).

Xem Giới thiệu về Server bundle và Xây dựng cấu hình để biết thêm chi tiết.

Lớp: Trình kết xuất

#renderer.renderToString

Chữ ký:

renderer.renderToString(vm, context?, callback?): ?Promise<string>

Render một Vue instance thành chuỗi. Đối tượng ngữ cảnh là tùy chọn. Gọi lại là một kiểu gọi lại kiểu Node.js điển hình trong đó đối số đầu tiên là lỗi và đối số thứ hai là chuỗi được hiển thị.

Trong 2.5.0+, gọi lại cũng là tùy chọn. Khi không có gọi lại nào được thông qua, phương thức trả về một Promise để giải quyết HTML được hiển thị.

#renderer.renderToStream

Đánh dấu:

renderer.renderToStream(vm[, context]): stream.Readable

Render một đối tượng Vue thành một dòng có thể đọc được Node.js. Đối tượng ngữ cảnh là tùy chọn. Xem phần Streaming để biết thêm chi tiết.

#Lớp: BundleRenderer

#bundleRenderer.renderToString

Đánh dấu:

bundleRenderer.renderToString([context, callback]): ?Promise<string>

Kết xuất gói thành chuỗi. Đối tượng ngữ cảnh là tùy chọn. Callback là một kiểu Node.js điển hình trong đó đối số đầu tiên là lỗi và đối số thứ hai là chuỗi được hiển thị.

Trong 2.5.0+, callback cũng là tùy chọn. Khi không có callback nào được truyền thì phương thức sẽ trả về một Promise để giải quyết HTML được hiển thị.

#bundleRenderer.renderToStream

Đánh dấu:

bundleRenderer.renderToStream([context]): stream.Readable

Render gói với một dòng có thể đọc được Node.js. Đối tượng ngữ cảnh là tùy chọn. Xem phần Streaming để biết thêm chi tiết.

#Tùy chọn trình kết xuất

#template

Cung cấp template cho toàn bộ HTML của trang. Template phải chứa comment <!--vue-ssr-outlet--> đóng vai trò là trình giữ chỗ cho nội dung ứng dụng được hiển thị.

Template này cũng hỗ trợ nội suy cơ bản bằng cách sử dụng ngữ cảnh hiển thị:

  • Sử dụng cặp ngoặc xoắn kép cho nội suy thoát HTML;
  • Sử dụng ba cặp ngoặc xoắn cho nội suy không thoát HTML.

Template tự động chèn nội dung thích hợp khi dữ liệu nhất định được tìm thấy trên ngữ cảnh hiển thị:

  • context.head: (string) bất kỳ đánh dấu đầu nào cần được chèn vào phần tiêu đề của trang.

  • context.styles: (chuỗi) bất kỳ CSS nội tuyến nào cần được chèn vào phần title của trang. Lưu ý thuộc tính này sẽ tự động được điền nếu sử dụng vue-loadervue-style-loader cho CSS component.

  • context.state: (Object) ban đầu Vuex lưu state cần được inlined trong trang như window.__INITIAL_STATE__. JSON nội tuyến được tự động dọn dẹp với serialize-javascript để ngăn XSS.

    Trong 2.5.0+, tập lệnh nhúng cũng tự xóa trong chế độ production.

Ngoài ra, khi clientManifest cũng được cung cấp, mẫu sẽ tự động chèn các thông tin sau:

  • Các nội dung JavaScript và CSS phía client cần kết xuất (với các khối async được suy ra tự động);
  • Các <link rel="preload/prefetch"> gợi ý tài nguyên tối ưu cho trang được hiển thị.

Bạn có thể tắt tất cả các thao tác điền tự động bằng cách chuyển inject: false đến trình kết xuất đồ họa.

Xem thêm:

clientManifest

Cung cấp cho khách hàng một đối tượng biểu hiện được tạo bởi vue-server-renderer/client-plugin. Tệp kê khai của khách hàng cung cấp trình kết xuất gói với thông tin thích hợp để tiêm nội dung tự động vào mẫu HTML. Để biết thêm chi tiết, xem phần Tạo mô hình ứng dụng khách.

#Tách

Kiểm soát việc thực hiện tách tự động khi sử dụng template. Mặc định là true.

Xem thêm: Tách nội dung thủ công.

#shouldPreload

Một chức năng để kiểm soát những tập tin cần phải có <link rel="preload"> gợi ý tài nguyên được tạo ra.

Theo mặc định, chỉ các tệp JavaScript và CSS mới được tải trước, vì chúng hoàn toàn cần thiết cho ứng dụng của bạn để khởi động.

Đối với các loại nội dung khác như hình ảnh hoặc phông chữ, tải trước quá nhiều có thể lãng phí băng thông và thậm chí làm giảm hiệu suất, vì vậy những gì cần tải trước sẽ phụ thuộc vào kịch bản. Bạn có thể kiểm soát chính xác những gì cần tải trước bằng cách sử dụng tùy chọn shouldPreload:

const renderer = createBundleRenderer(bundle, {
  template,
  clientManifest,
  shouldPreload: (file, type) => {
    // kiểu phỏng đoán dựa trên đuôi mở rộng của file.
    // https://fetch.spec.whatwg.org/#concept-request-destination
    if (type === 'script' || type === 'style') {
      return true
    }
    if (type === 'font') {
      // chỉ tải trước font woff2
      return /\.woff2$/.test(file)
    }
    if (type === 'image') {
      // chỉ tải trước ảnh quan trọng
      return file === 'hero.jpg'
    }
  }
})

shouldPrefetch

2,5,0+

Đây là chức năng để kiểm soát những tập tin cần phải có <link rel="prefetch"> gợi ý tài nguyên được tạo ra.

Theo mặc định, tất cả nội dung trong các khối không đồng bộ sẽ được tìm nạp trước vì đây là chỉ thị có độ ưu tiên thấp; tuy nhiên bạn có thể tùy chỉnh để kiểm soát tốt hơn việc sử dụng băng thông. Tùy chọn này hy vọng cùng một chữ ký hàm như shouldPreload.

#runInNewContext

  • chỉ được sử dụng trong createBundleRenderer
  • Kỳ vọng: boolean | 'once''once'chỉ được hỗ trợ trong 2.3.1+)

Theo mặc định, đối với mỗi kết xuất, trình kết xuất gói sẽ tạo ngữ cảnh V8 mới và thực thi lại toàn bộ gói. Điều này có một số lợi ích - ví dụ, mã ứng dụng được phân lập từ quá trình máy chủ và chúng ta không cần phải lo lắng về vấn đề singleton stateful được đề đã đề cập. Tuy nhiên, chế độ này đi kèm với một số chi phí hiệu năng đáng kể bởi vì việc thực thi lại gói là tốn kém, đặc biệt khi ứng dụng trở nên lớn hơn.

Tùy chọn này mặc định true cho khả năng tương thích ngược, nhưng bạn nên sử dụng runInNewContext: false hoặc runInNewContext: 'once' bất cứ khi nào bạn có thể.

Trong 2.3.0, tùy chọn này có một lỗi mà runInNewContext: false vẫn thực hiện các gói bằng cách sử dụng một context toàn cục riêng biệt. Thông tin sau đây giả định là phiên bản 2.3.1+.

Với runInNewContext: false, mã gói sẽ chạy trong cùng một ngữ cảnh global với quy trình server, vì vậy hãy cẩn thận về mã sửa đổi global trong mã ứng dụng của bạn.

Với runInNewContext: 'once' (2.3.1+), gói được đánh giá trong một ngữ cảnh global riêng biệt , tuy nhiên chỉ một lần khi khởi động. Điều này cung cấp cách ly mã ứng dụng tốt hơn vì nó ngăn chặn gói vô tình làm ảnh hưởng đối tượng global của quá trình server. Các lời khuyên là:

  1. Các dependency mà sửa đổi global (ví dụ như các polyfill) không thể được đặt ngoài trong chế độ này;
  2. Các giá trị được trả về từ việc thực thi gói sẽ sử dụng các hàm tạo global khác nhau, ví dụ: một lỗi được thu thập bên trong gói sẽ không là một đối tượng Error trong xử lý server.

Xem thêm: Cấu trúc mã nguồn

basedir

  • chỉ được sử dụng trong createBundleRenderer

Khai báo rõ ràng thư mục cơ sở cho gói máy chủ để giải quyết các dependency từ node_modules. Điều này chỉ cần thiết nếu tệp gói được tạo của bạn được đặt ở một vị trí khác với vị trí phụ thuộc NPM bên ngoài được cài đặt hoặc vue-server-renderer liên kết NPM của bạn với dự án hiện tại của bạn.

#cache

Cung cấp triển khai bộ nhớ cache thành phần. Đối tượng bộ nhớ cache phải triển khai giao diện sau (sử dụng ký hiệu Luồng):

type RenderCache = {
  get: (key: string, cb?: Function) => string | void;
  set: (key: string, val: string) => void;
  has?: (key: string, cb?: Function) => boolean | void;
};

Một cách sử dụng điển hình là truyền vào một lru-cache:

const LRU = require('lru-cache')

const renderer = createRenderer({
  cache: LRU({
    max: 10000
  })
})

Lưu ý rằng đối tượng bộ nhớ cache nên ít nhất là thực hiện get và set. Ngoài ra, get và has có thể tùy chọn không đồng bộ nếu chúng chấp nhận đối số thứ hai là callback. Điều này cho phép bộ nhớ cache sử dụng các API không đồng bộ, ví dụ như một trình khách Redis:

const renderer = createRenderer({
  cache: {
    get: (key, cb) => {
      redisClient.get(key, (err, res) => {
        // handle error if any
        cb(res)
      })
    },
    set: (key, val) => {
      redisClient.set(key, val)
    }
  }
})

#chỉ thị

Cho phép bạn cung cấp triển khai phía máy chủ cho các chỉ thị tùy chỉnh của mình:

const renderer = createRenderer({
  directives: {
    example (vnode, directiveMeta) {
      // transform vnode based on directive binding metadata
    }
  }
})

Ví dụ, hãy kiểm tra thực thi trình chủ của v-show.

webpack Plugins

Các plugin webpack được cung cấp dưới dạng tệp độc lập và phải được yêu cầu trực tiếp:

const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')

Các tệp mặc định được tạo là:

  • vue-ssr-server-bundle.json cho plugin máy chủ;
  • vue-ssr-client-manifest.json cho plugin ứng dụng khách.

Các tên tệp có thể được tùy chỉnh khi tạo các phiên bản plugin:

const plugin = new VueSSRServerPlugin({
  filename: 'my-server-bundle.json'
})

Xem Cấu hình xây dựng để biết thêm thông tin.

» Tiếp: Vue CLI 3: Tổng quan
« Trước: Sử dụng trong môi trường không phải Node.js
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!