Nguyen HoangTrong Vue 3, có hai cách để sử dụng Composition API trong các component: và setup() function truyền thống. Mỗi cách có những ưu điểm và cách sử dụng khác nhau. Dưới đây là so sánh và hướng dẫn cách sử dụng cả hai.</p> <ol> <li>Sử Dụng setup() Function (Cách Truyền Thống) Đây là cách truyền thống khi sử dụng Composition API. Bạn định nghĩa hàm setup() trong phần <script> của component.</li> </ol> <p>Ví Dụ:</p> <p>vue<br> Copy code<br> </p> <div class="highlight"><pre class="highlight plaintext"><code><template> <div> <p>{{ count }}</p> <button @click="increment">Increment</button> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const count = ref(0); const increment = () => { count.value++; }; return { count, increment }; } }; </script> </code></pre></div> <p></p> <p>Giải Thích:</p> <p>setup() Function: Được gọi trước khi component được tạo. Trong setup(), bạn khai báo trạng thái và các phương thức, và sau đó trả về chúng để sử dụng trong template.<br> ref: Dùng để khai báo biến phản ứng count.<br> increment: Hàm để tăng giá trị của count.<br> Return Object: Các giá trị và phương thức trả về từ setup() được sử dụng trong template.</p> <ol> <li>Sử Dụng <script setup> (Cách Mới) <script setup> là một cú pháp mới được giới thiệu trong Vue 3.2+ để đơn giản hóa việc sử dụng Composition API. Nó làm giảm boilerplate và cung cấp cách viết ngắn gọn hơn cho các component.</li> </ol> <p>Ví Dụ:</p> <p>vue<br> Copy code<br> </p> <div class="highlight"><pre class="highlight plaintext"><code><template> <div> <p>{{ count }}</p> <button @click="increment">Increment</button> </div> </template> <script setup> import { ref } from 'vue'; const count = ref(0); const increment = () => { count.value++; }; </script> </code></pre></div> <p></p> <p>So Sánh</p> <ol> <li>Cấu Trúc:</li> </ol> <p>Options API: Sử dụng các options riêng biệt như data, methods, computed, v.v. Mã nguồn tổ chức theo các option, phù hợp với các component nhỏ hơn và đơn giản hơn.<br> Composition API: Sử dụng hàm setup để khai báo trạng thái và logic. Các giá trị phản ứng và phương thức được nhóm lại trong cùng một hàm, giúp tổ chức và tái sử dụng logic dễ hơn trong các component lớn và phức tạp.</p> <ol> <li>Tính Tái Sử Dụng:</li> </ol> <p>Options API: Tái sử dụng các logic thông qua mixins hoặc extends, nhưng có thể gây khó khăn khi làm việc với nhiều mixins.<br> Composition API: Cho phép tạo các hàm custom (hoặc "composables") để chia sẻ và tái sử dụng logic giữa các component một cách dễ dàng hơn.</p> <p>So Sánh:<br> Mục Đích:</p> <p>computed: Để tính toán và trả về giá trị phản ứng dựa trên các giá trị phụ thuộc.<br> watch: Để theo dõi sự thay đổi của giá trị và thực hiện các hành động khi giá trị thay đổi.<br> Cache:</p> <p>computed: Kết quả được lưu cache và chỉ tính lại khi các phụ thuộc thay đổi.<br> watch: Không lưu cache và hàm callback được gọi mỗi khi giá trị thay đổi.<br> Sử Dụng:</p> <p>computed: Sử dụng khi bạn cần một giá trị phản ứng tính toán dựa trên các giá trị khác.<br> watch: Sử dụng khi bạn cần thực hiện các hiệu ứng phụ hoặc hành động khác khi giá trị phản ứng thay đổi.<br> Tóm lại: computed và watch phục vụ các mục đích khác nhau trong Vue.js. Bạn nên sử dụng computed khi bạn cần một giá trị phản ứng tính toán và watch khi bạn cần thực hiện các hành động khi giá trị thay đổi.</p>
