5 tính năng được yêu cầu nhiều nhất cho Vue.js năm 2018


Vũ Kim An
1 năm trước
Hữu ích 5 Chia sẻ Viết bình luận 0
Đã xem 9199

Vue nổi tiếng vì dễ sử dụng và đơn giản. Nó đạt được những phẩm chất này, một phần, bằng cách có một API tập trung và nhỏ mà không có quá nhiều tính năng ngoại lai.

Điều đó nói rằng, người dùng và người bảo trì luôn nghĩ về các tính năng mới hữu ích tiềm năng. Bài viết này thảo luận về năm tính năng được yêu cầu nhiều nhất từ ban phát hành GitHub của Vue .

  1. Hỗ trợ giao thức lặp với v-for
  2. Mẫu đa gốc (đoạn)
  3. Phản ứng
  4. Công cụ v-modelsửa đổi tùy chỉnh
  5. Gói cho trình kết xuất tùy chỉnh

Thật tốt khi nhận thức được các yêu cầu tính năng này, vì một số sẽ tham gia vào các phiên bản sắp tới của Vue, trong khi những phiên bản không thể giúp bạn hiểu rõ hơn về thiết kế của Vue.

Lưu ý: bài viết này ban đầu được đăng  ở đây trên blog Nhà phát triển  Vue.js vào 2018/09/17

1. Hỗ trợ cho giao thức lặp với v-for

Nó là gì?

Khi bạn nghĩ về phép lặp, rất có thể bạn sẽ nghĩ về mảng. ES2015 đã giới thiệu giao thức lặp , khi được triển khai, cho phép mọi loại đối tượng được lặp lại bằng cách sử dụng for...of. ES2015 cũng giới thiệu các loại dữ liệu lặp mới như MapSet.

Hiện tại, v-forchỉ thị của Vue có thể lặp lại các mảng và các đối tượng đơn giản, nhưng không phải các đối tượng hoặc kiểu dữ liệu lặp lại khác. Nếu bạn đang sử dụng một Mapví dụ và bạn muốn lặp lại nó v-for, trước tiên bạn sẽ phải chuyển đổi nó thành một mảng hoặc đối tượng đơn giản.

Lưu ý: bản đồ, bộ và các loại dữ liệu lặp mới khác cũng không phản ứng.

Tại sao người dùng muốn nó?

Do các đối tượng và loại dữ liệu có thể lặp lại chính thức là một phần của ngôn ngữ JavaScript, nên không thể tránh khỏi việc các ứng dụng sẽ sử dụng chúng cho các lợi ích mà chúng mang lại.

Nếu Vue được sử dụng làm lớp UI cho một ứng dụng như vậy, các đối tượng và loại dữ liệu này không thể được lặp lại trong mẫu hoặc sẽ cần phải chuyển qua các hàm chuyển đổi.

Nó sẽ được thêm vào?

Có lẽ. Vấn đề đã được đóng lại trên GitHub, vì các nhà bảo trì không tin rằng các đối tượng và kiểu dữ liệu lặp lại thường được sử dụng cho trạng thái UI. Ngoài ra, làm cho các đối tượng lặp lại và các kiểu dữ liệu phản ứng sẽ mất nhiều công sức.

Tuy nhiên, hệ thống quan sát của Vue sẽ được tái cấu trúc trong phiên bản 2.x-next, đây sẽ là thời điểm lý tưởng để thực hiện tính năng này.

Đọc thêm về GitHub .

2. Mẫu đa gốc (Mảnh vỡ)

Nó là gì?

Hiện tại, Vue có một giới hạn trong đó các mẫu yêu cầu một nút gốc duy nhất. Điều đó có nghĩa là điều này là hợp lệ:

<template>
  <div/>
</template>

Nhưng đây không phải là:

<template>
  <div/>
  <div/>
</template>

Một số người dùng Vue đang yêu cầu các mẫu đa gốc, đặc biệt là tính năng này đã được thêm vào React.

Tại sao người dùng muốn nó?

Nếu bạn muốn thành phần của mình hiển thị các nút con cho một số phần tử cha, bạn sẽ cần thêm một trình bao bọc để tuân thủ các hạn chế gốc đơn:

<template>
  <div><!--Need to add this wrapper-->
    <child1/>
    <child2/>
    ...
  </div>
</template>

Có một trình bao bọc trong cấu trúc sẽ can thiệp vào các yêu cầu của các tính năng HTML hoặc CSS nhất định. Ví dụ: nếu bạn có phần tử cha mẹ với display: flex, có một trình bao bọc giữa cha mẹ và con cái sẽ không hoạt động.

<template>
  <div style="display:flex">
    <!--This pattern won't work because of the wrapper:/-->
    <FlexChildren/>
  </div>
</template>

Nó sẽ được thêm vào?

Theo các nhà bảo trì, cách thức hoạt động của thuật toán khuếch tán DOM ảo làm cho tính năng này khó thực hiện và sẽ yêu cầu viết lại chính. Như vậy, tính năng này không nằm trong lộ trình phát triển.

Đọc thêm về GitHub .

3. Refs phản ứng

Nó là gì?

Một khía cạnh thiết kế thiết yếu của các thành phần Vue là chúng phải được cách ly và giao tiếp bằng các đạo cụ và sự kiện. Tuy nhiên, đôi khi bạn cần một thành phần để có thể biến đổi trạng thái của thành phần khác. Ví dụ: bạn có thể muốn một thành phần biểu mẫu bật trọng tâm của thành phần đầu vào con.

Giải pháp là sử dụng các ref, giúp cho một thành phần thoát ra khỏi mô hình dữ liệu của thành phần khác. Tuy nhiên, khi được truy cập qua ref, mô hình dữ liệu của thành phần không phản ứng nên không thể xem hoặc đưa vào thuộc tính được tính toán. Refs phản ứng sẽ cho phép nó được.

Tại sao người dùng muốn nó?

Các thành phần thường giao tiếp thông qua các đạo cụ và sự kiện, và chỉ trong mối quan hệ cha mẹ / con cái. Để thành phần cha mẹ theo dõi dữ liệu của thành phần con, đứa trẻ phải phát ra các thay đổi trạng thái của nó thông qua các sự kiện. Điều này đòi hỏi cha mẹ phải có người nghe, người xử lý và các thuộc tính dữ liệu cục bộ để lưu trữ trạng thái được theo dõi.

Để biết ví dụ về điều này, hãy tưởng tượng một thành phần biểu mẫu cha mẹ theo dõi trạng thái của trạng thái "hợp lệ" của đầu vào con:

<template>
  <form-input @valid="updateValidEmail">
    </template>
<script>
export default {
  data() => ({
    emailValid: false  
  }),
  methods: {
    updateValidEmail(value) {
      this.emailValid = value;
    }
  }
}
</script>

Mã này hoạt động tốt. Vấn đề duy nhất là mỗi đầu vào con duy nhất trong biểu mẫu cần mã tương tự, duy nhất. Nếu biểu mẫu có đầu vào 10 giây hoặc 100 giây, thành phần biểu mẫu sẽ trở nên khổng lồ.

Sử dụng refs phản ứng, phụ huynh sẽ không cần phải theo dõi đứa trẻ và chỉ cần xem trạng thái của nó với một thuộc tính được tính toán, giảm mã quá mức.

<template>
  <form-input ref="email">
    </template>
<script>
export default {
  computed: {
    emailValid() {
      // Currently this won't work as $refs is not reactive
      this.$refs.email.isValid;
    }
  }
}
</script>

Nó sẽ được thêm vào?

Mặc dù nó là một tính năng được yêu cầu cao, nhưng không có kế hoạch để thêm nó. Một mối quan tâm là tính năng vi phạm thiết kế thành phần tốt. Tham chiếu chỉ có nghĩa là phương sách cuối cùng khi giao diện đạo cụ / sự kiện không thể được sử dụng. Làm cho refs phản ứng sẽ cho phép chống lại các mẫu trong đó ref được sử dụng thay vì các sự kiện.

Đọc thêm về GitHub .

Bộ điều chỉnh mô hình v tùy chỉnh

Nó là gì?

Bạn có thể sử dụng lệnh v-modelđể tạo liên kết dữ liệu hai chiều trên đầu vào biểu mẫu:

<input v-model="message"/>
<!--Message automatically updates as the input is used-->
<p>Message is: {{ message }}</p>
<script>
new Vue({
  data: {
    message: null
  }  
});
</script>

v-model là cú pháp đường trên một prop và người nghe sự kiện.

Một số sửa đổi có sẵn để biến đổi sự kiện. Ví dụ: công cụ .numbersửa đổi, được sử dụng như thế v-model.number="num", sẽ tự động đánh máy kiểu đầu vào dưới dạng số. Điều này rất hữu ích vì ngay cả với type="number"đầu vào, giá trị được trả về từ các phần tử đầu vào HTML luôn là một chuỗi.

Yêu cầu tính năng này là cho phép người v-modelsửa đổi tùy chỉnh được xác định bởi người dùng.

Tại sao người dùng muốn nó?

Giả sử bạn muốn tự động định dạng số điện thoại của Thái Lan khi người dùng nhập số đó vào đầu vào, ví dụ: nhập "0623457654" sẽ được chuyển thành "+66 6 2345 7654". Bạn có thể viết một công cụ sửa đổi tùy chỉnh, nói .thaiphonevà sử dụng nó trên đầu vào của bạn. Dễ dàng.

Nếu không có tính năng này, một thuộc tính được tính cần phải được tạo cho mỗi đầu vào để thực hiện chuyển đổi hoặc thành phần đầu vào tùy chỉnh cần được tạo trong đó logic biến đổi xảy ra trước khi sự kiện được phát ra. Cả hai tùy chọn này đều hoạt động nhưng yêu cầu mã bổ sung có vẻ dễ tránh.

Nó sẽ được thêm vào?

Không có khả năng. Điều này và các vấn đề liên quan đã được đóng lại bởi những người bảo trì đề nghị giải pháp thay thế vừa đề cập.

Đọc thêm về GitHub .

Gói cho Trình kết xuất tùy chỉnh

Nó là gì?

Hiện tại, trình kết xuất của Vue được mã hóa cứng cho các phần tử HTML, vì Vue ban đầu chỉ nhằm mục đích sử dụng trên web. Ý tưởng của tính năng này là tách biệt trình kết xuất HTML khỏi gói Vue chính.

Tại sao người dùng muốn nó?

Vue hiện đang được sử dụng trong các môi trường không phải là web, ví dụ như trên thiết bị di động thông qua các dự án như NativeScript. Cách ly trình kết xuất sẽ giúp tác giả thư viện dễ dàng thay thế trình kết xuất HTML bằng trình kết xuất phù hợp với môi trường đã chọn của họ.

Vue.use(NonWebRenderer);

new Vue({
  render(h) => h('non-web-element', { text: 'Hello World' });
});

Nó sẽ được thêm vào?

Vâng! Đây sẽ là một phần của một thay đổi lớn hơn, trong đó nhiều phần bên trong Vue sẽ được chia thành các gói riêng biệt với các API riêng, cho phép bản dựng này và các loại bản dựng tùy chỉnh khác của Vue. Thay đổi này đã được thêm vào Lộ trình Vue.js và dự kiến ​​cho phiên bản 3.x.

Tham gia khóa học Vue.js miễn phí! Bắt đầu với Vue bằng cách tìm hiểu các tính năng cơ bản và xây dựng một ứng dụng web thực sự trong khóa học video miễn phí kéo dài 2 giờ của chúng tôi Xây dựng ứng dụng Vue.js đầu tiên của bạn. Đăng ký miễn phí !
Hữu ích 5 Chia sẻ Viết bình luận 0
Đã xem 9199