Giới thiệu về các hàm Render của Vue.js

---

Các mẫu Vue.js cực kỳ mạnh mẽ và có thể hoàn thành hầu hết mọi thứ bạn cần trong một ứng dụng. Tuy nhiên, có một vài trường hợp sử dụng, thường là những trường hợp liên quan đến việc tạo thành phần động dựa trên giá trị đầu vào hoặc vị trí được các hàm kết xuất phục vụ tốt hơn.

Những người đến từ thế giới React có lẽ rất quen thuộc với các hàm render. Các thành phần React được xây dựng với chúng, thường thông qua JSX . Và trong khi các hàm render của Vue cũng có thể được viết bằng JSX, ta sẽ gắn bó với JS thô để bạn có thể dễ dàng hiểu hơn về nền tảng của hệ thống thành phần của Vue.

Cần lưu ý các mẫu của Vue.js thực sự biên dịch để hiển thị các hàm tại thời điểm xây dựng. Các mẫu chỉ cung cấp một đường cú pháp thuận tiện và quen thuộc trên đầu các hàm kết xuất. Mặc dù mạnh mẽ hơn, các chức năng kết xuất thường bị ảnh hưởng trong bộ phận dễ đọc.

Tạo một thành phần

Các thành phần có chức năng kết xuất không có thẻ mẫu hoặc thuộc tính. Thay vào đó, họ định nghĩa một hàm được gọi là kết xuất nhận đối số createElement (renderElement: String | Component, Definition: Object, children: String | Array) (thường được đặt alias là h , vì lý do nào đó, đổ lỗi cho JSX) và trả về một phần tử được tạo bằng hàm đó . Mọi thứ khác vẫn như cũ.

export default {
  data() {
    return {
      isRed: true
    }
  },

  /*
   * Same as
   * <template>
   *   <div :class="{'is-red': isRed}">
   *     <p>Example Text</p>
   *   </div>
   * </template>
   */
  render(h) {
    return h('div', {
      'class': {
        'is-red': this.isRed
      }
    }, [
      h('p', 'Example Text')
    ])
  }
}

Thay thế các lệnh ngắn gọn

Các mẫu Vue đi kèm với nhiều tính năng tiện lợi để thêm các tính năng logic và ràng buộc cơ bản vào các mẫu. Các chức năng kết xuất không có quyền truy cập vào các chức năng này. Thay vào đó, chúng phải được triển khai bằng Javascript thuần túy, đối với hầu hết các lệnh, khá đơn giản.

v-nếu

Điều này là dễ dàng. Thay vì sử dụng v-if , chỉ cần sử dụng câu lệnh if (expr) Javascript thông thường xung quanh các lệnh gọi createElement của bạn.

v-cho

v-for có thể được triển khai với bất kỳ phương thức lặp lại Javascript nào, for, for-of, Array.map, Array.filter, v.v. Bạn có thể kết hợp chúng theo những cách rất thú vị để thực hiện lọc hoặc cắt trạng thái mà không cần các thuộc tính được tính toán.

Ví dụ, bạn có thể thay thế

<template>
  <ul>
    <li v-for="pea of pod">
      {{pea.name}}
    </li>
  </ul>
</template>

với

render(h) {
  return h('ul', this.pod.map(pea => h('li', pea.name)));
}

mô hình v

Một điều tốt cần lưu ý là v-model chỉ đơn giản là viết tắt cho một thuộc tính ràng buộc với giá trị và cài đặt thuộc tính dữ liệu khi nào sự kiện đầu vào được kích hoạt. Thật không may, không có cách viết tắt như vậy cho các chức năng kết xuất. Bạn phải tự thực hiện nó, như hình dưới đây.

render(h) {
  return h('input', {
    domProps: {
      value: this.myBoundProperty
    },
    on: {
      input: e => {
        this.myBoundProperty = e.target.value
      }
    }
  })
}

Tương đương với:

<template>
  <input :value="myBoundProperty" @input="myBoundProperty = $event.target.value"/>
</template>

hoặc là

<template>
  <input v-model="myBoundProperty"/>
</template>

v-bind

Các ràng buộc thuộc tính và thuộc tính được đặt trong định nghĩa phần tử, dưới dạng arttrs , props và domProps (những thứ như value và innerHTML ).

render(h) {
  return h('div', {
    attrs: {
      // <div :id="myCustomId">
      id: this.myCustomId
    },

    props: {
      // <div :someProp="someonePutSomethingHere">
      someProp: this.someonePutSomethingHere
    },

    domProps: {
       // <div :value="somethingElse">
      value: this.somethingElse
    }
  });
}

Lưu ý thêm, các ràng buộc về lớp và kiểu được xử lý trực tiếp ở root của định nghĩa, không phải dưới dạng các phần tử , đạo cụ hoặc domProps .

render(h) {
  return h('div', {
    // "class" is a reserved keyword in JS, so you have to quote it.
    'class': {
      myClass: true,
      theirClass: false
    },

    style: {
      backgroundColor: 'green'
    }
  });
}

v-on

Trình xử lý sự kiện cũng được thêm trực tiếp vào định nghĩa phần tử, trong on (hoặc nativeOn , có tác dụng tương tự như v-on.native cho các thành phần.)

render(h) {
  return h('div', {
    on: {
      click(e) {
        console.log('I got clickeded!')
      }
    }
  });
}

Các sửa đổi có thể được triển khai bên trong trình xử lý:

• .stop -> e.stopPropagation ()
• .prevent -> e.preventDefault ()
• .self -> if (e.target! == e.currentTarget) trả về

Công cụ sửa đổi bàn phím

• . [TARGET_KEY_CODE] -> if (event.keyCode! == TARGET_KEY_CODE) trả về
• . [MODIFIER] -> if (! Event.MODIFIERKey) trả về

Tính chất đặc biệt

Các khe có thể được truy cập thông qua điều này. $ Slot dưới dạng một mảng các node createElement () .

Các vị trí có phạm vi được lưu trữ trong này. $ ScopedSlots [scope] (props: object) dưới dạng các hàm trả về một mảng các node createElement () .

Tận hưởng sức mạnh mới, không giới hạn được cấp cho bạn bằng các chức năng kết xuất! Chỉ cần cẩn thận để sử dụng một cách khôn ngoan.

---

---

Các tin liên quan