Chào mừng đến với Cafedev, nơi chúng tôi chia sẻ những kiến thức và kinh nghiệm về lập trình và phát triển web. Trong bài viết này, chúng ta sẽ khám phá những điểm tương đồng giữa hai framework phổ biến: React và Vue.js. Dù có những khác biệt, nhưng đôi khi bạn sẽ ngạc nhiên khi nhận ra có nhiều tính năng tương tự giữa chúng. Hãy cùng tìm hiểu và so sánh để hiểu rõ hơn về sự tương đồng giữa React và Vue.js.
Với sự phong phú của các framework web hiện nay, thật thú vị khi quan sát được một số trong số chúng có những điểm tương đồng đáng chú ý. Trong bài viết này, chúng ta sẽ nói về sự tương đồng giữa hai framework: React ** và Vue.js ** . Tôi đã làm việc với React từ lâu rồi, nhưng khi chuyển sang một công ty mới, tôi phát hiện mình mới bắt đầu khám phá thế giới Vue.js. Ở cuối bài viết này, tôi sẽ chia sẻ sở thích cá nhân của mình giữa hai framework này. Hãy cùng nhau xem xét một số điểm tương đồng trong các tính năng của họ và có thể bài viết này sẽ giúp bạn làm cho quá trình chuyển đổi mượt mà hơn đối với những người quen thuộc với một framework và muốn chuyển sang framework khác.
Mặc dù React và Vue.js có thể khác nhau ở các khía cạnh khác nhau, nhưng đáng chú ý là có một số tính năng cùng chức năng dưới các tên khác nhau. Để thuận tiện, tôi sẽ ký hiệu các tính năng của React bằng (R) và các tính năng của Vue.js bằng (V).
Nội dung chính
1. useState (R), useRef (R) và ref (V)
Trong React, chúng ta sử dụng hook useState để thêm một biến trạng thái vào thành phần của chúng ta và chúng ta làm điều tương tự trong Vue.js bằng cách sử dụng refs .
// React
const [name, setName] = useState('Thomas');
// when we want to change the value
setName('Tom');
// Vue.js
const name = ref('Thomas');
// when we want to change the value
name.value = 'Tom';Hơn nữa, chúng ta có thể sử dụng refs từ Vue.js theo cách tương tự như hook useRef từ React khi chúng ta muốn truy cập vào các phần tử DOM.
// React
const inputRef = useRef(null);
// ...
return <input ref={ inputRef} />;
// Vue.js
const inputRef = ref(null);
// ...
<template>
<input ref="inputRef" />
</template>2. useEffect (R) và watch (V)
Tôi biết, tôi biết bạn có thể đang nghĩ “mệt quá” với nhiều, và có thể là sai lầm với useEffects, nhưng đừng lo, tôi sẽ giữ nó đơn giản ở đây chỉ để chỉ ra điểm tương đồng, không gì khác. Vì vậy, có một tham số thứ hai trong hook useEffect được gọi là phụ thuộc và đó là một danh sách của tất cả các tham chiếu giá trị phản ứng bên trong mã thiết lập. Đơn giản là nó giám sát các giá trị bên trong danh sách đó, điều mà watch từ Vue.js làm.
// React
const name = useState('Thomas');
// ...
useEffect(() => {
// ...
}, [name]);
// Vue.js
const name = ref('Thomas');
watch(name, () => {
// ...
});3. Children Props (R) và Slots (Vue.js)
Khái niệm về các thành phần lồng nhau bên trong một thành phần cha, được đóng gói như Children Props trong React, có đối ứng của nó trong Slots của Vue.js. Đáng chú ý, Slots của Vue.js cung cấp ưu điểm của tên Slots động .
4. useContext (R) và Provide/Inject (Vue.js)
Cả hai framework đều giới thiệu các cơ chế để tránh prop drilling . Hook useContext giúp bạn đọc và đăng ký vào ngữ cảnh bạn muốn. Bạn phải trước tiên tạo ngữ cảnh với createContext và sau đó sử dụng ngữ cảnh đó với useContext . Trong khi đó, ở Vue.js bạn có thể tiêm vào dữ liệu được cung cấp bởi một thành phần tổ tiên bằng cách sử dụng hàm inject() và để cung cấp dữ liệu bằng cách sử dụng hàm provide() .
// React
const ThemeContext = createContext(null);
// ...
return (
<ThemeContext.Provider value="light">
// ...
</ThemeContext.Provider>
);
// in the component you want the data
const theme = useContext(ThemeContext);
// Vue.js
const name = ref('Thomas');
provide('name', name);
// in the component you want the data
const name = inject('name');5. Tạo Cổng (R) và Di Chuyển (V)
Tên ở đây cho cả hai framework đều tuyệt vời, và việc đặt tên trong lập trình đã được biết đến là khó khăn. Tạo Cổng giống như tạo một cổng ma thuật đến một nơi nào đó trong DOM để đặt thành phần của bạn. Di Chuyển thực hiện công việc tương tự, nó di chuyển thành phần của bạn đến một nơi nào đó trong DOM. Chúng ta thường tạo các cổng khi muốn hiển thị các phần tử lên trên nhau, hầu hết các lần đó các phần tử đó là các hộp thoại.
// React
createPortal(
<p>This is just a component which I want to throw to a magic portal.</p>,
document.body
)
// Vue.js
<Teleport to="body">
<p>This is just a component which I want to throw to a magic portal.</p>
</Teleport>Tôi yêu viết mã frontend và thực sự thích cả hai framework nhưng thành thực mà nói tôi thích React hơn. Có lẽ lý do là tôi đã làm việc nhiều hơn với React. Tuy nhiên, tôi cần phải học Vue.js và sự thật là, tôi muốn học nó nữa. Nó có nhiều lợi ích và nhiều điều có thể làm cho nó tốt hơn React.
Ngoài ra, về React, có một số tin tốt từ nhóm React rằng họ sẽ thực hiện một cập nhật và đó sẽ là một phiên bản chính, có thể sẽ là React 19 .
Tóm lại, trong bài viết này, chúng ta đã cùng nhau khám phá những điểm tương đồng giữa React và Vue.js. Dù là hai framework khác nhau, nhưng chúng đều có những tính năng và cách thức hoạt động gần như nhau, từ việc quản lý trạng thái đến cách sử dụng các tính năng như useState, useEffect và nhiều hơn nữa. Hy vọng rằng bài viết này đã giúp các bạn hiểu rõ hơn về sự tương đồng và khác biệt giữa React và Vue.js. Đừng quên tiếp tục theo dõi các bài viết mới trên Cafedev để cập nhật thêm thông tin và kiến thức hữu ích về lập trình web.”
Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của CafeDev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
