Trung tâm cá nhân
sách gpt4 ăn đã đi

Phân tích ngắn gọn về API đã được lắp ráp của Vue 3.0 (1)

In lại Tác giả: qq735679552 Thời gian cập nhật: 29-09-2022 22:32:09 31 4
mua khóa gpt4 giày nike

CFSDN nhấn mạnh vào giá trị tạo ra nguồn mở và chúng tôi cam kết xây dựng nền tảng chia sẻ tài nguyên để mọi nhân viên CNTT có thể tìm thấy thế giới tuyệt vời của bạn tại đây.

Bài blog CFSDN này phân tích ngắn gọn về Assembly API của Vue 3.0(1) được tác giả sưu tầm và biên soạn. Nếu các bạn quan tâm đến bài viết này thì nhớ like nhé.

(1) Dữ liệu đáp ứng.

1. Ví dụ đơn giản.

Bắt đầu với liên kết dữ liệu đơn giản nhất, trong Vue 2.0, chúng tôi liên kết dữ liệu với một vị trí được chỉ định trong mẫu như sau:

Trả về một đối tượng dữ liệu để liên kết trong hàm tạo dữ liệu của tham số tạo thành phần. Có một trường now trong đó, trường này sẽ được hiển thị thành .app > p trong mẫu.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
< bản mẫu >
   < phân chia lớp học = "ứng dụng" >
     < h1 >Xin chào thế giới! h1 >
     < P >Bây giờ là: {{now.toString()}} P >
   phân chia >
bản mẫu >
 
< kịch bản >
// Xem 2.0
xuất khẩu mặc định {
   dữ liệu() {
     trở lại {
       bây giờ: new Date(),
     };
   },
};
kịch bản >

Nếu được triển khai bằng API lắp ráp của Vue3, nó sẽ như thế này:

?
1
2
3
4
5
6
7
8
// Xem 3.0
xuất khẩu mặc định {
   cài đặt() {
     trở lại {
       Hiện nay: mới Ngày(),
     };
   },
};

2. Cập nhật dữ liệu.

Lạ nhỉ, hình như không có gì khác biệt, chỉ thay đổi dữ liệu sang setup thôi?

Không, nếu bây giờ chúng ta thực hiện một thay đổi nhỏ đối với DEMO này để nó làm mới thời gian mỗi giây, thì nó có thể được triển khai bằng Vue2 như thế này:

?
1
2
3
4
5
6
7
8
9
10
11
// Xem 2.0
xuất khẩu mặc định {
   dữ liệu() {
     trở lại {
       Hiện nay: mới Ngày(),
     };
   },
   gắn kết() {
     đặtKhoảngThời Gian(() => cái này .bây giờ = mới Ngày(), 1000);
   },
};

Việc triển khai tương đương của Vue3 là:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Xem 3.0
nhập { ref, onMounted } từ 'xem' ;
 
xuất khẩu mặc định {
   cài đặt() {
     const bây giờ = ref( mới Ngày());
     đang gắn kết(() => {
       setInterval(() => bây giờ.giá trị = mới Ngày(), 1000);
     });
     trở lại {
       Hiện nay,
     };
   },
};

3. Phân tích so sánh.

Chúng tôi, những người đã viết quá nhiều về Vue, có thể đã quên mã Vue2 trông lạ như thế nào khi nhìn từ góc độ của một mô-đun JS tiêu chuẩn:

  • gắn kết sửa đổi trong cái này.bây giờ Dữ liệu được tạo ở đâu? Chúng tôi đang ở trong mô-đun mặc định Trường tương ứng không được tìm thấy trong các thành viên của đối tượng, nhưng trong dữ liệu Có trường này trong một đối tượng khác được trả về bên trong;
  • Và dữ liệu trở lại Hiện nay Cũng không có thật cái này.bây giờ, Nhưng cái này.bây giờ Giá trị ban đầu của dữ liệu ở giữa thiết lậpKhoảng thời gian Ôn lại Hiện nay Thời gian kết xuất không thể được cập nhật;
  • Nếu bạn muốn sử dụng lại dữ liệu này và logic cập nhật của nó, bạn phải viết cấu trúc đó một cách riêng biệt và sau đó chuyển nó qua một trình xử lý đặc biệt. pha trộn Hàm này được trộn vào các tham số xây dựng của thành phần hiện tại.

Tất cả điều này là do toàn bộ đối tượng mặc định của mô-đun thực sự là tham số xây dựng của đối tượng vm. Logic tạo đối tượng được ẩn đằng sau nó. Khi xây dựng đối tượng, một số trường ở các cấp độ khác nhau trong tham số xây dựng được liên kết với đối tượng vm.

Nhiều người mới có thể đã mắc lỗi. Trường dữ liệu được trả về trong dữ liệu xung đột với tên trường trong props, phương thức hoặc được tính toán (đặc biệt là trường có tên data) và IDE không thể phát hiện trực tiếp trong giai đoạn mã hóa. Vì những lý do trên, các trường này thuộc về các vị trí khác nhau khi chúng được tạo và được gắn với cùng một đối tượng khi chúng được xây dựng sau đó, dẫn đến xung đột chỉ có thể được phát hiện trong thời gian chạy.

Trong Vue3, nó được thay đổi để cung cấp các hàm như ref, Reactive, toRef, onMounted, v.v. Trong ví dụ:

  • hiện hữu cài đặt nhìn thấy trong Hiện nay Tức là nó được sử dụng để ràng buộc cái này.bây giờ；
  • Ôn lại bây giờ.giá trị Bạn có thể xem cập nhật trạng thái trang;
  • Nếu bạn muốn gói gọn quá trình xử lý dữ liệu này, bạn chỉ cần Hiện nay Và trênMounted Trích xuất quá trình xử lý vào cùng một chức năng, sau đó Hiện nay Cứ về đi, không cần hộp đen đâu pha trộn đối phó với.

Có thể nói, Vue3 trực tiếp trao quyền ra quyết định sáng tạo dữ liệu phản hồi và callback thông báo vòng đời cho nhà phát triển thông qua API trực quan, rõ ràng và dễ kiểm soát hơn.

4. Mô tả API.

Hãy nói chi tiết về một số API liên quan đến dữ liệu phản ứng thường được sử dụng: ref, Reactive và toRefs.

(1) tham khảo 。

Tham chiếu được sử dụng trong ví dụ trên có thể gói dữ liệu vào một đối tượng proxy dữ liệu đáp ứng.

?
1
2
3
4
5
const đếm = ref(0);
console.log(đếm.giá trị); // => 0
 
đếm.giá trị++;
console.log(đếm.giá trị); // => 1

Khi bạn sửa đổi thuộc tính count.value của đối tượng proxy, vị trí sử dụng count trong mẫu sẽ phản hồi các thay đổi dữ liệu và cập nhật trạng thái dữ liệu trong chế độ xem.

(2) phản ứng 。

Để đóng gói đáp ứng các đối tượng, việc sử dụng ref có một chút rắc rối:

?
1
2
3
4
5
6
7
trạng thái hằng số = ref({
   đếm: 0,
});
console.log(trạng thái.giá trị.số lượng); // => 0
 
trạng thái.giá trị.đếm++;
console.log(trạng thái.giá trị.số lượng); // => 1

Tại thời điểm này, bạn có thể sử dụng phản ứng thay thế và sửa đổi số đếm giống như vận hành các trường của một đối tượng bình thường để cập nhật chế độ xem:

?
1
2
3
4
5
6
7
const state = phản ứng({
   đếm: 0,
});
console.log(trạng thái.đếm); // => 0
 
trạng thái. đếm++;
console.log(trạng thái.đếm); // => 1

Việc thêm các trường mới vào trạng thái đối tượng proxy cũng có thể kích hoạt cập nhật chế độ xem.

(3) để tham khảo 。

Đôi khi, tên của đối tượng quá dài và chúng tôi muốn sử dụng các trường bên trong của đối tượng trực tiếp trong mẫu là không thể:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
nhập {phản ứng} từ 'xem' ;
 
xuất khẩu mặc định {
   cài đặt() {
     const position = phản ứng({
       x: 0,
       y: 0,
     });
     trở lại {
       // Lỗi, x, y bị giải cấu trúc không có proxy phản hồi. Sau khi liên kết với mẫu, các thay đổi dữ liệu không thể kích hoạt cập nhật chế độ xem
       ...chức vụ,
     };
   },
};

Trong trường hợp này, hãy sử dụng toRefs để xử lý và sau đó giải cấu trúc bài tập:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
nhập {phản ứng, toRefs} từ 'xem' ;
 
xuất khẩu mặc định {
   cài đặt() {
     const position = phản ứng({
       x: 0,
       y: 0,
     });
     trở lại {
       ...toRefs(vị trí),
     };
   },
};

Tuy nhiên, cần lưu ý rằng toRefs chỉ xử lý các trường vị trí hiện có khi nó được gọi. Nếu một trường mới được thêm vào vị trí sau đó, bản cập nhật chế độ xem sẽ không được kích hoạt.

Trên đây là nội dung chi tiết phân tích ngắn gọn về API được lắp ráp của Vue 3.0 (1). Để biết thêm thông tin về API được lắp ráp của Vue, vui lòng theo dõi các bài viết liên quan khác của tôi! .

Liên kết gốc: http://blog.krimeshu.com/2020/08/30/vue-3-composition-api-introduction-1/?utm_source=tuicool&utm_medium=referral.

Cuối cùng, bài viết này về phân tích ngắn gọn về API được lắp ráp của Vue 3.0 (1) kết thúc tại đây. Nếu bạn muốn biết thêm về phân tích ngắn gọn về API được lắp ráp của Vue 3.0 (1), vui lòng tìm kiếm bài viết CFSDN hoặc tiếp tục. Duyệt các bài viết liên quan, tôi hy vọng bạn sẽ ủng hộ blog của tôi trong tương lai! .

31 4 0
Đề xuất bài viết: Giải thích chi tiết cách sử dụng thuộc tính trong python3
Đề xuất bài viết: Nhiều liên kết đầu vào chỉ định các phiên bản v-model trong vòng lặp Vue
Đề xuất bài viết: Giải thích chi tiết về vấn đề trình thu thập thông tin bị chặn
Đề xuất bài viết: Hoạt động liên kết của v-model để chọn trong vue
qq735679552
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress